Switch to minimalist monochrome theme for better focus
- Replace colorful Catppuccin theme with subtle grayscale palette - Unify waybar modules with consistent gray backgrounds - Reduce visual distraction while maintaining all information - Keep accent colors only for critical states (warnings, errors) - Update sway window borders to match minimalist aesthetic Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
CGH0S7
57
config
57
config
@@ -21,7 +21,7 @@ set $right l
|
||||
set $term foot
|
||||
# Your preferred application launcher
|
||||
#set $menu wmenu-run
|
||||
set $menu "wofi -show drun"
|
||||
set $menu "wofi --show drun"
|
||||
set $browser firefox
|
||||
|
||||
# ... (previous config)
|
||||
@@ -38,40 +38,29 @@ default_border pixel 2
|
||||
default_floating_border pixel 2
|
||||
hide_edge_borders smart
|
||||
|
||||
# Colors (Catppuccin Mocha Inspired)
|
||||
set $rosewater #f5e0dc
|
||||
set $flamingo #f2cdcd
|
||||
set $pink #f5c2e7
|
||||
set $mauve #cba6f7
|
||||
set $red #f38ba8
|
||||
set $maroon #eba0ac
|
||||
set $peach #fab387
|
||||
set $yellow #f9e2af
|
||||
set $green #a6e3a1
|
||||
set $teal #94e2d5
|
||||
set $sky #89dceb
|
||||
set $sapphire #74c7ec
|
||||
set $blue #89b4fa
|
||||
set $lavender #b4befe
|
||||
set $text #cdd6f4
|
||||
set $subtext1 #bac2de
|
||||
set $subtext0 #a6adc8
|
||||
set $overlay2 #9399b2
|
||||
set $overlay1 #7f849c
|
||||
set $overlay0 #6c7086
|
||||
set $surface2 #585b70
|
||||
set $surface1 #45475a
|
||||
set $surface0 #313244
|
||||
set $base #1e1e2e
|
||||
set $mantle #181825
|
||||
set $crust #11111b
|
||||
# Colors (Minimalist Monochrome)
|
||||
set $base #1a1a1a
|
||||
set $mantle #151515
|
||||
set $crust #0f0f0f
|
||||
set $text #e0e0e0
|
||||
set $subtext1 #c0c0c0
|
||||
set $subtext0 #b0b0b0
|
||||
set $surface2 #404040
|
||||
set $surface1 #333333
|
||||
set $surface0 #2a2a2a
|
||||
set $overlay2 #707070
|
||||
set $overlay1 #606060
|
||||
set $overlay0 #505050
|
||||
set $accent #888888
|
||||
set $warning #d4a574
|
||||
set $critical #c47878
|
||||
|
||||
# class border backgr. text indicator child_border
|
||||
client.focused $mauve $base $text $rosewater $mauve
|
||||
client.focused_inactive $overlay0 $base $text $rosewater $overlay0
|
||||
client.unfocused $overlay0 $base $text $rosewater $overlay0
|
||||
client.urgent $red $base $peach $overlay0 $red
|
||||
client.placeholder $overlay0 $base $text $overlay0 $overlay0
|
||||
# class border backgr. text indicator child_border
|
||||
client.focused $accent $base $text $surface2 $accent
|
||||
client.focused_inactive $surface1 $base $subtext0 $surface2 $surface1
|
||||
client.unfocused $surface0 $base $subtext0 $surface2 $surface0
|
||||
client.urgent $critical $base $text $surface2 $critical
|
||||
client.placeholder $surface0 $base $subtext0 $surface0 $surface0
|
||||
client.background $base
|
||||
|
||||
### Output configuration
|
||||
|
||||
155
waybar/style.css
155
waybar/style.css
@@ -1,47 +1,38 @@
|
||||
@define-color base #1e1e2e;
|
||||
@define-color mantle #181825;
|
||||
@define-color crust #11111b;
|
||||
/* Minimalist monochrome color scheme */
|
||||
@define-color base #1a1a1a;
|
||||
@define-color mantle #151515;
|
||||
@define-color crust #0f0f0f;
|
||||
|
||||
@define-color text #cdd6f4;
|
||||
@define-color subtext0 #a6adc8;
|
||||
@define-color subtext1 #bac2de;
|
||||
@define-color text #e0e0e0;
|
||||
@define-color subtext0 #b0b0b0;
|
||||
@define-color subtext1 #c0c0c0;
|
||||
|
||||
@define-color surface0 #313244;
|
||||
@define-color surface1 #45475a;
|
||||
@define-color surface2 #585b70;
|
||||
@define-color surface0 #2a2a2a;
|
||||
@define-color surface1 #333333;
|
||||
@define-color surface2 #404040;
|
||||
|
||||
@define-color overlay0 #6c7086;
|
||||
@define-color overlay1 #7f849c;
|
||||
@define-color overlay2 #9399b2;
|
||||
@define-color overlay0 #505050;
|
||||
@define-color overlay1 #606060;
|
||||
@define-color overlay2 #707070;
|
||||
|
||||
@define-color blue #89b4fa;
|
||||
@define-color lavender #b4befe;
|
||||
@define-color sapphire #74c7ec;
|
||||
@define-color sky #89dceb;
|
||||
@define-color teal #94e2d5;
|
||||
@define-color green #a6e3a1;
|
||||
@define-color yellow #f9e2af;
|
||||
@define-color peach #fab387;
|
||||
@define-color maroon #eba0ac;
|
||||
@define-color red #f38ba8;
|
||||
@define-color mauve #cba6f7;
|
||||
@define-color pink #f5c2e7;
|
||||
@define-color flamingo #f2cdcd;
|
||||
@define-color rosewater #f5e0dc;
|
||||
/* Accent colors - only for critical states */
|
||||
@define-color accent #888888;
|
||||
@define-color warning #d4a574;
|
||||
@define-color critical #c47878;
|
||||
|
||||
* {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-family: "Maple Mono NF CN", "Font Awesome 7 Free", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
background-color: transparent;
|
||||
color: @surface0;
|
||||
color: @text;
|
||||
transition-property: background-color;
|
||||
transition-duration: .5s;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
window#waybar.hidden {
|
||||
@@ -51,7 +42,7 @@ window#waybar.hidden {
|
||||
/* Workspaces */
|
||||
#workspaces {
|
||||
background-color: @surface1;
|
||||
border-radius: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
padding: 0px 6px;
|
||||
@@ -60,9 +51,10 @@ window#waybar.hidden {
|
||||
#workspaces button {
|
||||
padding: 0 10px;
|
||||
background-color: transparent;
|
||||
color: @text;
|
||||
border-radius: 16px;
|
||||
color: @subtext0;
|
||||
border-radius: 10px;
|
||||
margin: 4px 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
@@ -71,34 +63,34 @@ window#waybar.hidden {
|
||||
}
|
||||
|
||||
#workspaces button.focused {
|
||||
color: @base;
|
||||
background-color: @mauve;
|
||||
color: @text;
|
||||
background-color: @accent;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: @base;
|
||||
background-color: @red;
|
||||
background-color: @critical;
|
||||
}
|
||||
|
||||
/* Window Title */
|
||||
#window {
|
||||
background-color: transparent;
|
||||
color: @text;
|
||||
border-radius: 16px;
|
||||
color: @subtext1;
|
||||
border-radius: 12px;
|
||||
padding: 0 12px;
|
||||
margin: 0 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Modules Right - Grouped look */
|
||||
.modules-right {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
/* background-color: @base; */
|
||||
border-radius: 16px;
|
||||
border-radius: 12px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
/* Individual Module Styling */
|
||||
/* Individual Module Styling - Unified monochrome design */
|
||||
#clock,
|
||||
#battery,
|
||||
#cpu,
|
||||
@@ -111,37 +103,49 @@ window#waybar.hidden {
|
||||
#tray,
|
||||
#mpd,
|
||||
#idle_inhibitor {
|
||||
padding: 0 12px;
|
||||
margin: 0 4px;
|
||||
color: @text; /* Changed to @text for better contrast with @surface1 and consistency */
|
||||
background-color: @surface1; /* Changed to @surface1 */
|
||||
border-radius: 16px;
|
||||
padding: 0 10px;
|
||||
margin: 0 3px;
|
||||
color: @text;
|
||||
background-color: @surface1;
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Specific Module Colors */
|
||||
#clock:hover,
|
||||
#battery:hover,
|
||||
#cpu:hover,
|
||||
#memory:hover,
|
||||
#temperature:hover,
|
||||
#backlight:hover,
|
||||
#network:hover,
|
||||
#pulseaudio:hover {
|
||||
background-color: @surface2;
|
||||
}
|
||||
|
||||
/* Specific Module Colors - Minimalist approach */
|
||||
#clock {
|
||||
background-color: @mauve;
|
||||
color: @base;
|
||||
font-weight: bold;
|
||||
background-color: @surface2;
|
||||
color: @text;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#battery {
|
||||
background-color: @green;
|
||||
color: @base;
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#battery.charging, #battery.plugged {
|
||||
background-color: @teal;
|
||||
color: @base;
|
||||
background-color: @surface2;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#battery.warning:not(.charging) {
|
||||
background-color: @peach;
|
||||
background-color: @warning;
|
||||
color: @base;
|
||||
}
|
||||
|
||||
#battery.critical:not(.charging) {
|
||||
background-color: @red;
|
||||
background-color: @critical;
|
||||
color: @base;
|
||||
animation-name: blink;
|
||||
animation-duration: 0.5s;
|
||||
@@ -151,41 +155,43 @@ window#waybar.hidden {
|
||||
}
|
||||
|
||||
#cpu {
|
||||
background-color: @sapphire;
|
||||
color: @base;
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#memory {
|
||||
background-color: @sky;
|
||||
color: @base;
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#temperature {
|
||||
background-color: @lavender;
|
||||
color: @base;
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#temperature.critical {
|
||||
background-color: @red;
|
||||
background-color: @critical;
|
||||
color: @base;
|
||||
}
|
||||
|
||||
#backlight {
|
||||
background-color: @yellow;
|
||||
color: @base;
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#network {
|
||||
background-color: @blue;
|
||||
color: @base;
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#network.disconnected {
|
||||
background-color: @overlay0;
|
||||
color: @subtext0;
|
||||
}
|
||||
|
||||
#pulseaudio {
|
||||
background-color: @pink;
|
||||
color: @base;
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#pulseaudio.muted {
|
||||
@@ -194,8 +200,8 @@ window#waybar.hidden {
|
||||
}
|
||||
|
||||
#tray {
|
||||
background-color: @peach;
|
||||
color: @surface0;
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#window.empty {
|
||||
@@ -207,15 +213,20 @@ window#waybar.hidden {
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#idle_inhibitor {
|
||||
background-color: @surface1;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#custom-power {
|
||||
background-color: @red;
|
||||
background-color: @critical;
|
||||
color: @base;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
to {
|
||||
background-color: @text;
|
||||
background-color: @overlay2;
|
||||
color: @base;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user