From 6c355ad395d2fe56a00109438038b3ae4d11a19c Mon Sep 17 00:00:00 2001 From: GaspardCulis Date: Tue, 6 Feb 2024 17:03:11 +0100 Subject: [PATCH] eww: Added theme.scss to define theme colors --- bar/eww/bar.scss | 26 ++++++++++++++------------ bar/eww/eww.scss | 5 ++++- bar/eww/theme.scss | 15 +++++++++++++++ 3 files changed, 33 insertions(+), 13 deletions(-) create mode 100644 bar/eww/theme.scss diff --git a/bar/eww/bar.scss b/bar/eww/bar.scss index dc18d64..f28dd8f 100644 --- a/bar/eww/bar.scss +++ b/bar/eww/bar.scss @@ -1,6 +1,6 @@ .bar { * { - color: #a4acc5; + color: $text; font-family: "JetBrainsMono Nerd Font", "Font Awesome 6 Free"; font-weight: bold; font-size: 16px; @@ -10,7 +10,7 @@ margin: 0px 14px 0px 10px; padding: 0px 10px 0px 10px; border-radius: 10px; - background-color: #181926; + background-color: $background; & > * + * { margin-left: 20px; @@ -18,23 +18,23 @@ } .time { - color: #c8906e; + color: $orange; } .connectivity { - color: #c7b68e; + color: $yellow; } .bluetooth { - color: #6e91ca; + color: $blue; } .volume { - color: #6e91ca; + color: $blue; } .mic { - color: #a286c8; + color: $purple; } .systray { @@ -44,7 +44,7 @@ menu { padding: 5px 5px; border-radius: 10px; - background-color: #181926; + background-color: $background; menuitem { margin: 1px 0; @@ -70,13 +70,15 @@ & * { .normal { - color: #86b985; + color: $normal; } + .warning { - color: #be8d3e; + color: $warning; } + .critical { - color: #cb535e; + color: $critical; } } @@ -86,7 +88,7 @@ padding: 0px 8px 0px 8px; &.current { - background: #326bb9; + background: $background-active; border-radius: 10px; } } diff --git a/bar/eww/eww.scss b/bar/eww/eww.scss index 76b4cb2..c7f3d14 100644 --- a/bar/eww/eww.scss +++ b/bar/eww/eww.scss @@ -1,4 +1,7 @@ -@import "./bar.scss" * { +@import "./theme.scss"; +@import "./bar.scss"; + +* { all: unset; font-family: "FiraCode Nerd Font"; } diff --git a/bar/eww/theme.scss b/bar/eww/theme.scss new file mode 100644 index 0000000..4f91b7a --- /dev/null +++ b/bar/eww/theme.scss @@ -0,0 +1,15 @@ +/* Theme color variables */ +$background: #181926; +$background-active: #326bb9; +$text: #a4acc5; + +$purple: #a286c8; +$blue: #6e91ca; +$green: #86b985; +$yellow: #c7b68e; +$orange: #c8906e; +$red: #cb535e; + +$normal: $green; +$warning: #be8d3e; +$critical: $red;