search

jaxwilko / gtk-theme-framework

GNU General Public License v3.0
82 stars 5 forks source link

Suggestions for new variables and enhancement tweaks #10

Open starmatt opened 3 years ago

starmatt commented 3 years ago

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

Suggestions for new stuff

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

jaxwilko commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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)