Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-06 05:25:41 -05:00
Code Packages Releases Activity

firefox theme guidance

Browse Source
This commit is contained in:
bbedward
2025-09-15 13:27:22 -04:00
parent 903ef0cc72
commit afb0435b5c
4 changed files with 187 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@@ -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.

3
matugen/configs/firefox.toml Normal file
View File

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

147
matugen/templates/firefox-userchrome.css Normal file
View File

@@ -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;
}

5
scripts/matugen-worker.sh
View File

@@ -80,6 +80,11 @@ build_once() {
cat "$SHELL_DIR/matugen/configs/qt6ct.toml" >> "$TMP_CFG"
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"