feat: start themeing firefox sections as well

Signed-off-by: Pranav <npv12@iitbbs.ac.in>

.github/workflows/release.yml

@@ -20,8 +20,10 @@ jobs:
           cache: 'pip'
       - name: Install dependencies
         run: pip install -r requirements.txt
+      - name: Install colloid specific deps
+        run: sudo apt-get install sassc
       - name: Generate themes
-        run: python ./install.py all -a all --zip
+        run: python ./install.py all -a all --zip -d $PWD/releases
       - name: Add zips to release
         uses: softprops/action-gh-release@v1
         with:

.gitignore

@@ -5,3 +5,4 @@ venv/
 
 # Releases folder
 releases
+chrome

README.md

@@ -12,7 +12,7 @@
 </p>
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/catppuccin/gtk/main/assets/demo2.png"/>
+  <img src="assets/res.webp"/>
 </p>
 
 # About
@@ -29,22 +29,9 @@ This GTK theme is based on the [Colloid](https://github.com/vinceliuice/Colloid-
 
 ### Installation
 
-1. Download and extract the **Catppuccin-Flavour.zip** file. or **Catppuccin-Flavour-Color.zip** file.
+1. Download and extract the theme zip from [releases](https://github.com/catppuccin/gtk/releases/) or you can install the theme from the [AUR](#for-arch-linux-users).
-[From Release](https://github.com/sadrach-cl/catppuccin-gtk/releases/) or you can install the theme from the [AUR](#for-arch-linux-users)
 2. Move the theme folder to **".themes"** in your home directory. **(~/.themes)** (Skip this step if you are using the AUR package)
-3. Select **"Catppuccin-Flavour** or **Catppuccin-Flavour-Color"** via your desktop specific tweaks application (**gnome-tweaks** on Gnome3+).
+3. Select the downloaded theme via your desktop specific tweaks application (**gnome-tweaks** on Gnome 3+).
-
-### For Flatpak users
-
-1. To give your Flatpaks access to your themes folder run:
-  ```bash
-  sudo flatpak override --filesystem=$HOME/.themes
-  ```
-2. To set the theme for all Flatpaks, replace `##theme##` with the name of the theme you want to use and run this command:
-  ```bash
-  sudo flatpak override --env=GTK_THEME=##theme##
-  ```
-3. For a more in depth tutorial see Hamza Algohary's tutorial on [It's Foss](https://itsfoss.com/flatpak-app-apply-theme/)
 
 ### For Arch Linux users
 
@@ -59,7 +46,30 @@ With your favourite AUR helper, install them:
   yay -S catppuccin-gtk-theme-mocha catppuccin-gtk-theme-macchiato catppuccin-gtk-theme-frappe catppuccin-gtk-theme-latte
   ```
 
-## Development
+### For gtk-4.0 users
+
+To theme gtk-4.0 applications you have to manually symlink the `~/.config/gtk-4.0/` to the themes folder. Use the following commands
+```
+mkdir -p "${HOME}/.config/gtk-4.0"
+ln -sf "${THEME_DIR}/gtk-4.0/assets" "${HOME}/.config/gtk-4.0/assets"
+ln -sf "${THEME_DIR}/gtk-4.0/gtk.css" "${HOME}/.config/gtk-4.0/gtk.css"
+ln -sf "${THEME_DIR}/gtk-4.0/gtk-dark.css" "${HOME}/.config/gtk-4.0/gtk-dark.css"
+```
+
+### For Flatpak users
+
+1. To give your Flatpaks access to your themes folder run:
+  ```bash
+  sudo flatpak override --filesystem=$HOME/.themes
+  ```
+2. To set the theme for all Flatpaks, replace `##theme##` with the name of the theme you want to use and run this command:
+  ```bash
+  sudo flatpak override --env=GTK_THEME=##theme##
+  ```
+3. For a more in depth tutorial see Hamza Algohary's tutorial on [It's Foss](https://itsfoss.com/flatpak-app-apply-theme/)
+
+### Using the script
+
 **Note**: Ensure that you have atleast python version 3.10 installed
 
 Clone the repository using
@@ -73,16 +83,35 @@ To check out the install script, run
 ```bash
 python install.py --help
 ```
+> Tip: `python install.py --help` allows the following options:
 
+```
+Compulsory field        Specify color variant(s) [mocha|frappe|macchiato|latte|all]
+-d, --dest DIR          Specify destination directory (Default: ~/.themes)
+-n, --name NAME         Specify theme name (Default: Colloid)
+-a, --accent VARIANT... Specify theme color variant(s) [rosewater|flamingo|pink|mauve|red|maroon|peach|yellow|green|teal|sky|
+                        sapphire|blue|lavender|all] (Default: blue)
+-s, --size VARIANT...   Specify size variant [standard|compact] (Default: standard variant)
+-l, --libadwaita        Link installed gtk-4.0 theme to config folder for all libadwaita app use this theme
+--zip                   Zips up the finally produced themes. 
+--tweaks                Specify versions for tweaks [black|rimless|normal]
+                        1. black:    Blackness color version
+                        2. rimless:  Remove the 1px border about windows and menus
+                        3. normal:   Normal windows button style (titlebuttons: max/min/close)
+-h, --help              Show help
+```
 You can install any theme like the following example
 ```bash
 python install.py mocha -a sky --tweaks rimless -d ~/.themes
+
 ```
-You can build all possible variations of the theme possible using the following command and it will output it to releases folder in the root of the repo.
+You can build all possible variations of the theme possible using the following command and it will install it to releases folder
 ```bash
-python build.py
+python install.py all -a all
 ```
 
+## Development
+
 A few important notes to keep in mind
 
 * `recolor.py` handles all changes that needs to be done to colloid to ensure it generated catppuccin colors. If vinceliuice changes anything in his theme in future, that is where you must change
@@ -91,8 +120,16 @@ A few important notes to keep in mind
  
 ## 💝 Thanks to
 
--   [sadrach-cl](https://github.com/sadrach-cl)
+**Current maintainers**
 - [npv12](https://github.com/npv12)
+- [ghostx31](https://github.com/ghostx31)
+- [Syndrizzle](https://github.com/Syndrizzle)
+
+**Contributions**
+- [rubyowo](https://github.com/rubyowo) - for working on the build and CI script
+
+**Previous maintainer(s)**
+- [sadrach-cl](https://github.com/sadrach-cl)
 
 &nbsp;
 

install.py

@@ -6,10 +6,12 @@ Usage:
     python install.py [options]
 """
 import argparse
+import os
+import subprocess
 
 from scripts.ctp_colors import ctp_colors, get_all_accent
 from scripts.create_theme import create_theme
-from scripts.var import theme_name, tmp_dir
+from scripts.var import theme_name, work_dir
 
 parser = argparse.ArgumentParser(description="Catppuccin theme")
 parser.add_argument("flavor",
@@ -29,7 +31,6 @@ parser.add_argument("--name", "-n",
 parser.add_argument("--dest", "-d",
                     metavar="destination",
                     type=str,
-                    default=tmp_dir,
                     dest="dest",
                     help="Destination of the files. defaults to releases folder inside the root")
 
@@ -87,5 +88,15 @@ if "all" in args.accent:
 else:
     accents = args.accent
 
-filename = create_theme(flavors, accents, args.dest,
+if args.dest:
+    dest = args.dest
+elif os.geteuid() == 0: # Sudo
+    dest = "/usr/share/themes"
+else:
+    dest = os.path.expanduser('~') + "/.themes"
+
+if not os.listdir(work_dir):
+    subprocess.call("git submodule update --init --recursive", shell=True)
+
+filename = create_theme(flavors, accents, dest,
                         args.link, args.name, args.size, args.tweaks, args.zip)

scripts/create_theme.py

@@ -6,10 +6,10 @@ from typing import List
 from scripts.ctp_colors import ctp_colors
 from scripts.recolor import recolor
 from scripts.utils import zip_multiple_folders
-from scripts.var import def_color_map, theme_name, tmp_dir, work_dir
+from scripts.var import def_color_map, repo_dir, src_dir, theme_name, work_dir
 
 
-def create_theme(types: List[str], accents: List[str], dest: str = tmp_dir, link: bool = False, 
+def create_theme(types: List[str], accents: List[str], dest: str, link: bool = False, 
     name: str = theme_name, size: str = "standard", tweaks=[], zip = False) -> None:
 
     try:
@@ -20,23 +20,22 @@ def create_theme(types: List[str], accents: List[str], dest: str = tmp_dir, link
     for type in types:
         for accent in accents:
             # Recolor colloid wrt our selection like mocha. latte
-            print(type, accent)
             recolor(ctp_colors[type], accent)
             theme_style: str = "light" if type == "latte" else "dark"
             install_cmd: str = f"./install.sh -c {theme_style} -s {size} -n {name} -d {dest} -t {def_color_map[accent]}"
             if tweaks:
                 install_cmd += f" --tweaks {' '.join([tweak for tweak in tweaks])}"
-
+            shutil.rmtree(f"{repo_dir}/chrome", ignore_errors=True)
+            shutil.copytree(f"{src_dir}/other/firefox/chrome", f"{repo_dir}/chrome")
             os.chdir(work_dir)
-            # Install the theme globally for you
+            subprocess.call("./build.sh", shell=True) # Rebuild all scss
-            subprocess.call(install_cmd, shell=True)
+            subprocess.call(install_cmd, shell=True) # Install the theme globally for you
-            # reset colloid repo to original state
+            subprocess.call("git reset --hard HEAD", shell=True)  # reset colloid repo to original state
-            subprocess.call("git reset --hard HEAD", shell=True)
 
             try:
                 # Rename colloid generated files as per catppuccin
                 new_filename = dest + \
-                    f"/{theme_name}-{type.capitalize()}-{size.capitalize()}-{accent.capitalize()}"
+                    f"/{theme_name}-{type.capitalize()}-{size.capitalize()}-{accent.capitalize()}-{theme_style.title()}"
                 filename = f"{theme_name}"
                 if def_color_map[accent] != 'default':
                     filename += f"-{def_color_map[accent].capitalize()}"

scripts/recolor.py

@@ -1,33 +1,70 @@
 from catppuccin import Flavour
 
-from .utils import replacetext
+from .utils import replacetext, replaceAllText
 from .var import (def_accent_dark, def_accent_light, def_color_map, src_dir,
                   theme_name, work_dir)
 
 
-def recolor_accent(flavor, file: str, accent: str = "blue"):
+def recolor_accent(flavor, accent: str = "blue"):
     """
     Recolors the accent color in a file.
     flavor:
         The flavor to recolor to. Like mocha, frappe, latte, etc.
-    file:
-        The file to modify
     accent:
         The accent color to replace. Defaults to Blue
     """
-    print(f"Recoloring accent for {file}...")
+    print(f"Recoloring all accents")
-    # Recolor as per accent for light. Hard code it as latte
+    replaceAllText(  # Recolor as per base for dark theme.
-    for key, value in Flavour.latte().__dict__.items():
+        work_dir, def_accent_dark[def_color_map[accent]], flavor.__dict__[accent].hex)
-        if key == accent:
+    replaceAllText(  # Recolor as per accent for light. Hard code it as latte
-            replacetext(
+        work_dir, def_accent_light[def_color_map[accent]], Flavour.latte().__dict__[accent].hex)
-                file, def_accent_light[def_color_map[accent]], value.hex)
 
-    # Recolor as per base for dark theme.
-    for key, value in flavor.__dict__.items():
-        if key == accent:
-            replacetext(
-                file, def_accent_dark[def_color_map[accent]], value.hex)
 
+def recolor_firefox(flavor, accent: str = "blue"):
+    """
+    Recolor the custom gnomish firefox to catpuccin color
+    """
+    firefox_color_file_dark = f"{src_dir}/other/firefox/chrome/Colloid/colors/dark.css"
+    firefox_color_file_light = f"{src_dir}/other/firefox/chrome/Colloid/colors/light.css"
+
+    replacetext(firefox_color_file_light, "2e3436", flavor.base.hex)
+    replacetext(firefox_color_file_light, "fafafa", Flavour.latte().base.hex)
+    replacetext(firefox_color_file_light, "f2f2f2", flavor.crust.hex)
+    replacetext(firefox_color_file_light, "303030", Flavour.mocha().base.hex)
+    replacetext(firefox_color_file_light, "ffffff", flavor.base.hex)
+    replacetext(firefox_color_file_light, "5b9bf8", flavor.surface0.hex)
+    replacetext(firefox_color_file_light, "3c84f7", flavor.__dict__[accent].hex)
+    replacetext(firefox_color_file_light, "dedede", flavor.surface1.hex)
+    replacetext(firefox_color_file_light, "f0f0f0", flavor.surface0.hex)
+    replacetext(firefox_color_file_light, "FAFAFA", flavor.surface1.hex)
+    replacetext(firefox_color_file_light, "fafafa", flavor.surface0.hex)
+    replacetext(firefox_color_file_light, "323232", flavor.mantle.hex)
+    replacetext(firefox_color_file_light, "d5d0cc", flavor.subtext1.hex)
+
+    # Buttons
+    replacetext(firefox_color_file_light, "fd5f51", flavor.red.hex)
+    replacetext(firefox_color_file_light, "38c76a", flavor.green.hex)
+    replacetext(firefox_color_file_light, "fdbe04", flavor.yellow.hex)
+
+    # Dark
+    replacetext(firefox_color_file_dark, "eeeeee", flavor.base.hex)
+    replacetext(firefox_color_file_dark, "2c2c2c", Flavour.mocha().base.hex)
+    replacetext(firefox_color_file_dark, "242424", flavor.crust.hex)
+    replacetext(firefox_color_file_dark, "ffffff", Flavour.latte().base.hex)
+    replacetext(firefox_color_file_dark, "383838", flavor.base.hex)
+    replacetext(firefox_color_file_dark, "3584e4", flavor.surface0.hex)
+    replacetext(firefox_color_file_dark, "78aeed", flavor.__dict__[accent].hex)
+    replacetext(firefox_color_file_dark, "363636", flavor.surface1.hex)
+    replacetext(firefox_color_file_dark, "404040", flavor.surface0.hex)
+    replacetext(firefox_color_file_dark, "4F4F4F", flavor.surface1.hex)
+    replacetext(firefox_color_file_dark, "444444", flavor.surface0.hex)
+    replacetext(firefox_color_file_dark, "323232", flavor.mantle.hex)
+    replacetext(firefox_color_file_dark, "919191", flavor.subtext1.hex)
+
+    # Buttons
+    replacetext(firefox_color_file_dark, "fd5f51", flavor.red.hex)
+    replacetext(firefox_color_file_dark, "38c76a", flavor.green.hex)
+    replacetext(firefox_color_file_dark, "fdbe04", flavor.yellow.hex)
 
 def recolor(flavor, accent: str):
     """
@@ -36,20 +73,42 @@ def recolor(flavor, accent: str):
     print("Recoloring to suit catppuccin theme")
     replacetext(f"{work_dir}/install.sh", "Colloid", theme_name)
 
-    print("MOD: Gtkrc.sh")
+    print("Recoloring accents")
-    # Recolor as per accent for dark
+    recolor_accent(flavor, accent)
-    recolor_accent(flavor, f"{work_dir}/gtkrc.sh", accent)
+    recolor_firefox(flavor, accent)    
 
+    print("MOD: Gtkrc.sh")
     replacetext(f"{work_dir}/gtkrc.sh", "background_light='#FFFFFF'",
                 f"background_light='#{Flavour.latte().base.hex}'")  # use latte_base for background_light
+    replacetext(f"{work_dir}/gtkrc.sh", "titlebar_light='#F2F2F2'",
+                f"titlebar_light='#{Flavour.latte().crust.hex}'")  # use latte_crust for titlebar_light
+    replacetext(f"{work_dir}/gtkrc.sh",
+                "titlebar_light='#F2F2F2'", f"titlebar_light='#{Flavour.latte().crust.hex}'")
+
+    if flavor == Flavour.latte():
+        replacetext(f"{work_dir}/gtkrc.sh", "background_dark='#0F0F0F'",
+                    f"background_dark='#{Flavour.mocha().base.hex}'")
+        replacetext(f"{work_dir}/gtkrc.sh", "background_darker='#121212'",
+                    f"background_darker='#{Flavour.mocha().mantle.hex}'")
+        replacetext(f"{work_dir}/gtkrc.sh",
+                    "background_alt='#212121'", f"background_alt='#{Flavour.mocha().crust.hex}'")
+        replacetext(f"{work_dir}/gtkrc.sh", "titlebar_dark='#030303'",
+                    f"titlebar_dark='#{Flavour.mocha().crust.hex}'")
+        replacetext(f"{work_dir}/gtkrc.sh", "background_dark='#2C2C2C'",
+                    f"background_dark='#{Flavour.mocha().base.hex}'")
+        replacetext(f"{work_dir}/gtkrc.sh", "background_darker='#3C3C3C'",
+                    f"background_darker='#{Flavour.mocha().mantle.hex}'")
+        replacetext(f"{work_dir}/gtkrc.sh",
+                    "background_alt='#464646'", f"background_alt='#{Flavour.mocha().crust.hex}'")
+        replacetext(f"{work_dir}/gtkrc.sh",
+                    "titlebar_dark='#242424'", f"titlebar_dark='#{Flavour.mocha().crust.hex}'")
+    else:
         replacetext(f"{work_dir}/gtkrc.sh", "background_dark='#0F0F0F'",
                     f"background_dark='#{flavor.base.hex}'")
         replacetext(f"{work_dir}/gtkrc.sh", "background_darker='#121212'",
                     f"background_darker='#{flavor.mantle.hex}'")
         replacetext(f"{work_dir}/gtkrc.sh",
                     "background_alt='#212121'", f"background_alt='#{flavor.crust.hex}'")
-    replacetext(f"{work_dir}/gtkrc.sh", "titlebar_light='#F2F2F2'",
-                f"titlebar_light='#{Flavour.latte().crust.hex}'")  # use latte_crust for titlebar_light
         replacetext(f"{work_dir}/gtkrc.sh", "titlebar_dark='#030303'",
                     f"titlebar_dark='#{flavor.crust.hex}'")
         replacetext(f"{work_dir}/gtkrc.sh", "background_dark='#2C2C2C'",
@@ -58,14 +117,10 @@ def recolor(flavor, accent: str):
                     f"background_darker='#{flavor.mantle.hex}'")
         replacetext(f"{work_dir}/gtkrc.sh",
                     "background_alt='#464646'", f"background_alt='#{flavor.crust.hex}'")
-    replacetext(f"{work_dir}/gtkrc.sh",
-                "titlebar_light='#F2F2F2'", f"titlebar_light='#{Flavour.latte().crust.hex}'")
         replacetext(f"{work_dir}/gtkrc.sh",
                     "titlebar_dark='#242424'", f"titlebar_dark='#{flavor.crust.hex}'")
 
     print("Mod SASS Color_Palette_default")
-    recolor_accent(
-        flavor, f"{src_dir}/sass/_color-palette-default.scss", accent)
 
     # Greys
     if flavor == Flavour.latte():  # Hardcode till someone smarter than me comes along
@@ -88,11 +143,11 @@ def recolor(flavor, accent: str):
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
                     "grey-800: #212121", f"grey-800: #{Flavour.mocha().crust.hex}")  # E $panel-solid;p
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
-                    "grey-850: #121212", f"grey-850: #{Flavour.mocha().surface1.hex}")  # H Darknes
+                    "grey-850: #121212", f"grey-850: #020202")  # H Darknes
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
-                    "grey-900: #0F0F0F", f"grey-900: #{Flavour.mocha().base.hex}")  # G Darknes
+                    "grey-900: #0F0F0F", f"grey-900: #010101")  # G Darknes
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
-                    "grey-950: #030303", f"grey-950: #{Flavour.mocha().crust.hex}")  # F Darknes
+                    "grey-950: #030303", f"grey-950: #000000")  # F Darknes
     else:
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
                     "grey-050: #FAFAFA", f"grey-050: #{flavor.overlay2.hex}")
@@ -113,11 +168,17 @@ def recolor(flavor, accent: str):
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
                     "grey-800: #212121", f"grey-800: #{flavor.crust.hex}")  # E $panel-solid;p
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
-                    "grey-850: #121212", f"grey-850: #{flavor.surface1.hex}")  # H Darknes
+                    "grey-850: #121212", f"grey-850: #020202")  # H Darknes
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
-                    "grey-900: #0F0F0F", f"grey-900: #{flavor.base.hex}")  # G Darknes
+                    "grey-900: #0F0F0F", f"grey-900: #010101")  # G Darknes
         replacetext(f"{src_dir}/sass/_color-palette-default.scss",
-                    "grey-950: #030303", f"grey-950: #{flavor.crust.hex}")  # F Darknes
+                    "grey-950: #030303", f"grey-950: #000000")  # F Darknes
+
+        # Make the hover black
+        replacetext(f"{src_dir}/sass/gtk/_common-3.0.scss",
+                    "if\(\$colorscheme != 'dracula', white, rgba\(black, 0\.5\)\)", "rgba(black, 0.5)")
+        replacetext(f"{src_dir}/sass/gtk/_common-4.0.scss",
+                    "if\(\$colorscheme != 'dracula', white, rgba\(black, 0\.5\)\)", "rgba(black, 0.5)")
 
     # Buttons
     replacetext(f"{src_dir}/sass/_color-palette-default.scss",
@@ -126,16 +187,3 @@ def recolor(flavor, accent: str):
                 "button-max: #38c76a", f"button-max: #{flavor.green.hex}")
     replacetext(f"{src_dir}/sass/_color-palette-default.scss",
                 "button-min: #fdbe04", f"button-min: #{flavor.yellow.hex}")
-
-    print("Mod Accent Cinnamon")
-    recolor_accent(flavor, f"{src_dir}/assets/cinnamon/make-assets.sh", accent)
-
-    print("Mod Accent Gnome shell")
-    recolor_accent(
-        flavor, f"{src_dir}/assets/gnome-shell/make-assets.sh", accent)
-
-    print("Mod Accent GTK")
-    recolor_accent(flavor, f"{src_dir}/assets/gtk/make-assets.sh", accent)
-
-    print("Mod Accent GTK 2.0")
-    recolor_accent(flavor, f"{src_dir}/assets/gtk-2.0/make-assets.sh", accent)

scripts/utils.py

@@ -4,25 +4,38 @@ import shutil
 import zipfile
 
 
-def replacetext(file_name: str, search_text: str, replace_text: str) -> None:
+def replacetext(filepath: str, search_text: str, replace_text: str) -> None:
     """
     Helper function to replace the color in the file.
     Can be used to replace any text in the file.
 
     Args:
-        file_name (str): The file to replace the text in.
+        filepath (str): The file to replace the text in.
         search_text (str): The text to be replaced.
         replace_text (str): The text to replace with.
 
     Returns:
         None
     """
-    with open(file_name, 'r+') as f:
+
+    try:
+        with open(filepath, 'r+') as f:
             file = f.read()
             file = re.sub(search_text, replace_text, file)
             f.seek(0)
             f.write(file)
             f.truncate()
+    except Exception as e:
+        print(f"Failed to recolor {filepath}")
+
+
+def replaceAllText(start_dir: str, search_text: str, replace_text: str) -> None:
+    for path, _, files in os.walk(os.path.abspath(start_dir)):
+        for filename in files:
+            filepath = os.path.join(path, filename)
+            if filepath.endswith(".png"):
+                continue
+            replacetext(filepath, search_text, replace_text)
 
 
 def zipdir(path, ziph):