Adding Zen Browser matugen template (#1181)

* Adding Zen Browser matugen template

* Fixing indentation for matugen.go edits

* Trying to fix linting again..

* Tweaking contrasting surface colors in css, renamed file to match how firefox userchrome is named, also changed output directory to DMS config directory (like firefox)

* Modifing Zen userChrome again: removing unused css stuff, tweaking colors to better align with how pywalfox handles backgrounds/toolbars

* Last few tweaks on CSS - changing url bar highlight color, changing contrast on selected urls in dropdown

* matugen.go: fix check command for zen browser

* search_index: add zen browser setting

quickshell/Common/SettingsData.qml

@@ -288,6 +288,7 @@ Singleton {
     property bool matugenTemplateQt6ct: true
     property bool matugenTemplateFirefox: true
     property bool matugenTemplatePywalfox: true
+    property bool matugenTemplateZenBrowser: true
     property bool matugenTemplateVesktop: true
     property bool matugenTemplateEquibop: true
     property bool matugenTemplateGhostty: true

quickshell/Common/Theme.qml

@@ -876,7 +876,7 @@ Singleton {
         if (typeof SettingsData !== "undefined") {
             const skipTemplates = [];
             if (!SettingsData.runDmsMatugenTemplates) {
-                skipTemplates.push("gtk", "neovim", "niri", "qt5ct", "qt6ct", "firefox", "pywalfox", "vesktop", "equibop", "ghostty", "kitty", "foot", "alacritty", "wezterm", "dgop", "kcolorscheme", "vscode");
+                skipTemplates.push("gtk", "neovim", "niri", "qt5ct", "qt6ct", "firefox", "pywalfox", "zenbrowser", "vesktop", "equibop", "ghostty", "kitty", "foot", "alacritty", "wezterm", "dgop", "kcolorscheme", "vscode");
             } else {
                 if (!SettingsData.matugenTemplateGtk)
                     skipTemplates.push("gtk");
@@ -890,6 +890,8 @@ Singleton {
                     skipTemplates.push("firefox");
                 if (!SettingsData.matugenTemplatePywalfox)
                     skipTemplates.push("pywalfox");
+                if (!SettingsData.matugenTemplateZenBrowser)
+                    skipTemplates.push("zenbrowser");
                 if (!SettingsData.matugenTemplateVesktop)
                     skipTemplates.push("vesktop");
                 if (!SettingsData.matugenTemplateEquibop)

quickshell/Common/settings/SettingsSpec.js

@@ -187,6 +187,7 @@ var SPEC = {
     matugenTemplateQt6ct: { def: true },
     matugenTemplateFirefox: { def: true },
     matugenTemplatePywalfox: { def: true },
+    matugenTemplateZenBrowser: { def: true },
     matugenTemplateVesktop: { def: true },
     matugenTemplateEquibop: { def: true },
     matugenTemplateGhostty: { def: true },

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -1127,6 +1127,17 @@ Item {
                     onToggled: checked => SettingsData.set("matugenTemplatePywalfox", checked)
                 }
 
+                SettingsToggleRow {
+                    tab: "theme"
+                    tags: ["matugen", "zenbrowser", "template"]
+                    settingKey: "matugenTemplateZenBrowser"
+                    text: "zenbrowser"
+                    description: ""
+                    visible: SettingsData.runDmsMatugenTemplates
+                    checked: SettingsData.matugenTemplateZenBrowser
+                    onToggled: checked => SettingsData.set("matugenTemplateZenBrowser", checked)
+                }
+
                 SettingsToggleRow {
                     tab: "theme"
                     tags: ["matugen", "vesktop", "discord", "template"]

quickshell/matugen/configs/zenbrowser.toml

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

quickshell/matugen/templates/zen-userchrome.css

@@ -0,0 +1,94 @@
+/* DMS Matugen Zen Browser Theme */
+:root {
+  --zen-primary-color: {{colors.primary_container.default.hex}} !important;
+  --toolbarbutton-icon-fill: {{colors.primary.default.hex}} !important;
+  --toolbar-field-color: {{colors.on_background.default.hex}} !important;
+  --tab-selected-textcolor: {{colors.primary.default.hex}} !important;
+  --toolbar-color: {{colors.on_background.default.hex}} !important;
+  --arrowpanel-color: {{colors.on_surface.default.hex}} !important;
+  --arrowpanel-background: {{colors.surface_container.default.hex}} !important;
+  --sidebar-text-color: {{colors.on_background.default.hex}} !important;
+  --zen-main-browser-background: {{colors.background.default.hex}} !important;
+}
+
+.sidebar-placesTree {
+  background-color: {{colors.surface_container.default.hex}} !important;
+}
+
+#zen-workspaces-button {
+  background-color: {{colors.on_surface_variant.default.hex}} !important;
+}
+
+#TabsToolbar {
+  background-color: {{colors.background.default.hex}} !important;
+}
+
+.urlbar-background {
+  background-color: {{colors.surface_container.default.hex}} !important;
+}
+
+.urlbar-input::selection {
+  color: {{colors.on_primary.default.hex}} !important;
+  background-color: {{colors.primary.default.hex}} !important;
+}
+
+.urlbarView-url {
+  color: {{colors.on_surface_variant.default.hex}} !important;
+}
+
+toolbar .toolbarbutton-1 {
+  &:not([disabled]) {
+    &:is([open], [checked])
+      > :is(
+        .toolbarbutton-icon,
+        .toolbarbutton-text,
+        .toolbarbutton-badge-stack
+      ) {
+      fill: {{colors.primary.default.hex}}
+    }
+  }
+}
+
+.identity-color-blue {
+  --identity-tab-color: {{dank16.color12.default.hex}} !important;
+  --identity-icon-color: {{dank16.color12.default.hex}} !important;
+}
+
+.identity-color-turquoise {
+  --identity-tab-color: {{dank16.color6.default.hex}} !important;
+  --identity-icon-color: {{dank16.color6.default.hex}} !important;
+}
+
+.identity-color-green {
+  --identity-tab-color: {{dank16.color10.default.hex}} !important;
+  --identity-icon-color: {{dank16.color10.default.hex}} !important;
+}
+
+.identity-color-yellow {
+  --identity-tab-color: {{dank16.color11.default.hex}} !important;
+  --identity-icon-color: {{dank16.color11.default.hex}} !important;
+}
+
+.identity-color-orange {
+  --identity-tab-color: {{dank16.color3.default.hex}} !important;
+  --identity-icon-color: {{dank16.color3.default.hex}} !important;
+}
+
+.identity-color-red {
+  --identity-tab-color: {{dank16.color9.default.hex}} !important;
+  --identity-icon-color: {{dank16.color9.default.hex}} !important;
+}
+
+.identity-color-pink {
+  --identity-tab-color: {{dank16.color13.default.hex}} !important;
+  --identity-icon-color: {{dank16.color13.default.hex}} !important;
+}
+
+.identity-color-purple {
+  --identity-tab-color: {{dank16.color5.default.hex}} !important;
+  --identity-icon-color: {{dank16.color5.default.hex}} !important;
+}
+
+#zen-appcontent-navbar-container {
+  background-color: {{colors.background.default.hex}} !important;
+}

quickshell/translations/settings_search_index.json

@@ -1565,6 +1565,24 @@
       "theme"
     ]
   },
+  {
+    "section": "matugenTemplateZenBrowser",
+    "label": "Zen Browser",
+    "tabIndex": 10,
+    "category": "Theme & Colors",
+    "keywords": [
+      "appearance",
+      "colors",
+      "zen",
+      "zenbrowser",
+      "look",
+      "matugen",
+      "scheme",
+      "style",
+      "template",
+      "theme"
+    ]
+  },
   {
     "section": "matugenTemplateGtk",
     "label": "GTK",