Suggestions for new variables and enhancement tweaks

[starmatt]

Hello !
First of all, thanks a lot for this, it's great and highly appreciated.

I have a few suggestions to rework some variables, as changing the colour of some as unexpected/unwanted side-effects on other parts of the UI

• THEME_COLOUR_DANGER: make 2 variables to separate error colour from close button
• THEME_COLOUR_WARNING: make 2 variables to separate ALT primary colour (ALSO the colour of the selection rectangle in the file explorer) from minimize button
• THEME_COLOUR_SUCCESS: make 2 variables or more to separate UI elements (buttons) from textual indicators (ie. banners who use the colour as background)
• THEME_COLOUR_INFO: make 2 variables or more to separate text hover from textual indicators (ie. banners who use the colour as background)

Suggestions for new stuff

• THEME_COLOUR_TEXT_SUCCESS: add support ot change the text colour in textual indicators (so we can match text colour and background colour)
• THEME_COLOUR_TEXT_DANGER: add support ot change the text colour in textual indicators (so we can match text colour and background colour)
• THEME_COLOUR_TEXT_WARNING: add support ot change the text colour in textual indicators (so we can match text colour and background colour)
• THEME_WINDOW_RADIUS: add support to change the border-radius value of windows. IDK how hard to would be do, but I think the material theme you're using as base allows this.

Let me know what you think, thanks a lot for your work and attention !

[jaxwilko]

Those all sound like great changes to me :)

Do you want to have a look at implementing those changes?

If so what I would do is look at which scss vars those env vars are converted into, then look in the scss colours config file to see how they're used, you may also have to grep through the theme scss to make changes there.

Very happy to help if needed.

I was recently looking at adding Arc as a theme style option but i need to rebuild all the assets for the project to match the current workflow. It would be nice if these changes were in before I start on that so I don't have to come back and redo the scss integration. So very happy to drop that and help with this if needed :).

Thank you very much for your time looking at the project, it's very much appreciated!

[starmatt]

Hi !
Yeah I can try to implement these, but I have no idea how a gtk theme works yet, so it might take me some time before I start doing meaningful work. If you have any pointers to get me started, let me know !

[starmatt]

Alright, I reworked most variables and here's what I came up with for a standard new theme file (colours are for my own theme):

#!/usr/bin/env bash

# Configuration
# -------------
THEME_VARIANT=                          "dark"
THEME_LAPTOP_MODE=                      "true"
THEME_HEADER_BAR=                       "dark"
THEME_PANEL=                            "dark"
THEME_STYLE=                            "material"

# Colour palette
# --------------
THEME_COLOUR_PRIMARY=                   "#5989eb"
THEME_COLOUR_SECONDARY=                 "#414d58"
THEME_COLOUR_SUCCESS=                   "#66ff99"
THEME_COLOUR_DANGER=                    "#ff6666"
THEME_COLOUR_WARNING=                   "#f7ec6e"
THEME_COLOUR_INFO=                      "#7fbfff"

# Backgrounds
# -----------
THEME_BACKGROUND=                       "#161a1d" # Background colour
THEME_BACKGROUND_ACCENT=                "#21262c" # Accentuated background colour

# Text
# ----
THEME_FOREGROUND=                       "#e7ecef" # Standard text
THEME_FOREGROUND_DARK=                  "#161a1d" # Standard dark text (to match light backgrounds where applicable)
THEME_FOREGROUND_HIGHLIGHT=             "$THEME_COLOUR_PRIMARY" # Highlighted/selected text

# Windows
# -------
THEME_WINDOW_CLOSE=                     "$THEME_COLOUR_DANGER" # Close button colour
THEME_WINDOW_MAXIMIZE=                  "$THEME_COLOUR_SECONDARY" # Maximize button colour
THEME_WINDOW_MINIMIZE=                  "$THEME_COLOUR_SECONDARY" # Minimize button colour
THEME_WINDOW_BORDER_RADIUS=             4 # Windows border radius value in pixels

# UI
# --
THEME_PANEL_DIVIDER=                    "$THEME_COLOUR_SECONDARY" # Panel division colour
THEME_UI_ELEMENT=                       "$THEME_COLOUR_SECONDARY" # UI elements colour
THEME_UI_ELEMENT_HOVER=                 "$THEME_COLOUR_SECONDARY" # Hovered UI elements colour
THEME_UI_ELEMENT_ACTIVE=                "$THEME_COLOUR_PRIMARY" # Active UI elements colour (text highlighting, active items, links)

THEME_UI_INPUT=                         "$THEME_UI_ELEMENT" # Checkboxes and radio inputs colour
THEME_UI_INPUT_ACTIVE=                  "$THEME_UI_ELEMENT_ACTIVE" # Checkboxes and radio inputs active colour

THEME_UI_INPUTBAR_BG=                   "$THEME_UI_ELEMENT" # Sliders, progress bars, etc. background colour
THEME_UI_INPUTBAR_FG=                   "$THEME_UI_ELEMENT_ACTIVE" # Sliders, progress bars, etc. foreground colour

THEME_UI_BUTTON_BG=                     "$THEME_UI_ELEMENT" # Buttons background colour
THEME_UI_BUTTON_FG=                     "$THEME_COLOUR_PRIMARY" # Buttons text colour
THEME_UI_BUTTON_BG_ACTIVE=              "$THEME_UI_ELEMENT_ACTIVE" # Active buttons background colour
THEME_UI_BUTTON_FG_ACTIVE=              "$THEME_FOREGROUND" # Active buttons text colour

THEME_UI_LINKS=                         "$THEME_COLOUR_INFO" # Links colour

# Info bars
# ---------
THEME_UI_INFOBAR_BG_SUCCESS=            "$THEME_COLOUR_SUCCESS" # Success info bar background colour
THEME_UI_INFOBAR_FG_SUCCESS=            "$THEME_FOREGROUND_DARK" # Success info bar text colour
THEME_UI_INFOBAR_BG_DANGER=             "$THEME_COLOUR_DANGER" # Danger info bar background colour
THEME_UI_INFOBAR_FG_DANGER=             "$THEME_FOREGROUND" # Danger info bar text colour
THEME_UI_INFOBAR_BG_WARNING=            "$THEME_COLOUR_WARNING" # Warning info bar background colour
THEME_UI_INFOBAR_FG_WARNING=            "$THEME_FOREGROUND_DARK" # Warning info bar text colour
THEME_UI_INFOBAR_BG_INFO=               "$THEME_COLOUR_INFO" # Info info bar background colour
THEME_UI_INFOBAR_FG_INFO=               "$THEME_FOREGROUND_DARK" # Info info bar text colour

# Shell
# -----
THEME_SHELL_ACCENT=                     "$THEME_COLOUR_PRIMARY" # Underlines in the shell (topbar/dock/workspace switcher) colour

This is very much WIP still, I have yet to implement any of these in the sass files, some might not be doable IDK for sure yet.
I need to figure out and modify the compile script first.

Let me know what you think !

[jaxwilko]

Looks really good to me!

If you need a hand with the sass then feel free to leave a comment here or message me on telegram (username on my profile)