matugen-themes

repository·main·Indexed 19 days ago

https://github.com/iniox/matugen-themes

A collection of templates for applying color schemes generated by matugen to various websites and software applications. Supported targets include websites (YouTube, Bitwarden, GitHub), terminal emulators (Alacritty, Kitty, Ghostty), and system components such as GTK 3.0/4.0, Hyprland, Gnome-shell, and others.

Tokens
14.3K
Snippets
66
Records
69
Agent score
66%

What's inside matugen-themes

  1. Overview of matugen-themes

    main

    The matugen-themes repository provides a collection of templates designed to work with matugen to generate dynamic color schemes for various websites and programs. The themes are categorized into:

    • Websites: CSS templates for platforms like YouTube, Bitwarden, and GitHub.
    • Programs: Configuration templates for applications like Aerc and Alacritty.

    Users can use these templates to apply consistent, color-matched themes across their web browsing and terminal environments.

  2. Configure Lualine with Matugen

    main

    Lualine uses its own highlight groups that base16-colorscheme cannot style automatically. To integrate them, set the Lualine theme to "base16".

    Important: Lualine must be re-sourced every time Matugen updates to refresh its colors. To do this, add require('lualine').setup({}) to the end of your Matugen template.lua. For cleaner configurations, refactor your Lualine setup into a separate file and use dofile() in both your init.lua and the Matugen template.

    require('lualine').setup({
      options = {
        theme = "base16",
      }
    })
  3. Enable hot-reloading for Matugen colors in Neovim

    main

    Since Neovim doesn't support hot-reloading natively, you can register a Signal autocmd to listen for SIGUSR1. When the signal is received, execute a callback that re-sources the Matugen file and re-initializes plugins like Lualine.

    Note: This implementation is tested for Linux.

    -- Register an autocmd to listen for matugen updates
    vim.api.nvim_create_autocmd("Signal", {
      pattern = "SIGUSR1",
      callback = auxiliary_function,
    })
    
    -- Main entrypoint on matugen reloads
    local function auxiliary_function()
      -- 1. Load the matugen style file
      source_matugen()
    
      -- 2. Re-source Lualine (since base16 reload overwrites it)
      dofile(os.getenv("HOME") .. '/.config/nvim/config/plugins/lualine-nvim.lua')
    
      -- 3. Apply any other manual tweaks
      vim.api.nvim_set_hl(0, "Comment", { italic = true })
    end
  4. Configure Matugen themes for Spicetify Sleek

    main

    To apply Matugen colors to the Spicetify Sleek theme:

    1. Create a new template file using the content from ./templates/spicetify.ini.
    2. Configure the template in Matugen. Note the post_hook to automatically apply the theme:
    [config]
    # ...
    [templates.spotify]
    input_path = 'path/to/template'
    output_path = '~/.config/spicetify/Themes/Sleek/color.ini'
    post_hook = 'pgrep -x spicetify > /dev/null || spicetify apply -n'
    1. Update your ~/.config/spicetify/config-xpui.ini:
    color_scheme = matugen
    current_theme = Sleek
  5. Configure MangoWC theme

    main

    To theme MangoWC, create a template file using content from ./templates/mango.conf. In config.toml, define [templates.mango] with the output path ~/.config/mango/colors.conf and use mmsg -d reload_config as the post_hook. Then, source the generated file in your MangoWC configuration.

    MangoWC Configuration (~/.config/mango/config.conf):

    source=~/.config/mango/colors.conf
    [templates.mango]
    input_path = 'path/to/template'
    output_path = '~/.config/mango/colors.conf'
    post_hook = 'mmsg -d reload_config'
  6. Customize rmpc UI layout and Cava colors

    main

    The module installs templates to ~/.config/matugen/templates/. If you need to change the UI layout or how colors are applied, you must edit the template files directly:

    • UI Layout: Edit ./templates/rmpc.ron to adjust the layout. Note that changing the layout may be required if the default provided does not suit your needs.
    • Cava Colors: In this theme, cava is embedded in rmpc. While rmpc supports single, rows, and gradient color settings, horizontal_gradient is currently unsupported. Refer to the Cava/Theming documentation for more details on color application.
  7. Configure color schemes for Qt (qt5ct/qt6ct)

    main

    To use Matugen generated colors with Qt applications, configure a color-scheme template in your Matugen configuration.

    1. Define the template in your Matugen config:
    [config]
    # ...
    [templates.color-scheme]
    input_path = '/path/to/template/'
    output_path = '~/.local/share/color-schemes/Matugen.colors'
    1. Update your ~/.config/qt5ct/qt5ct.conf and ~/.config/qt6ct/qt6ct.conf files by adding these lines to the top:
    color_scheme_path=~/.local/share/color-schemes/Matugen.colors
    custom_palette=true
    icon_theme=breeze
    style=<Breeze or Darkly>
    1. Ensure the environment variable QT_QPA_PLATFORMTHEME is set to qt6ct.

    Dependencies (Arch Linux):

    • For general setup: yay -S breeze-icons breeze-gtk qt6ct-kde qt5ct-kde
    • For KDE style: pacman -S breeze breeze5
    • For a cleaner style: yay -S darkly-bin
    [config]
    # ...
    [templates.color-scheme]
    input_path = '/path/to/template/'
    output_path = '~/.local/share/color-schemes/Matugen.colors'
    # ...
  8. Configure PrismLauncher theme

    main

    To theme PrismLauncher, create a template file from ./templates/prismlauncher.json. In config.toml, define [templates.prismlauncher] with the output path ~/.local/share/PrismLauncher/themes/Matugen/theme.json.

    In PrismLauncher, go to Settings > Appearance and set the theme to Matugen.

    [templates.prismlauncher]
    input_path = '~/.config/matugen/templates/prismlauncher.json'
    output_path = '~/.local/share/PrismLauncher/themes/Matugen/theme.json'
  9. Configure OBS theme

    main

    To theme OBS, create a template file from ./templates/matugen.obt. In config.toml, define [templates.obs] with the output path ~/.config/obs-studio/themes/matugen.obt.

    After generation, open OBS and navigate to: File > Settings > Appearance > Theme > Matugen.

    [templates.obs]
    input_path = 'path/to/template'
    output_path = '~/.config/obs-studio/themes/matugen.obt'
  10. Configure Wofi theme template

    main

    To use Matugen with Wofi, create a new template file using the content from templates/zellij-theme.kdl.tera as a base. Then, register the template in your config.toml by specifying the input_path (pointing to your new template file) and the output_path (where the generated CSS will be saved). Finally, import the generated CSS into your Wofi style configuration.

    1. Create a template file with content from templates/zellij-theme.kdl.tera.
    2. Add the following to config.toml:
    [config]
    # ...
    [templates.wofi]
    input_path = "/path/to/template"
    output_path = "~/.config/wofi/colors.css"
    1. Import the colors in ~/.config/wofi/style.css:
    @import "colors.css";
  11. Configure website themes for Firefox-based browsers

    main

    To use these website themes in Firefox-based browsers (like FloorP or Firefox), you must enable custom stylesheets and set up a chrome directory within your profile.

    1. Enable Custom Stylesheets

    1. Navigate to about:config in your browser.
    2. Set toolkit.legacyUserProfileCustomizations.stylesheets to true.

    2. Prepare the Profile Directory

    1. Go to about:support.
    2. Under Application Basics, find Profile Directory and click Open Directory.
    3. Create a folder named chrome inside your profile directory.
    4. Inside chrome, create a folder named websites.

    3. Integrate with Matugen

    Copy the template from the repository's templates/firefox-colors.css and add it to your matugen configuration. Ensure you use absolute paths (e.g., /home/user/...) rather than relative paths (~/...), as relative paths will fail to import.

    [templates.firefox-website-colors]
    input_path = "path/to/template/"
    output_path = "/home/username/path/to/profile/chrome/colors.css"

    4. Apply Themes via userContent.css

    1. Copy the desired website themes from the websites/ directory of this repository into your chrome/websites/ folder.
    2. Create a file named userContent.css inside your chrome/ folder.
    3. Import the generated colors and the specific website themes using @import rules with absolute paths.
    /* Example userContent.css */
    @import url("/home/ini/.floorp/ini/chrome/colors.css");
    
    @import url("/home/ini/.floorp/ini/chrome/websites/bitwarden.css");
    @import url("/home/ini/.floorp/ini/chrome/websites/github.css");
    @import url("/home/ini/.floorp/ini/chrome/websites/youtube.css");
  12. Configure Neovim theme (Standard Vim/Lua)

    main

    You can style Neovim using standard .vim configuration. Create a template file from ./templates/nvim-colors.vim and define it in config.toml with the output path ~/.config/nvim/colors/matugen.vim and post_hook = 'pkill -SIGUSR1 nvim'.

    For init.vim:

    colorscheme matugen
    autocmd Signal SIGUSR1 colorscheme matugen

    For init.lua:

    vim.cmd("colorscheme matugen")
    vim.api.nvim_create_autocmd("Signal", {
        pattern = "SIGUSR1",
        command = "colorscheme matugen",
    })
    [templates.nvim]
    input_path = 'path/to/template'
    output_path = '~/.config/nvim/colors/matugen.vim'
    post_hook = 'pkill -SIGUSR1 nvim'