restructured extra directory

extra/README.md

@@ -1,308 +1,52 @@
 # Extras
 
-This directory contains additional palettes and pre-configured templates for various applications.
+Pre-configured palettes and templates for clrsync.
-
-## Navigation
-
-- [Palettes](#palettes)
-  - [Cursed](#cursed)
-  - [Cursed Light](#cursed-light)
-  - [Nord](#nord)
-- [Pre-configured Templates](#pre-configured-templates)
-  - [Terminal Emulators](#terminal-emulators)
-    - [Kitty](#kitty)
-    - [Alacritty](#alacritty)
-    - [Ghostty](#ghostty)
-  - [Text Editors](#text-editors)
-    - [Neovim](#neovim)
-    - [Visual Studio Code](#visual-studio-code)
-  - [Browsers](#browsers)
-    - [Firefox](#firefox)
-  - [Applications](#applications)
-    - [Telegram](#telegram)
-  - [Desktop Themes](#desktop-themes)
-    - [GTK](#gtk)
-    - [Qt Applications](#qt-applications)
-  - [Window Managers](#window-managers)
-    - [Hyprland](#hyprland)
 
 ## Palettes
 
-### Cursed
+| Palette | Preview |
+|---------|---------|
+| [Nord](palettes/nord) | ![nord](palettes/nord/nord.png) |
+| [Cursed](palettes/cursed) | ![cursed](palettes/cursed/cursed.png) |
+| [Cursed Light](palettes/cursed-light) | ![cursed-light](palettes/cursed-light/cursed-light.png) |
 
-A dark color scheme inspired by the `cursed` theme by [pyratebeard](https://pyratebeard.net).
+## Templates
 
-<details>
+### Terminals
-<summary>Preview</summary>
+- [Alacritty](templates/alacritty)
-
+- [Ghostty](templates/ghostty)
-![cursed](img/cursed.png)
+- [Kitty](templates/kitty)
-
-</details>
-
-### Cursed Light
-
-A light variant of the `cursed` color scheme.
-
-<details>
-<summary>Preview</summary>
-
-![cursed-light](img/cursed-light.png)
-
-</details>
-
-### Nord
-
-A color scheme based on the `Nord` palette.
-
-<details>
-<summary>Preview</summary>
-
-![nord](img/nord.png)
-
-</details>
-
-## Pre-configured Templates
-
-### Terminal Emulators
-
-#### Kitty
-
-1. Download the [template file](templates/kitty.conf)
-
-2. Configure the template in `~/.config/clrsync/config.toml`:
-
-```toml
-[templates.kitty]
-enabled = true
-input_path = '~/.config/clrsync/templates/kitty.conf'
-output_path = '~/.config/kitty/clrsync.conf'
-reload_cmd = 'pkill -SIGUSR1 kitty'
-```
-
-3. Import the generated color scheme in `~/.config/kitty/kitty.conf`:
-
-```conf
-include clrsync.conf
-```
-
-#### Alacritty
-
-1. Download the [template file](templates/alacritty.toml)
-
-2. Configure the template in `~/.config/clrsync/config.toml`:
-
-```toml
-[templates.alacritty]
-enabled = true
-input_path = '~/.config/clrsync/templates/alacritty.toml'
-output_path = '~/.config/alacritty/clrsync.toml'
-reload_cmd = ''
-```
-
-3. Import the generated color scheme in `~/.config/alacritty/alacritty.toml`:
-
-```toml
-[general]
-import = ["clrsync.toml"]
-```
-
-#### Ghostty
-
-1. Download the [template file](templates/ghostty)
-
-2. Configure the template in `~/.config/clrsync/config.toml`:
-
-```toml
-[templates.ghostty]
-enabled = true
-input_path = '~/.config/clrsync/templates/ghostty'
-output_path = '~/.config/ghostty/themes/clrsync'
-reload_cmd = 'pkill -SIGUSR2 ghostty'
-```
-
-3. Set the generated color scheme in `~/.config/ghostty/config`:
-
-```conf
-theme = "clrsync"
-```
 
 ### Text Editors
-
+- [Neovim](templates/neovim)
-#### Neovim
+- [VS Code](templates/vscode)
-
-1. Download the [template file](templates/nvim.lua)
-
-2. Configure the template in `~/.config/clrsync/config.toml`:
-
-```toml
-[templates.nvim]
-enabled = true
-input_path = '~/.config/clrsync/templates/nvim.lua'
-output_path = '~/.config/nvim/colors/clrsync.lua'
-reload_cmd = ''
-```
-
-3. Set the colorscheme in your Neovim config:
-
-```lua
-vim.cmd.colorscheme 'clrsync'
-```
-
-#### Visual Studio Code
-
-1. Install the [clrsync VS Code theme](https://marketplace.visualstudio.com/items?itemName=obsqrbtz.clrsync)
-
-2. Download the [template file](templates/code.json)
-
-3. Configure the template in `~/.config/clrsync/config.toml`:
-
-```toml
-[templates.vscode]
-enabled = true
-input_path = '~/.config/clrsync/templates/code.json'
-output_path = '~/.vscode/extensions/obsqrbtz.clrsync-1.0.2/themes/clrsync-color-theme.json'
-reload_cmd = ''
-```
-
-4. Set the `clrsync` color scheme in VS Code
 
 ### Browsers
+- [Firefox](templates/firefox)
 
-#### Firefox
+### Desktop
-
+- [GTK](templates/gtk)
-1. Go to `about:config` and set `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
+- [Qt](templates/qt)
-
-2. Go to `about:support` and find your profile directory
-
-3. Create a `chrome` directory in your profile
-
-4. Download the [template file](templates/userChrome.css)
-
-5. Configure clrsync to output to `<profile>/chrome/userChrome.css`:
-
-```toml
-[templates.firefox]
-enabled = true
-input_path = '~/.config/clrsync/templates/userChrome.css'
-output_path = '<profile directory>/chrome/userChrome.css'
-reload_cmd = ''
-```
-
-### Applications
-
-#### Telegram
-
-1. Download the [template file](templates/telegram.tdesktop-theme)
-
-2. Configure the template in `~/.config/clrsync/config.toml`:
-
-```toml
-[templates.telegram]
-enabled = true
-input_path = '~/.config/clrsync/templates/telegram.tdesktop-theme'
-output_path = '~/clrsync.tdesktop-theme'
-reload_cmd = ''
-```
-
-3. Apply the palette with clrsync and send the generated `clrsync.tdesktop-theme` file to yourself in Telegram
-
-4. Click on the theme file in the Telegram dialog to apply it
-
-### Desktop Themes
-
-#### GTK
-
-1. Download the [template file](templates/gtk.css)
-
-2. Configure the template in `~/.config/clrsync/config.toml`:
-
-```toml
-[templates.gtk3]
-enabled = true
-input_path = '~/.config/clrsync/templates/gtk.css'
-output_path = '~/.config/gtk-3.0/colors.css'
-reload_cmd = ''
-
-[templates.gtk4]
-enabled = true
-input_path = '~/.config/clrsync/templates/gtk.css'
-output_path = '~/.config/gtk-4.0/colors.css'
-reload_cmd = ''
-```
-
-3. Import the color scheme at the top of `~/.config/gtk-3.0/gtk.css`, `~/.config/gtk-4.0/gtk.css`, and `~/.config/gtk-4.0/gtk-dark.css`:
-
-```css
-@import 'colors.css';
-```
-
-#### Qt Applications
-
-1. Download the templates:
-   - Kvantum: [kvantum.kvconfig](templates/kvantum/kvantum.kvconfig) and [kvantum.svg](templates/kvantum/kvantum.svg)
-   - Qt5ct/Qt6ct: [qtct.conf](templates/qtct.conf)
-
-2. Configure the templates in `~/.config/clrsync/config.toml`:
-
-```toml
-[templates.kvantum]
-enabled = true
-input_path = '~/.config/clrsync/templates/kvantum/kvantum.kvconfig'
-output_path = '~/.config/Kvantum/clrsync/clrsync.kvconfig'
-reload_cmd = ''
-
-[templates.kvantum-svg]
-enabled = true
-input_path = '~/.config/clrsync/templates/kvantum/kvantum.svg'
-output_path = '~/.config/Kvantum/clrsync/clrsync.svg'
-reload_cmd = ''
-
-[templates.qt5ct]
-enabled = true
-input_path = '~/.config/clrsync/templates/qtct.conf'
-output_path = '~/.config/qt5ct/colors/clrsync.conf'
-reload_cmd = ''
-
-[templates.qt6ct]
-enabled = true
-input_path = '~/.config/clrsync/templates/qtct.conf'
-output_path = '~/.config/qt6ct/colors/clrsync.conf'
-reload_cmd = ''
-```
-
-3. Set the theme in `~/.config/Kvantum/kvantum.kvconfig`:
-
-```conf
-[General]
-theme=clrsync
-```
-
-4. Set the theme in `~/.config/qt5ct/qt5ct.conf` and `~/.config/qt6ct/qt6ct.conf`:
-
-```conf
-[Appearance]
-color_scheme_path=$HOME/.config/qt5ct/colors/clrsync.conf
-custom_palette=true
-```
 
 ### Window Managers
+- [Hyprland](templates/hyprland)
 
-#### Hyprland
+### Apps
+- [Telegram](templates/telegram)
 
-1. Download the [template file](templates/hyprland.conf)
+## Contributing
 
-2. Configure the template in `~/.config/clrsync/config.toml`:
+To add a new palette:
 
-```toml
+1. Create a folder in `palettes/` with your palette name
-[templates.hyprland]
+2. Add your `.toml` palette file
-enabled = true
+3. Add a `readme.md` with description
-input_path = '~/.config/clrsync/templates/hyprland.conf'
+4. Add a screenshot (`.png`)
-output_path = '~/.config/hypr/hyprland/clrsync.conf'
+5. Submit a PR
-reload_cmd = ''
-```
 
-3. Source the color theme in your Hyprland config:
+To add a new template:
 
-```conf
+1. Create a folder in `templates/` with the app name
-source=~/.config/hypr/hyprland/clrsync.conf
+2. Add your template file(s)
-```
+3. Add a `readme.md` with installation instructions
+4. Submit a PR

extra/palettes/cursed-light/readme.md

@@ -0,0 +1,7 @@
+# Cursed Light
+
+A light variant of the `cursed` color scheme.
+
+![cursed-light](cursed-light.png)
+
+[Download](cursed-light.toml)

extra/palettes/cursed/readme.md

@@ -0,0 +1,7 @@
+# Cursed
+
+A dark color scheme inspired by the `cursed` theme by [pyratebeard](https://pyratebeard.net).
+
+![cursed](cursed.png)
+
+[Download](cursed.toml)

extra/palettes/nord/readme.md

@@ -0,0 +1,7 @@
+# Nord
+
+A color scheme based on the [Nord](https://www.nordtheme.com/) palette.
+
+![nord](nord.png)
+
+[Download](nord.toml)

extra/templates/alacritty/readme.md

@@ -0,0 +1,20 @@
+# Alacritty
+
+1. Download the [template file](alacritty.toml)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.alacritty]
+enabled = true
+input_path = '~/.config/clrsync/templates/alacritty.toml'
+output_path = '~/.config/alacritty/clrsync.toml'
+reload_cmd = ''
+```
+
+3. Import the generated color scheme in `~/.config/alacritty/alacritty.toml`:
+
+```toml
+[general]
+import = ["clrsync.toml"]
+```

extra/templates/firefox/readme.md

@@ -0,0 +1,17 @@
+# Firefox
+
+1. Download the [template file](userChrome.css)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.firefox]
+enabled = true
+input_path = '~/.config/clrsync/templates/userChrome.css'
+output_path = '~/.mozilla/firefox/<profile>/chrome/userChrome.css'
+reload_cmd = ''
+```
+
+3. Enable `toolkit.legacyUserProfileCustomizations.stylesheets` in `about:config`
+
+4. Restart Firefox to apply the theme

extra/templates/ghostty/readme.md

@@ -0,0 +1,19 @@
+# Ghostty
+
+1. Download the [template file](ghostty)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.ghostty]
+enabled = true
+input_path = '~/.config/clrsync/templates/ghostty'
+output_path = '~/.config/ghostty/themes/clrsync'
+reload_cmd = 'pkill -SIGUSR2 ghostty'
+```
+
+3. Set the generated color scheme in `~/.config/ghostty/config`:
+
+```conf
+theme = "clrsync"
+```

extra/templates/gtk.css

@@ -1,88 +0,0 @@
-@define-color accent_color {accent};
-@define-color accent_bg_color {accent};
-@define-color accent_fg_color {on_surface};
-@define-color destructive_color {error};
-@define-color destructive_bg_color {error};
-@define-color destructive_fg_color {on_error};
-@define-color success_color {success};
-@define-color success_bg_color {success};
-@define-color success_fg_color {on_success};
-@define-color warning_color {warning};
-@define-color warning_bg_color {warning};
-@define-color warning_fg_color {on_warning};
-@define-color error_color {error};
-@define-color error_bg_color {error};
-@define-color error_fg_color {on_error};
-@define-color window_bg_color {background};
-@define-color window_fg_color {on_background};
-@define-color view_bg_color {background};
-@define-color view_fg_color {foreground};
-@define-color headerbar_bg_color {surface};
-@define-color headerbar_fg_color {on_surface};
-@define-color headerbar_border_color {border};
-@define-color headerbar_backdrop_color @window_bg_color;
-@define-color headerbar_shade_color {border};
-@define-color sidebar_bg_color {surface_variant};
-@define-color sidebar_fg_color {on_surface};
-@define-color sidebar_border_color {border};
-@define-color sidebar_backdrop_color @window_bg_color;
-@define-color sidebar_shade_color {border};
-@define-color card_bg_color {surface};
-@define-color card_fg_color {on_surface};
-@define-color card_shade_color {border};
-@define-color dialog_bg_color {surface};
-@define-color dialog_fg_color {on_surface};
-@define-color popover_bg_color {surface_variant};
-@define-color popover_fg_color {on_surface_variant};
-@define-color shade_color {border};
-@define-color scrollbar_outline_color {border};
-
-@define-color blue_1 {base0C};
-@define-color blue_2 {base04};
-@define-color blue_3 {base04};
-@define-color blue_4 {base04};
-@define-color blue_5 {base04};
-@define-color green_1 {success};
-@define-color green_2 {success};
-@define-color green_3 {success};
-@define-color green_4 {base02};
-@define-color green_5 {base02};
-@define-color yellow_1 {base0B};
-@define-color yellow_2 {base03};
-@define-color yellow_3 {base03};
-@define-color yellow_4 {base03};
-@define-color yellow_5 {base03};
-@define-color orange_1 {warning};
-@define-color orange_2 {warning};
-@define-color orange_3 {warning};
-@define-color orange_4 {warning};
-@define-color orange_5 {warning};
-@define-color red_1 {error};
-@define-color red_2 {error};
-@define-color red_3 {error};
-@define-color red_4 {base01};
-@define-color red_5 {base01};
-@define-color purple_1 {base0D};
-@define-color purple_2 {base05};
-@define-color purple_3 {base05};
-@define-color purple_4 {base05};
-@define-color purple_5 {base05};
-@define-color brown_1 {base0E};
-@define-color brown_2 {base0E};
-@define-color brown_3 {base0E};
-@define-color brown_4 {base0E};
-@define-color brown_5 {base0E};
-@define-color light_1 {on_background};
-@define-color light_2 {on_surface};
-@define-color light_3 {on_surface_variant};
-@define-color light_4 {border};
-@define-color light_5 {border};
-@define-color dark_1 {border};
-@define-color dark_2 {surface_variant};
-@define-color dark_3 {surface};
-@define-color dark_4 {background};
-@define-color dark_5 {base00};
-
-scale trough highlight {
-    background: {accent}
-}

extra/templates/gtk/gtk.css

@@ -0,0 +1,18 @@
+@define-color accent_color {accent};
+@define-color accent_bg_color {accent};
+@define-color accent_fg_color {on_surface};
+@define-color window_bg_color {background};
+@define-color window_fg_color {foreground};
+@define-color headerbar_bg_color {surface};
+@define-color headerbar_fg_color {on_surface};
+@define-color popover_bg_color {surface_variant};
+@define-color popover_fg_color {on_surface_variant};
+@define-color view_bg_color {background};
+@define-color view_fg_color {foreground};
+@define-color card_bg_color {surface};
+@define-color card_fg_color {on_surface};
+
+@define-color sidebar_bg_color {surface_variant};
+@define-color sidebar_fg_color {on_surface};
+@define-color sidebar_border_color @window_bg_color;
+@define-color sidebar_backdrop_color @window_bg_color;

extra/templates/gtk/readme.md

@@ -0,0 +1,15 @@
+# GTK
+
+1. Download the [template file](gtk.css)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.gtk]
+enabled = true
+input_path = '~/.config/clrsync/templates/gtk.css'
+output_path = '~/.config/gtk-3.0/gtk.css'
+reload_cmd = ''
+```
+
+3. Restart GTK applications to apply the theme

extra/templates/hyprland/hyprland.conf

@@ -1,9 +1,9 @@
-$primary = rgb({accent.hex_stripped})
+$primary = rgb({accent_stripped})
-$surface = rgb({surface.hex_stripped})
+$surface = rgb({surface_stripped})
-$secondary = rgb({base04.hex_stripped})
+$secondary = rgb({base04_stripped})
-$error = rgb({error.hex_stripped})
+$error = rgb({error_stripped})
-$tertiary = rgb({base06.hex_stripped})
+$tertiary = rgb({base06_stripped})
-$surface_lowest = rgb({background.hex_stripped})
+$surface_lowest = rgb({background_stripped})
 
 general {
     col.active_border = $primary

extra/templates/hyprland/readme.md

@@ -0,0 +1,19 @@
+# Hyprland
+
+1. Download the [template file](hyprland.conf)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.hyprland]
+enabled = true
+input_path = '~/.config/clrsync/templates/hyprland.conf'
+output_path = '~/.config/hypr/clrsync.conf'
+reload_cmd = ''
+```
+
+3. Source the generated config in `~/.config/hypr/hyprland.conf`:
+
+```conf
+source = clrsync.conf
+```

extra/templates/kitty/readme.md

@@ -0,0 +1,19 @@
+# Kitty
+
+1. Download the [template file](kitty.conf)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.kitty]
+enabled = true
+input_path = '~/.config/clrsync/templates/kitty.conf'
+output_path = '~/.config/kitty/clrsync.conf'
+reload_cmd = 'pkill -SIGUSR1 kitty'
+```
+
+3. Import the generated color scheme in `~/.config/kitty/kitty.conf`:
+
+```conf
+include clrsync.conf
+```

extra/templates/neovim/readme.md

@@ -0,0 +1,19 @@
+# Neovim
+
+1. Download the [template file](nvim.lua)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.nvim]
+enabled = true
+input_path = '~/.config/clrsync/templates/nvim.lua'
+output_path = '~/.config/nvim/colors/clrsync.lua'
+reload_cmd = ''
+```
+
+3. Set the colorscheme in your Neovim config:
+
+```lua
+vim.cmd.colorscheme 'clrsync'
+```

extra/templates/qt/kvantum.kvconfig

@@ -76,7 +76,7 @@ menu_blur_radius=0
 tooltip_blur_radius=0
 
 [GeneralColors]
-window.color={background}
+window.color={surface}
 base.color={surface}
 alt.base.color={surface}
 button.color={surface_variant}
@@ -86,14 +86,14 @@ dark.color={surface_variant}
 mid.color={surface_variant}
 highlight.color={accent}
 inactive.highlight.color={accent}
-text.color={on_background}
+text.color={on_surface}
-window.text.color={on_background}
+window.text.color={on_surface}
-button.text.color={on_surface_variant}
+button.text.color={on_surface}
 disabled.text.color={editor_disabled}
 tooltip.text.color={on_surface}
 highlight.text.color={on_surface}
-link.color={base04}
+link.color={base06}
-link.visited.color={base05}
+link.visited.color={base0D}
 progress.indicator.text.color={on_surface}
 
 [Hacks]

extra/templates/qt/readme.md

@@ -0,0 +1,15 @@
+# Qt (qt5ct/qt6ct)
+
+1. Download the [template file](qtct.conf)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.qtct]
+enabled = true
+input_path = '~/.config/clrsync/templates/qtct.conf'
+output_path = '~/.config/qt5ct/colors/clrsync.conf'
+reload_cmd = ''
+```
+
+3. Select `clrsync` color scheme in qt5ct/qt6ct

extra/templates/telegram/readme.md

@@ -0,0 +1,17 @@
+# Telegram
+
+1. Download the [template file](telegram.tdesktop-theme)
+
+2. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.telegram]
+enabled = true
+input_path = '~/.config/clrsync/templates/telegram.tdesktop-theme'
+output_path = '~/clrsync.tdesktop-theme'
+reload_cmd = ''
+```
+
+3. Apply the palette with clrsync and send the generated `clrsync.tdesktop-theme` file to yourself in Telegram
+
+4. Click on the theme file in the Telegram dialog to apply it

extra/templates/vscode/readme.md

@@ -0,0 +1,17 @@
+# Visual Studio Code
+
+1. Install the [clrsync VS Code theme](https://marketplace.visualstudio.com/items?itemName=obsqrbtz.clrsync)
+
+2. Download the [template file](code.json)
+
+3. Configure the template in `~/.config/clrsync/config.toml`:
+
+```toml
+[templates.vscode]
+enabled = true
+input_path = '~/.config/clrsync/templates/code.json'
+output_path = '~/.vscode/extensions/obsqrbtz.clrsync-1.0.2/themes/clrsync-color-theme.json'
+reload_cmd = ''
+```
+
+4. Set the `clrsync` color scheme in VS Code