Update theme doc in readme

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();
+            generateSystemThemes();
-        }
+        } else if (qtThemingEnabled && typeof SettingsData !== "undefined" && SettingsData.qtThemingEnabled) {
-        if (qtThemingEnabled && typeof SettingsData !== "undefined" && SettingsData.qtThemingEnabled) {
+            generateSystemThemes();
-            generateQtThemes();
         }
     }
 
     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}`;
             }
         }
     }
-    
-
 }

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
+You have **two** paths for QT theming, first path is to use **gtk3**. To do that, add the following to your niri config.
-echo 'style=Breeze' >> ~/.config/qt5ct/qt5ct.conf
+
+```kdl
+environment {
+  // Add to existing environment block
+  QT_QPA_PLATFORMTHEME "gtk3"
+  QT_QPA_PLATFORMTHEME_QT6 "gtk3"
+}
 ```
 
-**Dynamic Theming:**
+**Done** - if you're not happy with this and wish to use Breeze or another QT theme then continue on.
-Enable wallpaper-based theming in **Settings → Appearance → System App Theming** after installing matugen.
+
+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.

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"