tons of theme tweaks, +gruvbox

This commit is contained in:
Reid 2026-04-22 21:32:27 -07:00
parent 80d22a470a
commit 2ad77494b2
Signed by: reidlab
GPG key ID: DAF5EAF6665839FD
30 changed files with 410 additions and 371 deletions

View file

@ -4,14 +4,16 @@ with lib;
let
cfg = config.modules.desktop.themes;
accent = "pink";
accentBase = "base17";
variant = "mocha";
dark = variant != "latte";
colorScheme = inputs.nix-colors.colorSchemes.${"catppuccin-${variant}"};
darkString = if dark then "dark" else "light";
scheme = "${inputs.tt-schemes}/base24/catppuccin-${variant}.yaml";
pascalCase = s: (toUpper (substring 0 1 s)) + (toLower (substring 1 (stringLength s) s));
in {
config = mkIf (cfg.active == "catppuccin") {
colorScheme = colorScheme;
scheme = scheme;
modules.desktop.themes = {
dark = dark;
@ -35,14 +37,13 @@ in {
};
iconTheme = {
name = "WhiteSur-${if dark then "dark" else "light"}";
name = "WhiteSur-${darkString}";
package = pkgs.whitesur-icon-theme;
};
cursorTheme = {
name = "graphite-${if dark then "dark" else "light"}";
package = pkgs.graphite-cursors;
size = 24;
name = "macOS";
package = pkgs.apple-cursor;
};
editor = {
@ -68,36 +69,24 @@ in {
};
};
niri = with colorScheme.palette; {
# TODO: make more dynamic
# catppuccin pink
accent = "#f5c2e7";
inactive = "#${base02}";
# catppuccin crust
shadow = "#11111b";
# catppuccin crust
background = "#11111b";
niri = let
colors = config.scheme.withHashtag;
in with colors; {
accent = colors.${accentBase};
inactive = "${base02}";
shadow = "${base11}";
background = if dark then "${base11}" else "${base05}";
};
waybar = builtins.concatStringsSep "\n" [
"@import \"${inputs.waybar-catppuccin}/themes/${variant}.css\";"
"@define-color accent @${accent};"
(lib.readFile ./waybar.css)
];
waybarTop = "@define-color accent @${accentBase};";
wob = with colorScheme.palette; {
wob = with config.scheme; {
borderColor = "${base04}FF";
backgroundColor = "${base01}CC";
barColor = "${base05}FF";
};
rofi = builtins.concatStringsSep "\n" [
"@theme \"${inputs.rofi-catppuccin}/themes/catppuccin-${variant}.rasi\""
"* { accent: @${accent}; }"
(lib.readFile ./rofi.rasi)
];
fuzzel = "${inputs.fuzzel-catppuccin}/themes/catppuccin-${variant}/${accent}.ini";
rofiTop = "* { accent: @${accentBase}; }";
wezterm = ''
config.color_scheme = 'Catppuccin ${pascalCase variant}'

View file

@ -10,27 +10,27 @@ element-text, element-icon , mode-switcher {
window {
height: 500px;
border: 1px;
border-radius: 1em;
border-radius: @roundingpx;
border-color: @accent;
background-color: @base;
background-color: @base00;
}
mainbox {
background-color: @base;
background-color: @base00;
}
inputbar {
margin: 10px 5px 5px 5px;
children: [prompt, entry];
background-color: @base;
background-color: @base00;
padding: 1px;
}
prompt {
background-color: transparent;
padding: 1px;
text-color: @text;
border-radius: 1.5em;
text-color: @base05;
border-radius: @roundingpx;
}
textbox-prompt-colon {
@ -41,8 +41,8 @@ textbox-prompt-colon {
entry {
padding: 1px;
margin: 0px;
text-color: @text;
background-color: @base;
text-color: @base05;
background-color: @base00;
}
listview {
@ -50,26 +50,26 @@ listview {
margin: 5px 0px 0px 10px;
columns: 1;
lines: 10;
background-color: @base;
background-color: @base00;
}
element {
padding: 1px;
background-color: @base;
text-color: @text;
background-color: @base00;
text-color: @base05;
}
element-icon {size: 12px;}
element.selected {
background-color: @surface1;
background-color: @base03;
text-color: @accent;
}
scrollbar {
width: 4px ;
border: 0;
handle-color: @text;
handle-color: @base05;
handle-width: 8px ;
padding: 0;
}
@ -78,13 +78,13 @@ mode-switcher {spacing: 0;}
button {
spacing: 0;
background-color: @surface0;
text-color: @subtext1;
background-color: @base02;
text-color: @base04;
vertical-align: 0.5;
horizontal-align: 0.5;
}
button.selected {
background-color: @base;
background-color: @base00;
text-color: @accent;
}

View file

@ -9,21 +9,21 @@ button, button:hover {
}
window#waybar {
color: @text;
background: alpha(@base, 0.9999999);
border-radius: 1em;
color: @base05;
background: alpha(@base00, 0.9999999);
border-radius: @roundingpx;
font-family: "CozetteVector", monospace, "FontAwesome 6 Free", "Noto Sans CJK";
font-size: 13px;
font-size: 13px; /* TODO: make this use proper font size */
font-style: normal;
border: 1px solid @surface0;
border: 1px solid @base02;
}
#workspaces, .modules-right box {
background-color: @surface0;
background-color: @base02;
margin: 0 0.25em;
padding: 0.15em 0.25em;
border-radius: 1em;
border-radius: @roundingpx;
}
.modules-right label.module {
margin: 0 0.5em;
@ -37,32 +37,32 @@ window#waybar {
}
#workspaces {
background-color: @surface0;
background-color: @base02;
padding: 0;
}
#workspaces button {
background-color: transparent;
color: @text;
color: @base05;
padding: 0 0.4em;
transition: none;
}
#workspaces button:nth-child(1) {
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
border-top-left-radius: @roundingpx;
border-bottom-left-radius: @roundingpx;
}
#workspaces button:nth-last-child(1) {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
border-top-right-radius: @roundingpx;
border-bottom-right-radius: @roundingpx;
}
#workspaces button.empty {
color: @overlay1;
color: @base04;
}
#workspaces button.visible {
background: @surface1;
background: @base03;
}
#workspaces button.focused {
@ -71,47 +71,44 @@ window#waybar {
#workspaces button.active {
background: @accent;
color: @surface0;
color: @base02;
}
#workspaces button:hover {
background: rgba(255, 255, 255, 0.1);
color: @text;
color: @base05;
box-shadow: none;
}
#workspaces button.active:hover {
background: @accent;
color: @surface0;
color: @base02;
}
#workspaces button.urgent {
background: @red;
color: @surface0;
background: @base08;
color: @base02;
}
#window {
background: transparent;
}
window#waybar.floating #window {
color: @pink;
}
#clock {
color: @lavender;
color: @base07;
}
#power-profiles-daemon {
color: @teal;
color: @base0C;
}
#cpu, #network {
color: @sapphire;
color: @base16;
}
#network.disabled, #network.disconnected {
color: @overlay1;
color: @base04;
}
@keyframes blink {
to {
color: @text;
color: @base05;
}
}
@ -119,15 +116,15 @@ window#waybar.floating #window {
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
color: @lavender;
color: @base07;
}
#memory.warning {
color: @peach;
color: @base09;
animation-name: blink;
animation-duration: 3s;
}
#memory.critical {
color: @maroon;
color: @base12;
animation-name: blink;
animation-duration: 2s;
}
@ -136,40 +133,40 @@ window#waybar.floating #window {
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
color: @green;
color: @base0B;
}
/* this here is ditto */
#battery.charging {
color: @green;
color: @base0B;
}
#battery.warning.discharging {
color: @peach;
color: @base09;
animation-name: blink;
animation-duration: 3s;
}
#battery.critical.discharging {
color: @maroon;
color: @base12;
animation-name: blink;
animation-duration: 2s;
}
#backlight, #custom-weather {
color: @yellow;
color: @base0A;
}
#pulseaudio {
color: @pink;
color: @base17;
}
#pulseaudio.muted {
color: @overlay1;
color: @base04;
}
#custom-power {
color: @red;
color: @base08;
}
#custom-wallpaper, #custom-rgb {
color: @overlay1;
color: @base04;
}
#privacy {
@ -178,7 +175,7 @@ window#waybar.floating #window {
}
#privacy-item {
padding: 0 1px;
color: @text;
color: @base05;
}
box#playback {
@ -188,17 +185,17 @@ box#playback {
}
#mpris {
background-color: @surface0;
background-color: @base02;
margin: 0 0.25em;
padding: 0.15em 0.5em;
border-radius: 1em;
border-radius: @roundingpx;
}
#mpris.playing {
color: @accent;
background: @surface0;
background: @base02;
}
#mpris.paused, #mpris.stopped {
color: @overlay1;
color: @base04;
}
window decoration {
@ -206,10 +203,10 @@ window decoration {
}
tooltip, window.popup menu {
background: @base;
border: 1px solid @surface2;
background: @base00;
border: 1px solid @base04;
font-size: 12px;
color: @text;
color: @base05;
}
tooltip *, window.popup {
font-family: CozetteVector, monospace;
@ -217,20 +214,20 @@ tooltip *, window.popup {
tooltip * {
padding: 0px;
margin: 0px;
color: @text;
color: @base05;
}
window.popup separator {
background-color: @surface0;
background-color: @base02;
}
window.popup menuitem:disabled {
color: @overlay1;
color: @base04;
}
window.popup menuitem:hover {
background-color: @accent;
color: @surface0;
color: @base02;
}
window.popup menuitem:hover > box {

View file

@ -12,35 +12,38 @@ in {
description = "Name of the theme to apply; see modules/desktop/themes for a list of valid options";
};
rounding = mkOpt int 10;
padding = mkOpt int 6;
dark = mkOpt bool false;
gtkTheme = {
name = mkOpt str "";
package = mkPackageOption pkgs "gtk" {};
name = mkOpt (nullOr str) null;
package = mkOpt (nullOr package) null;
};
kvantumTheme = {
name = mkOpt str "";
package = mkPackageOption pkgs "kvantum" {};
name = mkOpt (nullOr str) null;
package = mkOpt (nullOr package) null;
};
iconTheme = {
name = mkOpt str "";
package = mkPackageOption pkgs "icon" {};
name = mkOpt (nullOr str) null;
package = mkOpt (nullOr package) null;
};
cursorTheme = {
name = mkOpt str "";
package = mkPackageOption pkgs "cursor" {};
name = mkOpt (nullOr str) null;
package = mkOpt (nullOr package) null;
size = mkOpt int 24;
};
editor = {
vscode = {
colorTheme = {
name = mkOpt str "";
extension = mkPackageOption pkgs "extension" {};
name = mkOpt (nullOr str) null;
extension = mkOpt (nullOr package) null;
};
iconTheme = {
name = mkOpt str "";
extension = mkPackageOption pkgs "extension" {};
name = mkOpt (nullOr str) null;
extension = mkOpt (nullOr package) null;
};
};
};
@ -52,7 +55,7 @@ in {
background = mkOpt str "";
};
waybar = mkOpt str "";
waybarTop = mkOpt str "";
wob = {
borderColor = mkOpt (nullOr str) null;
@ -60,9 +63,7 @@ in {
barColor = mkOpt (nullOr str) null;
};
rofi = mkOpt (nullOr str) null;
fuzzel = mkOpt (nullOr str) null;
rofiTop = mkOpt (nullOr str) null;
wezterm = mkOpt (nullOr str) null;
@ -102,8 +103,8 @@ in {
hm.qt = {
enable = true;
platformTheme.name = "qtct";
style.name = "kvantum";
platformTheme.name = if (cfg.kvantumTheme.name != null) then "qtct" else "gtk3";
style.name = mkIf (cfg.kvantumTheme.name != null) "kvantum";
};
hm.home.pointerCursor = {
@ -136,7 +137,16 @@ in {
};
};
hm.programs.waybar.style = cfg.waybar;
hm.programs.waybar.style = (builtins.replaceStrings
[ "@rounding" ]
[ (builtins.toString cfg.rounding) ]
(builtins.concatStringsSep "\n" ([
cfg.waybarTop
(lib.readFile ./config/waybar.css)
]
++ lib.zipListsWith (name: hex: "@define-color base${name} #${hex};")
(builtins.genList (i: lib.fixedWidthString 2 "0" (lib.toUpper (lib.toHexString i))) 24)
config.scheme.toList)));
hm.services.wob.settings."" = {
border_color = cfg.wob.borderColor;
@ -144,18 +154,16 @@ in {
bar_color = cfg.wob.barColor;
};
# silly litle hack--rofi hm module doesn't play nice with strings
# so, we have to write the config to a file and then read it :P
# ...and then back to a string
hm.programs.rofi.theme = "${pkgs.writeTextFile {
name = "rofi-theme.rasi";
text = cfg.rofi;
}}";
hm.programs.fuzzel.settings.main = {
include = cfg.fuzzel;
icon-theme = cfg.iconTheme.name;
};
hm.programs.rofi.theme = builtins.toFile "rofi.rasi" (builtins.replaceStrings
[ "@rounding" ]
[ (builtins.toString cfg.rounding) ]
(builtins.concatStringsSep "\n" ([
cfg.rofiTop
(lib.readFile ./config/rofi.rasi)
]
++ lib.zipListsWith (name: hex: "* { base${name}: #${hex}; }")
(builtins.genList (i: lib.fixedWidthString 2 "0" (lib.toUpper (lib.toHexString i))) 24)
config.scheme.toList)));
hm.services.vicinae.settings.theme = let
themeConf = {
@ -179,7 +187,7 @@ in {
Appearance = {
icon_theme = cfg.iconTheme.name;
standard_dialogs = "xdgdesktopportal";
style = "kvantum";
style = "kvantum"; # its ok if this is always the case, override it anyway
};
Fonts = with config.modules.desktop.fonts.fonts; {
@ -187,22 +195,25 @@ in {
fixed = ''"${monospace.family},-1,${toString monospace.size},5,${toString weight},${zeros},1"'';
};
};
in {
# technically could cause issues with KDE if we use that
# not a concern for now
"kdeglobals".text = ''
[Icons]
Theme=${cfg.iconTheme.name}
'';
in mkMerge [
{
# technically could cause issues with KDE if we use that
# not a concern for now
"kdeglobals".text = ''
[Icons]
Theme=${cfg.iconTheme.name}
'';
"Kvantum/${cfg.kvantumTheme.name}".source = "${cfg.kvantumTheme.package}/share/Kvantum/${cfg.kvantumTheme.name}";
"Kvantum/kvantum.kvconfig".text = ''
[General]
theme=${cfg.kvantumTheme.name}
'';
"qt5ct/qt5ct.conf".source = iniFmt.generate "qt5ct.conf" (mkQtctConf 5);
"qt6ct/qt6ct.conf".source = iniFmt.generate "qt6ct.conf" (mkQtctConf 6);
};
"qt5ct/qt5ct.conf".source = iniFmt.generate "qt5ct.conf" (mkQtctConf 5);
"qt6ct/qt6ct.conf".source = iniFmt.generate "qt6ct.conf" (mkQtctConf 6);
}
(mkIf (cfg.kvantumTheme.name != null) {
"Kvantum/${cfg.kvantumTheme.name}".source = "${cfg.kvantumTheme.package}/share/Kvantum/${cfg.kvantumTheme.name}";
"Kvantum/kvantum.kvconfig".text = ''
[General]
theme=${cfg.kvantumTheme.name}
'';
})
];
};
}

View file

@ -0,0 +1,82 @@
{ inputs, config, lib, pkgs, system, ... }:
with lib;
let
cfg = config.modules.desktop.themes;
# TODO: gruvbox theme doesn't use these that much
accent = "pink";
accentBase = "base17";
dark = true;
darkString = if dark then "dark" else "light";
scheme = "${inputs.tt-schemes}/base24/gruvbox-${if dark then "dark" else "light"}.yaml";
pascalCase = s: (toUpper (substring 0 1 s)) + (toLower (substring 1 (stringLength s) s));
in {
config = mkIf (cfg.active == "gruvbox") {
scheme = scheme;
modules.desktop.themes = {
dark = dark;
rounding = 0;
gtkTheme = {
name = "Gruvbox-${pascalCase accent}-${pascalCase darkString}-Compact";
package = pkgs.gruvbox-gtk-theme.override {
colorVariants = [ darkString ];
themeVariants = [ accent ];
tweakVariants = [ "macos" ];
sizeVariants = [ "compact" ];
};
};
iconTheme = {
name = "Gruvbox-Plus-${pascalCase darkString}";
package = pkgs.gruvbox-plus-icons;
};
cursorTheme = {
name = "macOS";
package = pkgs.apple-cursor;
};
editor = {
vscode = {
colorTheme = {
name = "Gruvbox ${pascalCase darkString} Medium";
extension = pkgs.vscode-extensions.jdinhlife.gruvbox;
};
iconTheme = {
name = "material-icon-theme";
extension = pkgs.vscode-extensions.pkief.material-icon-theme;
};
};
};
niri = let
colors = config.scheme.withHashtag;
in with colors; {
accent = colors.${accentBase};
inactive = "${base02}";
shadow = "${base11}";
background = if dark then "${base11}" else "${base05}";
};
waybarTop = "@define-color accent @${accentBase};";
wob = with config.scheme; {
borderColor = "${base04}FF";
backgroundColor = "${base01}CC";
barColor = "${base05}FF";
};
rofiTop = "* { accent: @${accentBase}; }";
wezterm = ''
config.color_scheme = 'Gruvbox${pascalCase darkString}'
'';
vicinae = "gruvbox-${if dark then "dark" else "light"}";
};
};
}