Maia accent color patch for Gtk4 desktop icons extension

Feedback Feature Request
1

Hello, this extension currently uses precoded colors, and when system accent is set to maia, the extension uses the default GNOME green.
Two files have to be patched, /usr/share/gnome-shell/extensions/gtk4-ding@smedius.gitlab.com/app/desktopGrid.js:

this.Prefs.selectColor.red
this.Prefs.selectColor.green
this.Prefs.selectColor.blue

(all instances of these)
And $HOME/.config/com.desktop.ding/stylesheet-override.css (to be created):

@define-color theme_selected_accent_color <ACCENT_HEX>;
@define-color theme_selected_bg_color    <ACCENT_HEX>;
@define-color theme_selected_fg_color    <FG_HEX>;
@define-color selected_bg_color  <ACCENT_HEX>;
@define-color selected_fg_color  <FG_HEX>;
@define-color desktop_icons_bg_color @theme_selected_accent_color;
@define-color desktop_icons_fg_color @theme_selected_fg_color;

I don’t know how it can be made to follow the GNOME colors as well, when those are set, but I think there were ways to fetch them.

2

image
image547×555 58.7 KB

Used this ChatGPT script, worked

#!/usr/bin/env bash
set -euo pipefail

ACCENT="#16a085"
JS_PATH="/usr/share/gnome-shell/extensions/gtk4-ding@smedius.gitlab.com/app/desktopGrid.js"
CSS_OUT="$HOME/.config/com.desktop.ding/stylesheet-override.css"

# validate hex
hex="${ACCENT#\#}"
if ! [[ "$hex" =~ ^[0-9A-Fa-f]{6}$ ]]; then
  echo "Invalid hex: $ACCENT" >&2
  exit 1
fi

# compute RGB ints
R=$((0x${hex:0:2}))
G=$((0x${hex:2:2}))
B=$((0x${hex:4:2}))

# compute RGB floats (locale-safe)
R_FLOAT=$(LC_NUMERIC=C awk -v v="$R" 'BEGIN{printf "%.10f", v/255}')
G_FLOAT=$(LC_NUMERIC=C awk -v v="$G" 'BEGIN{printf "%.10f", v/255}')
B_FLOAT=$(LC_NUMERIC=C awk -v v="$B" 'BEGIN{printf "%.10f", v/255}')

# compute foreground color (black or white) by luminance
lum=$(( (R*299 + G*587 + B*114) / 1000 ))
if [ "$lum" -gt 128 ]; then
  FG="#000000"
else
  FG="#ffffff"
fi

# Create CSS override
mkdir -p "$(dirname "$CSS_OUT")"
cat > "$CSS_OUT" <<EOF
@define-color theme_selected_accent_color $ACCENT;
@define-color theme_selected_bg_color    $ACCENT;
@define-color theme_selected_fg_color    $FG;
@define-color selected_bg_color  $ACCENT;
@define-color selected_fg_color  $FG;
@define-color desktop_icons_bg_color @theme_selected_accent_color;
@define-color desktop_icons_fg_color @theme_selected_fg_color;
EOF

echo "Wrote: $CSS_OUT"

# Patch desktopGrid.js (edit temp then move into place)
if [ ! -f "$JS_PATH" ]; then
  echo "Error: $JS_PATH not found" >&2
  exit 2
fi

# create .original backup if missing
if [ ! -f "${JS_PATH}.original" ]; then
  sudo cp "$JS_PATH" "${JS_PATH}.original"
  echo "Created original backup: ${JS_PATH}.original"
fi

TMP="$(mktemp /tmp/desktopGrid.XXXXXX.js)"
# copy using sudo if needed (some distros make /usr/share readable)
if ! cp "$JS_PATH" "$TMP" 2>/dev/null; then
  sudo cp "$JS_PATH" "$TMP"
fi

# perform replacements on temp file
sed -i -E "s|this\.Prefs\.selectColor\.red|${R_FLOAT}|g" "$TMP"
sed -i -E "s|this\.Prefs\.selectColor\.green|${G_FLOAT}|g" "$TMP"
sed -i -E "s|this\.Prefs\.selectColor\.blue|${B_FLOAT}|g" "$TMP"

sed -i -E "s|1(\.0)?[[:space:]]*-[[:space:]]*this\.Prefs\.selectColor\.red|${R_FLOAT}|g" "$TMP"
sed -i -E "s|1(\.0)?[[:space:]]*-[[:space:]]*this\.Prefs\.selectColor\.green|${G_FLOAT}|g" "$TMP"
sed -i -E "s|1(\.0)?[[:space:]]*-[[:space:]]*this\.Prefs\.selectColor\.blue|${B_FLOAT}|g" "$TMP"

# move patched file into place (sudo)
sudo mv "$TMP" "$JS_PATH"
sudo chmod 644 "$JS_PATH"

echo "Patched: $JS_PATH"
echo "Replaced tokens:"
echo "  this.Prefs.selectColor.red   -> $R_FLOAT"
echo "  this.Prefs.selectColor.green -> $G_FLOAT"
echo "  this.Prefs.selectColor.blue  -> $B_FLOAT"

# attempt to reload extension for current user (best-effort)
if command -v gnome-extensions >/dev/null 2>&1; then
  echo "Reloading extension (user): gtk4-ding@smedius.gitlab.com"
  gnome-extensions disable gtk4-ding@smedius.gitlab.com >/dev/null 2>&1 || true
  sleep 0.5
  gnome-extensions enable gtk4-ding@smedius.gitlab.com >/dev/null 2>&1 || true
  echo "Reload attempted."
else
  echo "Note: gnome-extensions not found — restart GNOME Shell or toggle the extension manually."
fi

echo "Done."
3

Why wouldn’t it use the system accent color? See the preferences.js.

Have you run the accent-color-change script (Layout Switcher > Settings > Accent Colors)? What does your ~/.config/gtk-4.0/gtk.css look like?

On Manjaro, Maia is one of the colors just like Blue. :wink:

4

After running the accent color change script, it’s still using the GNOME green

image
image651×381 48.9 KB

The gtk4 config contains :root { --accent-bg-color: var(--accent-maia); }, but the extension doesn’t use the gtk4 theme for the highlights and the selection, I’ve tried before. Otherwise I don’t know why isn’t it respecting maia as a color from GNOME settings. Maybe the author implemented just the default GNOME colors.

5

Looks like Maia to me. :man_shrugging:

Screenshot From 2026-01-17 13-17-48
Screenshot From 2026-01-17 13-17-48560×517 32.1 KB

6

Here you can see maia is bluer, it’s using green as a fallback, like in the illustrations in GNOME Settings in the multitasking tab for example (they normally follow GNOME’s accent)

image
image1069×675 120 KB

7

Oh, maybe it’s because my wallpaper is blue. :laughing: