firefox theme guidance

README.md

@@ -486,6 +486,38 @@ You'll have to restart your session for themes to take effect.
 
 Nevigate to dms settings -> themes & colors -> and click "Apply QT Themes"
 
+#### Firefox
+
+1. **In firefox, navigate to `about:config`**
+- set `toolkit.legacyuserprofilecustomizations.stylesheets` to `true`
+- set `svg.context-properties.content.enabled` to `true`
+- Create a new property called `userChrome.theme-material` and type `boolean`
+  - set to `true`
+
+<details><summary><strong>Firefox configuration</strong></summary>
+<img width="1262" height="104" alt="image" src="https://github.com/user-attachments/assets/4bca43d1-5735-4401-9b91-5ee4f0b1e357" />
+<img width="1262" height="104" alt="image" src="https://github.com/user-attachments/assets/348d37e0-5c6c-4db8-b7c9-89cabf282c25" />
+<img width="1244" height="106" alt="image" src="https://github.com/user-attachments/assets/75fd4972-bc4a-4657-b756-b31ef8061b3b" />
+</details>
+
+2. **Install material fox theme**
+```bash
+# Find Firefox profile directory
+export PROFILE_DIR=$(find ~/.mozilla/firefox -maxdepth 1 -type d -name "*.default-release" | head -n 1)
+
+# Download, extract to profile dir, and cleanup
+curl -L -o "$PROFILE_DIR/chrome.zip" https://github.com/edelvarden/material-fox-updated/releases/download/v2.0.0/chrome.zip
+unzip -o "$PROFILE_DIR/chrome.zip" -d "$PROFILE_DIR"
+rm "$PROFILE_DIR/chrome.zip"
+```
+
+3. **Configure dynamic colors for material fox theme**
+```bash
+export PROFILE_DIR=$(find ~/.mozilla/firefox -maxdepth 1 -type d -name "*.default-release" | head -n 1)
+rm -f "$PROFILE_DIR/chrome/theme-material-blue.css"
+ln -sf ~/.config/DankMaterialShell/firefox.css "$PROFILE_DIR/chrome/theme-material-blue.css"
+```
+
 ### Terminal Integration
 
 The matugen integration will automatically generate new colors for certain apps only if they are installed.

matugen/configs/firefox.toml

@@ -0,0 +1,3 @@
+[templates.firefox]
+input_path = './matugen/templates/firefox-userchrome.css'
+output_path = '~/.config/DankMaterialShell/firefox.css'

matugen/templates/firefox-userchrome.css

@@ -0,0 +1,147 @@
+/* :root {
+ --md-font-family: 'Inter Variable'
+  --toolbar-bgcolor: var(--md-sys-color-surface);
+  --toolbar-color: var(--md-sys-color-on-surface);
+  --arrowpanel-background: var(--md-sys-color-surface-container);
+  --arrowpanel-color: var(--md-sys-color-on-surface);
+  --arrowpanel-border-color: var(--md-sys-color-surface-variant);
+  --toolbar-field-background-color: var(--md-sys-color-surface-container);
+  --toolbar-field-color: var(--md-sys-color-on-surface);
+  --toolbar-field-border-color: var(--md-sys-color-surface-variant);
+  --toolbar-field-focus-border-color: var(--md-sys-color-primary);
+  --focus-outline-color: var(--md-sys-color-primary);
+} */
+
+@media -moz-pref("userChrome.theme-material") {
+  :root {
+    --md-sys-color-primary: {{colors.primary.light.hex}};
+    --md-sys-color-surface-tint: {{colors.primary.light.hex}};
+    --md-sys-color-on-primary: {{colors.on_primary.light.hex}};
+    --md-sys-color-primary-container: {{colors.primary_container.light.hex}};
+    --md-sys-color-on-primary-container: {{colors.on_primary_container.light.hex}};
+    --md-sys-color-secondary: {{colors.secondary.light.hex}};
+    --md-sys-color-on-secondary: {{colors.on_secondary.light.hex}};
+    --md-sys-color-secondary-container: {{colors.secondary_container.light.hex}};
+    --md-sys-color-on-secondary-container: {{colors.on_secondary_container.light.hex}};
+    --md-sys-color-tertiary: {{colors.tertiary.light.hex}};
+    --md-sys-color-on-tertiary: {{colors.on_tertiary.light.hex}};
+    --md-sys-color-tertiary-container: {{colors.tertiary_container.light.hex}};
+    --md-sys-color-on-tertiary-container: {{colors.on_tertiary_container.light.hex}};
+    --md-sys-color-error: {{colors.error.light.hex}};
+    --md-sys-color-on-error: {{colors.on_error.light.hex}};
+    --md-sys-color-error-container: {{colors.error_container.light.hex}};
+    --md-sys-color-on-error-container: {{colors.on_error_container.light.hex}};
+    --md-sys-color-background: {{colors.background.light.hex}};
+    --md-sys-color-on-background: {{colors.on_background.light.hex}};
+    --md-sys-color-surface: {{colors.surface.light.hex}};
+    --md-sys-color-on-surface: {{colors.on_surface.light.hex}};
+    --md-sys-color-surface-variant: {{colors.surface_variant.light.hex}};
+    --md-sys-color-on-surface-variant: {{colors.on_surface_variant.light.hex}};
+    --md-sys-color-outline: {{colors.outline.light.hex}};
+    --md-sys-color-outline-variant: {{colors.outline_variant.light.hex}};
+    --md-sys-color-shadow: {{colors.shadow.light.hex}};
+    --md-sys-color-scrim: {{colors.scrim.light.hex}};
+    --md-sys-color-inverse-surface: {{colors.inverse_surface.light.hex}};
+    --md-sys-color-inverse-on-surface: {{colors.inverse_on_surface.light.hex}};
+    --md-sys-color-inverse-primary: {{colors.inverse_primary.light.hex}};
+    --md-sys-color-primary-fixed: {{colors.primary_fixed.light.hex}};
+    --md-sys-color-on-primary-fixed: {{colors.on_primary_fixed.light.hex}};
+    --md-sys-color-primary-fixed-dim: {{colors.primary_fixed_dim.light.hex}};
+    --md-sys-color-on-primary-fixed-variant: {{colors.on_primary_fixed_variant.light.hex}};
+    --md-sys-color-secondary-fixed: {{colors.secondary_fixed.light.hex}};
+    --md-sys-color-on-secondary-fixed: {{colors.on_secondary_fixed.light.hex}};
+    --md-sys-color-secondary-fixed-dim: {{colors.secondary_fixed_dim.light.hex}};
+    --md-sys-color-on-secondary-fixed-variant: {{colors.on_secondary_fixed_variant.light.hex}};
+    --md-sys-color-tertiary-fixed: {{colors.tertiary_fixed.light.hex}};
+    --md-sys-color-on-tertiary-fixed: {{colors.on_tertiary_fixed.light.hex}};
+    --md-sys-color-tertiary-fixed-dim: {{colors.tertiary_fixed_dim.light.hex}};
+    --md-sys-color-on-tertiary-fixed-variant: {{colors.on_tertiary_fixed_variant.light.hex}};
+    --md-sys-color-surface-dim: {{colors.surface_dim.light.hex}};
+    --md-sys-color-surface-bright: {{colors.surface_bright.light.hex}};
+    --md-sys-color-surface-container-lowest: {{colors.surface_container_lowest.light.hex}};
+    --md-sys-color-surface-container-low: {{colors.surface_container_low.light.hex}};
+    --md-sys-color-surface-container: {{colors.surface_container.light.hex}};
+    --md-sys-color-surface-container-high: {{colors.surface_container_high.light.hex}};
+    --md-sys-color-surface-container-highest: {{colors.surface_container_highest.light.hex}};
+
+    --m3-radius: 12px;
+    --m3-radius-sm: 10px;
+    --m3-elev-0: none;
+    --m3-elev-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
+    --m3-elev-2: 0 2px 6px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
+
+    --tab-height: 34px;
+    --urlbar-height: 38px;
+
+    --state-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+    --state-press: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+
+    --focus-ring: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --md-sys-color-primary: {{colors.primary.dark.hex}};
+    --md-sys-color-surface-tint: {{colors.primary.dark.hex}};
+    --md-sys-color-on-primary: {{colors.on_primary.dark.hex}};
+    --md-sys-color-primary-container: {{colors.primary_container.dark.hex}};
+    --md-sys-color-on-primary-container: {{colors.on_primary_container.dark.hex}};
+    --md-sys-color-secondary: {{colors.secondary.dark.hex}};
+    --md-sys-color-on-secondary: {{colors.on_secondary.dark.hex}};
+    --md-sys-color-secondary-container: {{colors.secondary_container.dark.hex}};
+    --md-sys-color-on-secondary-container: {{colors.on_secondary_container.dark.hex}};
+    --md-sys-color-tertiary: {{colors.tertiary.dark.hex}};
+    --md-sys-color-on-tertiary: {{colors.on_tertiary.dark.hex}};
+    --md-sys-color-tertiary-container: {{colors.tertiary_container.dark.hex}};
+    --md-sys-color-on-tertiary-container: {{colors.on_tertiary_container.dark.hex}};
+    --md-sys-color-error: {{colors.error.dark.hex}};
+    --md-sys-color-on-error: {{colors.on_error.dark.hex}};
+    --md-sys-color-error-container: {{colors.error_container.dark.hex}};
+    --md-sys-color-on-error-container: {{colors.on_error_container.dark.hex}};
+    --md-sys-color-background: {{colors.background.dark.hex}};
+    --md-sys-color-on-background: {{colors.on_background.dark.hex}};
+    --md-sys-color-surface: {{colors.surface.dark.hex}};
+    --md-sys-color-on-surface: {{colors.on_surface.dark.hex}};
+    --md-sys-color-surface-variant: {{colors.surface_variant.dark.hex}};
+    --md-sys-color-on-surface-variant: {{colors.on_surface_variant.dark.hex}};
+    --md-sys-color-outline: {{colors.outline.dark.hex}};
+    --md-sys-color-outline-variant: {{colors.outline_variant.dark.hex}};
+    --md-sys-color-shadow: {{colors.shadow.dark.hex}};
+    --md-sys-color-scrim: {{colors.scrim.dark.hex}};
+    --md-sys-color-inverse-surface: {{colors.inverse_surface.dark.hex}};
+    --md-sys-color-inverse-on-surface: {{colors.inverse_on_surface.dark.hex}};
+    --md-sys-color-inverse-primary: {{colors.inverse_primary.dark.hex}};
+    --md-sys-color-primary-fixed: {{colors.primary_fixed.dark.hex}};
+    --md-sys-color-on-primary-fixed: {{colors.on_primary_fixed.dark.hex}};
+    --md-sys-color-primary-fixed-dim: {{colors.primary_fixed_dim.dark.hex}};
+    --md-sys-color-on-primary-fixed-variant: {{colors.on_primary_fixed_variant.dark.hex}};
+    --md-sys-color-secondary-fixed: {{colors.secondary_fixed.dark.hex}};
+    --md-sys-color-on-secondary-fixed: {{colors.on_secondary_fixed.dark.hex}};
+    --md-sys-color-secondary-fixed-dim: {{colors.secondary_fixed_dim.dark.hex}};
+    --md-sys-color-on-secondary-fixed-variant: {{colors.on_secondary_fixed_variant.dark.hex}};
+    --md-sys-color-tertiary-fixed: {{colors.tertiary_fixed.dark.hex}};
+    --md-sys-color-on-tertiary-fixed: {{colors.on_tertiary_fixed.dark.hex}};
+    --md-sys-color-tertiary-fixed-dim: {{colors.tertiary_fixed_dim.dark.hex}};
+    --md-sys-color-on-tertiary-fixed-variant: {{colors.on_tertiary_fixed_variant.dark.hex}};
+    --md-sys-color-surface-dim: {{colors.surface_dim.dark.hex}};
+    --md-sys-color-surface-bright: {{colors.surface_bright.dark.hex}};
+    --md-sys-color-surface-container-lowest: {{colors.surface_container_lowest.dark.hex}};
+    --md-sys-color-surface-container-low: {{colors.surface_container_low.dark.hex}};
+    --md-sys-color-surface-container: {{colors.surface_container.dark.hex}};
+    --md-sys-color-surface-container-high: {{colors.surface_container_high.dark.hex}};
+    --md-sys-color-surface-container-highest: {{colors.surface_container_highest.dark.hex}};
+
+    --m3-elev-1: 0 1px 2px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.35);
+    --m3-elev-2: 0 4px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
+
+    --state-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
+    --state-press: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+  }
+}
+
+*,
+*::before,
+*::after {
+  font-family: "Inter Variable" !important;
+}

scripts/matugen-worker.sh

@@ -81,6 +81,11 @@ build_once() {
     echo "" >> "$TMP_CFG"
   fi
 
+  if command -v firefox >/dev/null 2>&1; then
+    cat "$SHELL_DIR/matugen/configs/firefox.toml" >> "$TMP_CFG"
+    echo "" >> "$TMP_CFG"
+  fi
+  
   # GTK3 colors based on colloid
   COLLOID_TEMPLATE="$SHELL_DIR/matugen/templates/gtk3-colors.css"