Update theme doc in readme

2025-12-06 05:25:41 -05:00 · 2025-08-07 18:25:57 -04:00
parent 4523528d77
commit faa2fb8a4a
5 changed files with 16895 additions and 95 deletions
--- a/Common/Colors.qml
+++ b/Common/Colors.qml
@@ -9,7 +9,6 @@ import qs.Services
 import qs.Common

 Singleton {
-
    id: root

    readonly property string _homeUrl: StandardPaths.writableLocation(StandardPaths.HomeLocation)
@@ -23,8 +22,7 @@ Singleton {
    property bool qtThemingEnabled: false
    property bool systemThemeGenerationInProgress: false
    property string matugenJson: ""
-    property var matugenColors: ({
-    })
+    property var matugenColors: ({})
    property bool extractionRequested: false
    property int colorUpdateTrigger: 0
    property string lastWallpaperTimestamp: ""
@@ -48,13 +46,13 @@ Singleton {
    property color accentHi: primary
    property color accentLo: secondary

-    signal colorsUpdated()
+    signal colorsUpdated

    function onLightModeChanged() {
        if (matugenColors && Object.keys(matugenColors).length > 0) {
            colorUpdateTrigger++;
            colorsUpdated();
-            
+
            if (typeof Theme !== "undefined" && Theme.isDynamicTheme) {
                generateSystemThemes();
            }
@@ -98,12 +96,12 @@ Singleton {
        id: matugenCheck

        command: ["which", "matugen"]
-        onExited: (code) => {
+        onExited: code => {
            matugenAvailable = (code === 0);
            if (!matugenAvailable) {
                ToastService.wallpaperErrorStatus = "matugen_missing";
                ToastService.showWarning("matugen not found - dynamic theming disabled");
-                return ;
+                return;
            }
            if (extractionRequested) {
                fileChecker.running = true;
@@ -115,7 +113,7 @@ Singleton {
        id: fileChecker

        command: ["test", "-r", wallpaperPath]
-        onExited: (code) => {
+        onExited: code => {
            if (code === 0) {
                matugenProcess.running = true;
            } else {
@@ -138,7 +136,7 @@ Singleton {
                if (!out.length) {
                    ToastService.wallpaperErrorStatus = "error";
                    ToastService.showError("Wallpaper Processing Failed");
-                    return ;
+                    return;
                }
                try {
                    root.matugenJson = out;
@@ -156,7 +154,6 @@ Singleton {
        stderr: StdioCollector {
            id: matugenErr
        }
-
    }

    function generateAppConfigs() {
@@ -166,18 +163,18 @@ Singleton {

        generateNiriConfig();
        generateGhosttyConfig();
-        
+
        if (gtkThemingEnabled && typeof SettingsData !== "undefined" && SettingsData.gtkThemingEnabled) {
-            generateGtkThemes();
-        }
-        if (qtThemingEnabled && typeof SettingsData !== "undefined" && SettingsData.qtThemingEnabled) {
-            generateQtThemes();
+            generateSystemThemes();
+        } else if (qtThemingEnabled && typeof SettingsData !== "undefined" && SettingsData.qtThemingEnabled) {
+            generateSystemThemes();
        }
    }

    function generateNiriConfig() {
        var dark = matugenColors.colors.dark;
-        if (!dark) return;
+        if (!dark)
+            return;

        var bg = dark.background || "#1a1c1e";
        var primary = dark.primary || "#42a5f5";
@@ -201,7 +198,8 @@ Singleton {
    function generateGhosttyConfig() {
        var dark = matugenColors.colors.dark;
        var light = matugenColors.colors.light;
-        if (!dark || !light) return;
+        if (!dark || !light)
+            return;

        var bg = dark.background || "#1a1c1e";
        var fg = dark.on_background || "#e3e8ef";
@@ -245,116 +243,108 @@ palette = 15=${fg_b}`;

        var ghosttyConfigDir = configDir + "/ghostty";
        var ghosttyConfigPath = ghosttyConfigDir + "/config-dankcolors";
-        
+
        Quickshell.execDetached(["bash", "-c", `mkdir -p '${ghosttyConfigDir}' && echo '${content}' > '${ghosttyConfigPath}'`]);
    }
-    
+
    function checkGtkThemingAvailability() {
        gtkAvailabilityChecker.running = true;
    }
-    
+
    function checkQtThemingAvailability() {
        qtAvailabilityChecker.running = true;
    }
-    
+
    function generateSystemThemes() {
        if (systemThemeGenerationInProgress) {
            return;
        }
-        
+
        if (!matugenAvailable) {
            return;
        }
-        
+
        if (!wallpaperPath || wallpaperPath === "") {
            return;
        }
-        
+
        const isLight = (typeof SessionData !== "undefined" && SessionData.isLightMode) ? "true" : "false";
        const iconTheme = (typeof SettingsData !== "undefined" && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default";
        const gtkTheming = (typeof SettingsData !== "undefined" && SettingsData.gtkThemingEnabled) ? "true" : "false";
        const qtTheming = (typeof SettingsData !== "undefined" && SettingsData.qtThemingEnabled) ? "true" : "false";
-        
+
        systemThemeGenerationInProgress = true;
        systemThemeGenerator.command = [shellDir + "/generate-themes.sh", wallpaperPath, shellDir, configDir, "generate", isLight, iconTheme, gtkTheming, qtTheming];
        systemThemeGenerator.running = true;
    }
-    
-    function generateGtkThemes() {
-        generateSystemThemes();
-    }
-    
-    function generateQtThemes() {
-        generateSystemThemes();
-    }
-    
+
    function restoreSystemThemes() {
        const shellDir = root.shellDir;
        if (!shellDir) {
            return;
        }
-        
+
        const isLight = (typeof SessionData !== "undefined" && SessionData.isLightMode) ? "true" : "false";
        const iconTheme = (typeof SettingsData !== "undefined" && SettingsData.iconTheme) ? SettingsData.iconTheme : "System Default";
        const gtkTheming = (typeof SettingsData !== "undefined" && SettingsData.gtkThemingEnabled) ? "true" : "false";
        const qtTheming = (typeof SettingsData !== "undefined" && SettingsData.qtThemingEnabled) ? "true" : "false";
-        
+
        systemThemeRestoreProcess.command = [shellDir + "/generate-themes.sh", "", shellDir, configDir, "restore", isLight, iconTheme, gtkTheming, qtTheming];
        systemThemeRestoreProcess.running = true;
    }
-    
+
    Process {
        id: gtkAvailabilityChecker
        command: ["bash", "-c", "command -v gsettings >/dev/null && [ -d " + configDir + "/gtk-3.0 -o -d " + configDir + "/gtk-4.0 ]"]
        running: false
-        onExited: (exitCode) => {
+        onExited: exitCode => {
            gtkThemingEnabled = (exitCode === 0);
        }
    }
-    
+
    Process {
        id: qtAvailabilityChecker
        command: ["bash", "-c", "command -v qt5ct >/dev/null || command -v qt6ct >/dev/null"]
        running: false
-        onExited: (exitCode) => {
+        onExited: exitCode => {
            qtThemingEnabled = (exitCode === 0);
        }
    }
-    
+
    Process {
        id: systemThemeGenerator
        running: false
-        
+
        stdout: StdioCollector {
            id: systemThemeStdout
        }
-        
+
        stderr: StdioCollector {
            id: systemThemeStderr
        }
-        
-        onExited: (exitCode) => {
+
+        onExited: exitCode => {
            systemThemeGenerationInProgress = false;
-            
+
            if (exitCode !== 0) {
                ToastService.showError("Failed to generate system themes: " + systemThemeStderr.text);
            }
        }
    }
-    
+
    Process {
        id: systemThemeRestoreProcess
        running: false
-        
+
        stdout: StdioCollector {
            id: restoreThemeStdout
        }
-        
+
        stderr: StdioCollector {
            id: restoreThemeStderr
        }
-        
-        onExited: (exitCode) => {
+
+        onExited: exitCode => {
            if (exitCode === 0) {
                ToastService.showInfo("System themes restored to default");
            } else {
@@ -362,6 +352,4 @@ palette = 15=${fg_b}`;
            }
        }
    }
-    
-
 }
--- a/README.md
+++ b/README.md
@@ -23,24 +23,31 @@ A modern Wayland desktop shell built with [Quickshell](https://quickshell.org/)
 <div align="center">

 ### Application Launcher
+
 <img src="https://github.com/user-attachments/assets/2da00ea1-8921-4473-a2a9-44a44535a822" width="450" alt="Spotlight Launcher" />

 ### System Monitor
+
 <img src="https://github.com/user-attachments/assets/b3c817ec-734d-4974-929f-2d11a1065349" width="600" alt="System Monitor" />

 ### Widget Customization
+
 <img src="https://github.com/user-attachments/assets/903f7c60-146f-4fb3-a75d-a4823828f298" width="500" alt="Widget Customization" />

 ### Lock Screen
+
 <img src="https://github.com/user-attachments/assets/3fa07de2-c1b0-4e57-8f25-3830ac6baf4f" width="600" alt="Lock Screen" />

 ### Dynamic Theming
+
 <img src="https://github.com/user-attachments/assets/1994e616-f9d9-424a-9f60-6f06708bf12e" width="700" alt="Auto Theme" />

 ### Notification Center
+
 <img src="https://github.com/user-attachments/assets/07cbde9a-0242-4989-9f97-5765c6458c85" width="350" alt="Notification Center" />

 ### Dock
+
 <img src="https://github.com/user-attachments/assets/e6999daf-f7bf-4329-98fa-0ce4f0e7219c" width="400" alt="Dock" />

 </div>
@@ -50,6 +57,7 @@ A modern Wayland desktop shell built with [Quickshell](https://quickshell.org/)
 ## What's Inside

 **Core Widgets:**
+
 - **TopBar**: fully customizable bar where widgets can be added, removed, and re-arranged.
  - **App Launcher** with fuzzy search, categories, and auto-sorting by most used apps.
  - **Workspace Switcher** Dynamically resizing niri workspace switcher.
@@ -71,6 +79,7 @@ A modern Wayland desktop shell built with [Quickshell](https://quickshell.org/)
 - **Lock Screen** Using quickshell's WlSessionLock

 **Features:**
+
 - Dynamic wallpaper-based theming with matugen integration
 - Numerous IPCs to trigger actions and open various modals.
 - Calendar integration with [khal](https://github.com/pimutils/khal)
@@ -83,14 +92,15 @@ A modern Wayland desktop shell built with [Quickshell](https://quickshell.org/)

 ### Quick Start

-*If you do not already have niri, see [#]
+\*If you do not already have niri, see [#]

 **Dependencies:**
+
 ```bash
 # Arch Linux
 paru -S quickshell-git ttf-material-symbols-variable-git inter-font ttf-fira-code

-# Fedora  
+# Fedora
 sudo dnf copr enable errornointernet/quickshell && sudo dnf install quickshell-git rsms-inter-fonts fira-code-fonts
 # Install icon fonts manually
 mkdir -p ~/.local/share/fonts
@@ -99,6 +109,7 @@ fc-cache -f
 ```

 **Get the shell:**
+
 ```bash
 # Arch linux available via AUR
 paru -S dankmaterialshell-git
@@ -114,6 +125,7 @@ qs -c DankMaterialShell
 <details><summary>Font Installation</summary>

 **Material Symbols (Required):**
+
 ```bash
 # Manual installation
 mkdir -p ~/.local/share/fonts
@@ -125,6 +137,7 @@ paru -S ttf-material-symbols-variable-git
 ```

 **Typography (Recommended):**
+
 ```bash
 # Inter Variable Font
 curl -L "https://github.com/rsms/inter/releases/download/v4.0/Inter-4.0.zip" -o /tmp/Inter.zip
@@ -142,23 +155,24 @@ rm /tmp/FiraCode.zip && fc-cache -f
 <details><summary>Optional Features</summary>

 **Enhanced Functionality:**
+
 ```bash
 # Arch Linux
-pacman -S cava wl-clipboard cliphist ddcutil brightnessctl qt5ct qt6ct
+pacman -S cava wl-clipboard cliphist ddcutil brightnessctl
 paru -S matugen

 # Fedora
-sudo dnf install cava wl-clipboard ddcutil brightnessctl qt5ct qt6ct
+sudo dnf install cava wl-clipboard ddcutil brightnessctl
 sudo dnf copr enable wef/cliphist && sudo dnf install cliphist
 sudo dnf copr enable heus-sueh/packages && sudo dnf install matugen
 ```

 **What you get:**
+
 - `matugen`: Wallpaper-based dynamic theming
- `ddcutil`: External monitor brightness control  
+- `ddcutil`: External monitor brightness control
 - `brightnessctl`: Laptop display brightness
 - `wl-clipboard`: Required for copying various elements to clipboard.
- `qt5ct/qt6ct`: Qt application theming
 - `cava`: Audio visualizer
 - `cliphist`: Clipboard history

@@ -219,7 +233,7 @@ binds {
   }
   XF86MonBrightnessDown allow-when-locked=true {
      spawn "qs" "-c" "DankMaterialShell" "ipc" "call" "brightness" "decrement" "5";
-   }  
+   }
 }
 ```

@@ -232,7 +246,7 @@ Control everything from the command line, or via keybinds:
 qs -c DankMaterialShell ipc call audio setvolume 50
 qs -c DankMaterialShell ipc call audio mute

-# Launch applications  
+# Launch applications
 qs -c DankMaterialShell ipc call spotlight toggle
 qs -c DankMaterialShell ipc call processlist toggle

@@ -250,54 +264,98 @@ qs -c DankMaterialShell ipc call mpris next

 ### System App Integration

+There's two toggles in the appearance section of settings, for GTK and QT apps.
+
+These settings will override some local GTK and QT configuration files, you can still integrate auto-theming if you do not wish DankShell to mess with your QTCT/GTK files.
+
+No matter what when matugen is enabled the files will be created on wallpaper changes:
+
+- ~/.config/gtk-3.0/dank-colors.css
+- ~/.config/gtk-4.0/dank-colors.css
+- ~/.config/qt6ct/colors/matugen.conf
+- ~/.config/qt5ct/colors/matugen.conf
+
+If you do not like our theme path, you can integrate this with other GTK themes, matugen themes, etc.
+
 **GTK Apps:**
-Install [Colloid](https://github.com/vinceliuice/Colloid-gtk-theme) or similar Material theme:
+
+1. Install [Colloid](https://github.com/vinceliuice/Colloid-gtk-theme)
+
+Colloid is a hard requirement for the auto-theming because of how it integrates with colloid css files, however you can integrate auto-theming with other themes, you just have to do it manually (so leave the toggle OFF in settings)
+
+It will still create `~/.config/gtk-3.0/4.0/dank-colors.css` on theme updates, these you can import into other compatible GTK themes.
+
 ```bash
+# Some default install settings for colloid
 ./install.sh -s standard -l --tweaks normal
 ```

-Configure in `~/.config/gtk-3.0/settings.ini`:
+Configure in `~/.config/gtk-3.0/settings.ini` and `~/.config/gtk-4.0/settings.ini`:
+
 ```ini
 [Settings]
 gtk-theme-name=Colloid
 ```

 **Qt Apps:**
-```bash
-# Install Breeze
-pacman -S breeze breeze5  # Arch
-sudo dnf install breeze  # Fedora

-# Configure qt5ct/qt6ct
-echo 'style=Breeze' >> ~/.config/qt5ct/qt5ct.conf
+You have **two** paths for QT theming, first path is to use **gtk3**. To do that, add the following to your niri config.
+
+```kdl
+environment {
+  // Add to existing environment block
+  QT_QPA_PLATFORMTHEME "gtk3"
+  QT_QPA_PLATFORMTHEME_QT6 "gtk3"
+}
 ```

-**Dynamic Theming:**
-Enable wallpaper-based theming in **Settings → Appearance → System App Theming** after installing matugen.
+**Done** - if you're not happy with this and wish to use Breeze or another QT theme then continue on.
+
+1. Install qt6ct and qt5ct
+
+```bash
+# Arch
+pacman -S qt5ct qt6ct
+# Fedora
+dnf install qt5ct qt6ct
+```
+
+2. Configure Environment in niri
+
+```kdl
+  // Add to existing environment block
+  QT_QPA_PLATFORMTHEME "qt5ct"
+  QT_QPA_PLATFORMTHEME_QT6 "qt6ct"
+```
+
+You'll have to restart your session for themes to take effect.

 ### Terminal Integration

 **Ghostty users** can add automatic color theming:
+
 ```bash
 echo "config-file = ./config-dankcolors" >> ~/.config/ghostty/config
 ```

 ## Calendar Setup

-Sync your Google Calendar for dashboard integration:
+Sync your caldev compatible calendar (Google, Office365, etc.) for dashboard integration:

 <details><summary>Configuration Steps</summary>

 **Install dependencies:**
+
 ```bash
 # Arch
 pacman -S vdirsyncer khal python-aiohttp-oauthlib

-# Fedora  
+# Fedora
 sudo dnf install python3-vdirsyncer khal python3-aiohttp-oauthlib
 ```

 **Configure vdirsyncer** (`~/.vdirsyncer/config`):
+
 ```ini
 [general]
 status_path = "~/.calendars/status"
@@ -322,6 +380,7 @@ fileext = ".ics"
 ```

 **Setup sync:**
+
 ```bash
 vdirsyncer sync
 khal configure
@@ -338,8 +397,9 @@ crontab -e
 All settings are configurable in `~/.config/DankMaterialShell/settings.json`, or more intuitively the built-in settings modal.

 **Key configuration areas:**
+
 - Widget positioning and behavior
- Theme and color preferences  
+- Theme and color preferences
 - Time format, weather units and location
 - Light/Dark modes
 - Wallpaper and Profile picture
@@ -348,12 +408,14 @@ All settings are configurable in `~/.config/DankMaterialShell/settings.json`, or
 ## Troubleshooting

 **Common issues:**
+
 - **Missing icons:** Verify Material Symbols font installation with `fc-list | grep Material`
 - **No dynamic theming:** Install matugen and enable in settings
 - **Qt apps not themed:** Configure qt5ct/qt6ct and set QT_QPA_PLATFORMTHEME
 - **Calendar not syncing:** Check vdirsyncer credentials and network connectivity

 **Getting help:**
+
 - Check the [issues](https://github.com/bbedward/DankMaterialShell/issues) for known problems
 - Share logs from `qs -c DankMaterialShell` for debugging
 - Join the niri community for compositor-specific questions
@@ -363,6 +425,7 @@ All settings are configurable in `~/.config/DankMaterialShell/settings.json`, or
 DankMaterialShell welcomes contributions! Whether it's bug fixes, new widgets, theme improvements, or documentation updates - all help is appreciated.

 **Areas that need attention:**
+
 - More widget options and customization
 - Additional compositor compatibility
 - Performance optimizations
@@ -373,4 +436,4 @@ DankMaterialShell welcomes contributions! Whether it's bug fixes, new widgets, t
 - [quickshell](https://quickshell.org/) the core of what makes a shell like this possible.
 - [niri](https://github.com/YaLTeR/niri) for the awesome scrolling compositor.
 - [soramanew](https://github.com/soramanew) who built [caelestia](https://github.com/caelestia-dots/shell) which served as inspiration and guidance for many dank widgets.
- [end-4](https://github.com/end-4) for [dots-hyprland](https://github.com/end-4/dots-hyprland) which also served as inspiration and guidance for many dank widgets.
+- [end-4](https://github.com/end-4) for [dots-hyprland](https://github.com/end-4/dots-hyprland) which also served as inspiration and guidance for many dank widgets.
--- a/generate-themes.sh
+++ b/generate-themes.sh
@@ -56,36 +56,35 @@ update_theme_settings() {

 update_gtk_css() {
    local config_dir="$1"
-    local import_line="@import url(\"$config_dir/gtk-4.0/dank-colors.css\");"
+    local is_light="$2"
+    local shell_dir="$3"
    
-    echo "Updating GTK CSS imports..."
+    echo "Updating GTK CSS..."
    
-    # Update GTK-4.0
+    # GTK-3.0: Copy the appropriate template file
+    local gtk3_css="$config_dir/gtk-3.0/gtk.css"
+    if [ "$is_light" = "true" ]; then
+        echo "Copying light GTK-3.0 template..."
+        cp "$shell_dir/templates/gtk3-colloid-light.css" "$gtk3_css"
+    else
+        echo "Copying dark GTK-3.0 template..."
+        cp "$shell_dir/templates/gtk3-colloid-dark.css" "$gtk3_css"
+    fi
+    echo "Updated GTK-3.0 CSS"
+    
+    # GTK-4.0: Use simplified import
+    local gtk4_import="@import url(\"dank-colors.css\");"
    local gtk4_css="$config_dir/gtk-4.0/gtk.css"
    if [ -f "$gtk4_css" ]; then
        # Remove existing import if present
        sed -i '/^@import url.*dank-colors\.css.*);$/d' "$gtk4_css"
        # Add import at the top
-        sed -i "1i\\$import_line" "$gtk4_css"
+        sed -i "1i\\$gtk4_import" "$gtk4_css"
    else
        # Create new gtk.css with import
-        echo "$import_line" > "$gtk4_css"
+        echo "$gtk4_import" > "$gtk4_css"
    fi
    echo "Updated GTK-4.0 CSS import"
-    
-    # Update GTK-3.0 with its own path
-    local gtk3_import="@import url(\"$config_dir/gtk-3.0/dank-colors.css\");"
-    local gtk3_css="$config_dir/gtk-3.0/gtk.css"
-    if [ -f "$gtk3_css" ]; then
-        # Remove existing import if present
-        sed -i '/^@import url.*dank-colors\.css.*);$/d' "$gtk3_css"
-        # Add import at the top
-        sed -i "1i\\$gtk3_import" "$gtk3_css"
-    else
-        # Create new gtk.css with import
-        echo "$gtk3_import" > "$gtk3_css"
-    fi
-    echo "Updated GTK-3.0 CSS import"
 }

 update_qt_config() {
@@ -240,7 +239,7 @@ update_theme_settings "$color_scheme" "$ICON_THEME"

 # Update GTK CSS imports if GTK theming is enabled
 if [ "$GTK_THEMING" = "true" ]; then
-    update_gtk_css "$CONFIG_DIR"
+    update_gtk_css "$CONFIG_DIR" "$IS_LIGHT" "$SHELL_DIR"
    echo "GTK theming updated"
 else
    echo "GTK theming disabled - skipping GTK CSS updates"
--- a/templates/gtk3-colloid-dark.css
+++ b/templates/gtk3-colloid-dark.css
--- a/templates/gtk3-colloid-light.css
+++ b/templates/gtk3-colloid-light.css