1
0
Fork 0
mirror of https://github.com/SeriousBug/dotfiles synced 2024-11-01 03:27:26 -05:00

Introduce theme color variables

This commit is contained in:
Kaan Barmore-Genç 2023-04-24 00:23:11 -04:00
parent 902a35cbf0
commit c9397598ab
Signed by: kaan
GPG key ID: B2E280771CD62FCF
3 changed files with 68 additions and 22 deletions

1
.dotter/.gitignore vendored
View file

@ -1,2 +1,3 @@
local.toml
cache.toml
cache

View file

@ -32,7 +32,42 @@ fish = "~/.config/fish"
"systemd/user/noisetorch.service" = "~/.config/systemd/user/noisetorch.service"
"systemd/user/ssh-agent.service" = "~/.config/systemd/user/ssh-agent.service"
[waybar]
depends = ["theme"]
[waybar.files]
"waybar/config" = "~/.config/waybar/config"
"waybar/style.css" = "~/.config/waybar/style.css"
"waybar/mediaplayer.py" = "~/.config/waybar/mediaplayer.py"
[theme.variables]
# These are specified in bg-fg pairs, background and text color. The _fg color
# is the color of text that would be readable on this color background.
#
# Dark doesn't necessarily mean darker tone, but also could be a duller tone. Or
# could be straight up lighter, just depends on the theme. It's just a variation
# of the color it's based on.
color_primary = "#66cc99"
color_primary_fg = "#000000"
color_primary_dark = "#94A879"
color_primary_dark_fg = "#000000"
color_primary_darker = "#5D7150"
color_primary_darker_fg = "#FFFFFF"
color_primary_darkest = "#807348"
color_primary_darkest_fg = "#FFFFFF"
color_secondary = "#D6882D"
color_secondary_fg = "#000000"
color_secondary_dark = "#9B551E"
color_secondary_dark_fg = "#FFFFFF"
color_secondary_darker = "#743307"
color_secondary_darker_fg = "#FFFFFF"
color_secondary_darkest = "#3F2D16"
color_secondary_darkest_fg = "#FFFFFF"

View file

@ -37,8 +37,8 @@ window#waybar.chromium {
#workspaces button {
padding: 0 5px;
background-color: #D6882D;
color: rgba(0,0,0,0.8);
background-color: {{color_secondary}};
color: {{color_secondary_fg}};
/* Use box-shadow instead of border so the text isn't offset */
/*box-shadow: inset 0 -3px transparent;*/
/* Avoid rounded borders under each workspace name */
@ -62,16 +62,19 @@ window#waybar.chromium {
}
#workspaces button.focused {
background-color: #A44404;
background-color: {{color_secondary_dark}};
color: {{color_secondary_dark_fg}};
/* box-shadow: inset 0 -3px #ffffff; */
}
#workspaces button.urgent {
background-color: #eb4d4b;
background-color: {{color_secondary_darker}};
color: {{color_secondary_darker_fg}};
}
#mode {
background-color: #A44404;
background-color: {{color_primary_darker}};
color: {{color_primary_darker_fg}};
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
/* border-bottom: 3px solid #ffffff; */
@ -164,7 +167,8 @@ label:focus {
#custom-media.custom-spotify {
background-color: #66cc99;
background-color: {{color_primary}};
color: {{color_primary_fg}}
}
#custom-media.custom-vlc {
@ -211,49 +215,55 @@ label:focus {
#tray {
background-color: #743307;
background-color: {{color_secondary_darker}};
color: {{color_secondary_darker_fg}};
}
#clock {
background-color: #D6882D;
color: #000000;
background-color: {{color_secondary}};
color: {{color_secondary_fg}};
}
#language {
background: #9B551E;
background: {{color_secondary_dark}};
color: {{color_secondary_dark_fg}};
padding: 0 5px;
min-width: 16px;
}
#temperature {
background-color: #94A879;
color: #000000;
background-color: {{color_primary_dark}};
color: {{color_primary_dark_fg}};
}
#memory {
background-color: #5D7150;
background-color: {{color_primary_darker}};
color: {{color_primary_darker_fg}};
}
#cpu {
background-color: #807348;
background-color: {{color_primary_darkest}};
color: {{color_primary_darkest_fg}};
}
#pulseaudio {
background-color: #3F2D16;
color: #FFFFFF;
background-color: {{color_secondary_darkest}};
color: {{color_secondary_darkest_fg}};
}
#custom-media {
background-color: #66cc99;
color: rgba(0, 0, 0, 0.8);
background-color: {{color_primary}};
color: {{color_primary_fg}};
min-width: 100px;
}
#custom-launcher {
background-color: #743307;
background-color: {{color_secondary_darker}};
color: {{color_secondary_darker_fg}};
padding-left: 16px;
padding-right: 16px;
}
#custom-exit {
background-color: #3F2D16;
background-color: {{color_secondary_darkest}};
color: {{color_secondary_darkest_fg}};
padding-left: 16px;
padding-right: 16px;
}
#custom-windows {
color: #000000;
background-color: #66cc99;
background-color: {{color_primary}};
color: {{color_primary_fg}};
padding: 0 16px;
border-bottom-right-radius: 16px;
}