mirror of
https://github.com/nickolaj-jepsen/nixos.git
synced 2026-01-22 00:01:58 +01:00
refactor: centralize theme
This commit is contained in:
parent
89cefcd610
commit
234ab50a2c
10 changed files with 253 additions and 180 deletions
|
|
@ -8,5 +8,6 @@ _: {
|
|||
./home-manager.nix
|
||||
./nix.nix
|
||||
./secrets.nix
|
||||
./theme.nix
|
||||
];
|
||||
}
|
||||
|
|
|
|||
61
modules/base/theme.nix
Normal file
61
modules/base/theme.nix
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
# Centralized theme configuration (Flexoki-inspired)
|
||||
# See: https://stephango.com/flexoki
|
||||
{lib, ...}: {
|
||||
options.fireproof.theme = let
|
||||
mkColorOption = default: description:
|
||||
lib.mkOption {
|
||||
type = lib.types.str;
|
||||
inherit default description;
|
||||
example = default;
|
||||
};
|
||||
in {
|
||||
colors = {
|
||||
# Background colors
|
||||
bg = mkColorOption "1C1B1A" "Primary background color";
|
||||
bgAlt = mkColorOption "282726" "Alternative background color";
|
||||
|
||||
# Foreground colors
|
||||
fg = mkColorOption "DAD8CE" "Primary foreground/text color";
|
||||
fgAlt = mkColorOption "B7B5AC" "Alternative foreground color";
|
||||
|
||||
# UI colors
|
||||
muted = mkColorOption "878580" "Muted/disabled text color";
|
||||
ui = mkColorOption "343331" "UI element background";
|
||||
uiAlt = mkColorOption "403E3C" "Alternative UI element background";
|
||||
|
||||
# Base colors
|
||||
black = mkColorOption "100F0F" "Black (darkest)";
|
||||
white = mkColorOption "DAD8CE" "White (same as fg)";
|
||||
whiteAlt = mkColorOption "F2F0E5" "Bright white";
|
||||
|
||||
# Accent color
|
||||
accent = mkColorOption "CF6A4C" "Primary accent color";
|
||||
|
||||
# Semantic colors
|
||||
red = mkColorOption "D14D41" "Red (errors, destructive)";
|
||||
redAlt = mkColorOption "AF3029" "Dark red";
|
||||
orange = mkColorOption "DA702C" "Orange (warnings)";
|
||||
orangeAlt = mkColorOption "BC5215" "Dark orange";
|
||||
yellow = mkColorOption "D0A215" "Yellow (caution)";
|
||||
yellowAlt = mkColorOption "AD8301" "Dark yellow";
|
||||
green = mkColorOption "879A39" "Green (success)";
|
||||
greenAlt = mkColorOption "66800B" "Dark green";
|
||||
cyan = mkColorOption "3AA99F" "Cyan";
|
||||
cyanAlt = mkColorOption "24837B" "Dark cyan";
|
||||
blue = mkColorOption "4385BE" "Blue (info, links)";
|
||||
blueAlt = mkColorOption "205EA6" "Dark blue";
|
||||
purple = mkColorOption "8B7EC8" "Purple";
|
||||
purpleAlt = mkColorOption "5E409D" "Dark purple";
|
||||
magenta = mkColorOption "CE5D97" "Magenta";
|
||||
magentaAlt = mkColorOption "A02F6F" "Dark magenta";
|
||||
};
|
||||
|
||||
# HSL variants for tools that need them (like Glance)
|
||||
hsl = {
|
||||
bg = mkColorOption "30 4 11" "Background in HSL";
|
||||
accent = mkColorOption "14 56 55" "Accent in HSL";
|
||||
green = mkColorOption "72 59 38" "Green in HSL";
|
||||
red = mkColorOption "5 64 54" "Red in HSL";
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
./greetd.nix
|
||||
./niri.nix
|
||||
./qt.nix
|
||||
./gtk/default.nix
|
||||
./gtk.nix
|
||||
./dms/default.nix
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,29 +4,30 @@
|
|||
...
|
||||
}: let
|
||||
inherit (config.fireproof) username;
|
||||
c = config.fireproof.theme.colors;
|
||||
in {
|
||||
config = lib.mkIf config.fireproof.desktop.enable {
|
||||
fireproof.home-manager = {
|
||||
home.file.".config/DankMaterialShell/colors.json".text = builtins.toJSON {
|
||||
name = "custom";
|
||||
primary = "#CF6A4C";
|
||||
primaryText = "#F2F0E5";
|
||||
primaryContainer = "#403E3C";
|
||||
secondary = "#CE5D97";
|
||||
surface = "#343331";
|
||||
surfaceText = "#DAD8CE";
|
||||
surfaceVariant = "#1C1B1A";
|
||||
surfaceVariantText = "#B7B5AC";
|
||||
surfaceTint = "#CF6A4C";
|
||||
background = "#100F0F";
|
||||
backgroundText = "#F2F0E5";
|
||||
outline = "#878580";
|
||||
surfaceContainer = "#1C1B1A";
|
||||
surfaceContainerHigh = "#282726";
|
||||
surfaceContainerHighest = "#403E3C";
|
||||
error = "#D14D41";
|
||||
warning = "#D0A215";
|
||||
info = "#4385BE";
|
||||
primary = "#${c.accent}";
|
||||
primaryText = "#${c.whiteAlt}";
|
||||
primaryContainer = "#${c.uiAlt}";
|
||||
secondary = "#${c.magenta}";
|
||||
surface = "#${c.ui}";
|
||||
surfaceText = "#${c.fg}";
|
||||
surfaceVariant = "#${c.bg}";
|
||||
surfaceVariantText = "#${c.fgAlt}";
|
||||
surfaceTint = "#${c.accent}";
|
||||
background = "#${c.black}";
|
||||
backgroundText = "#${c.whiteAlt}";
|
||||
outline = "#${c.muted}";
|
||||
surfaceContainer = "#${c.bg}";
|
||||
surfaceContainerHigh = "#${c.bgAlt}";
|
||||
surfaceContainerHighest = "#${c.uiAlt}";
|
||||
error = "#${c.red}";
|
||||
warning = "#${c.yellow}";
|
||||
info = "#${c.blue}";
|
||||
matugen_type = "scheme-expressive";
|
||||
};
|
||||
|
||||
|
|
|
|||
138
modules/desktop/gtk.nix
Normal file
138
modules/desktop/gtk.nix
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
{
|
||||
config,
|
||||
lib,
|
||||
pkgs,
|
||||
...
|
||||
}: let
|
||||
c = config.fireproof.theme.colors;
|
||||
|
||||
# Generate GTK CSS from centralized theme
|
||||
themeCss = ''
|
||||
@define-color bg #${c.bg};
|
||||
@define-color bg-alt #${c.bgAlt};
|
||||
@define-color fg #${c.fg};
|
||||
@define-color fg-alt #${c.fgAlt};
|
||||
@define-color muted #${c.muted};
|
||||
@define-color ui #${c.ui};
|
||||
@define-color ui-alt #${c.uiAlt};
|
||||
@define-color black #${c.black};
|
||||
@define-color accent #${c.accent};
|
||||
@define-color red #${c.red};
|
||||
@define-color red-alt #${c.redAlt};
|
||||
@define-color orange #${c.orange};
|
||||
@define-color orange-alt #${c.orangeAlt};
|
||||
@define-color yellow #${c.yellow};
|
||||
@define-color yellow-alt #${c.yellowAlt};
|
||||
@define-color green #${c.green};
|
||||
@define-color green-alt #${c.greenAlt};
|
||||
@define-color cyan #${c.cyan};
|
||||
@define-color cyan-alt #${c.cyanAlt};
|
||||
@define-color blue #${c.blue};
|
||||
@define-color blue-alt #${c.blueAlt};
|
||||
@define-color purple #${c.purple};
|
||||
@define-color purple-alt #${c.purpleAlt};
|
||||
@define-color magenta #${c.magenta};
|
||||
@define-color magenta-alt #${c.magentaAlt};
|
||||
@define-color white #${c.white};
|
||||
@define-color white-alt #${c.whiteAlt};
|
||||
|
||||
/* Adwaita stuff */
|
||||
@define-color accent_color @accent;
|
||||
@define-color accent_bg_color @accent;
|
||||
@define-color accent_fg_color @fg;
|
||||
|
||||
@define-color window_bg_color @bg;
|
||||
@define-color window_fg_color @fg;
|
||||
|
||||
@define-color headerbar_bg_color @bg-alt;
|
||||
@define-color headerbar_fg_color @fg;
|
||||
|
||||
@define-color popover_bg_color @bg-alt;
|
||||
@define-color popover_fg_color @fg;
|
||||
|
||||
@define-color dialog_bg_color @popover_bg_color;
|
||||
@define-color dialog_fg_color @popover_fg_color;
|
||||
|
||||
@define-color sidebar_bg_color @bg-alt;
|
||||
@define-color sidebar_fg_color @fg;
|
||||
@define-color sidebar_backdrop_color @bg-alt;
|
||||
@define-color sidebar_shade_color rgba(0, 0, 0, 0.25);
|
||||
@define-color sidebar_border_color rgba(0, 0, 0, 0.36);
|
||||
|
||||
@define-color secondary_sidebar_bg_color @sidebar_backdrop_color;
|
||||
@define-color secondary_sidebar_fg_color @fg;
|
||||
@define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
|
||||
@define-color secondary_sidebar_shade_color @sidebar_shade_color;
|
||||
@define-color secondary_sidebar_border_color @sidebar_border_color;
|
||||
|
||||
@define-color view_bg_color @bg;
|
||||
@define-color view_fg_color @fg;
|
||||
|
||||
@define-color card_bg_color @bg-alt;
|
||||
@define-color card_fg_color @fg;
|
||||
|
||||
@define-color thumbnail_bg_color @bg-alt;
|
||||
@define-color thumbnail_fg_color @fg;
|
||||
|
||||
@define-color warning_bg_color @red;
|
||||
@define-color warning_fg_color @fg;
|
||||
@define-color warning_color @red;
|
||||
@define-color error_bg_color @red;
|
||||
@define-color error_fg_color @fg;
|
||||
@define-color error_color @red;
|
||||
@define-color success_bg_color @green;
|
||||
@define-color success_fg_color @fg;
|
||||
@define-color success_color @green;
|
||||
@define-color destructive_bg_color @red;
|
||||
@define-color destructive_fg_color @fg;
|
||||
@define-color destructive_color @red;
|
||||
'';
|
||||
in {
|
||||
config = lib.mkIf config.fireproof.desktop.enable {
|
||||
environment.systemPackages = with pkgs; [
|
||||
nautilus
|
||||
gnome-photos
|
||||
];
|
||||
|
||||
services.gvfs.enable = true;
|
||||
programs = {
|
||||
dconf.enable = true;
|
||||
nautilus-open-any-terminal.enable = true;
|
||||
seahorse.enable = true;
|
||||
evince.enable = true;
|
||||
};
|
||||
|
||||
services.gnome.sushi.enable = true;
|
||||
|
||||
fireproof.home-manager = {
|
||||
home.pointerCursor = {
|
||||
gtk.enable = true;
|
||||
name = "Adwaita";
|
||||
package = pkgs.adwaita-icon-theme;
|
||||
size = 24;
|
||||
};
|
||||
|
||||
gtk = {
|
||||
enable = true;
|
||||
theme = {
|
||||
name = "adw-gtk3-dark";
|
||||
package = pkgs.adw-gtk3;
|
||||
};
|
||||
iconTheme = {
|
||||
name = "Qogir-dark";
|
||||
package = pkgs.qogir-icon-theme;
|
||||
};
|
||||
|
||||
gtk3.extraConfig = {gtk-application-prefer-dark-theme = true;};
|
||||
gtk3.extraCss = themeCss;
|
||||
|
||||
gtk4.extraConfig = {gtk-application-prefer-dark-theme = true;};
|
||||
gtk4.extraCss = themeCss;
|
||||
};
|
||||
dconf = {
|
||||
enable = true;
|
||||
settings."org/gnome/desktop/interface".color-scheme = "prefer-dark";
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
{
|
||||
config,
|
||||
lib,
|
||||
pkgs,
|
||||
...
|
||||
}: {
|
||||
config = lib.mkIf config.fireproof.desktop.enable {
|
||||
environment.systemPackages = with pkgs; [
|
||||
nautilus
|
||||
gnome-photos
|
||||
];
|
||||
|
||||
services.gvfs.enable = true;
|
||||
programs = {
|
||||
dconf.enable = true;
|
||||
nautilus-open-any-terminal.enable = true;
|
||||
seahorse.enable = true;
|
||||
evince.enable = true;
|
||||
};
|
||||
|
||||
services.gnome.sushi.enable = true;
|
||||
|
||||
fireproof.home-manager = {
|
||||
home.pointerCursor = {
|
||||
gtk.enable = true;
|
||||
name = "Adwaita";
|
||||
package = pkgs.adwaita-icon-theme;
|
||||
size = 24;
|
||||
};
|
||||
|
||||
gtk = {
|
||||
enable = true;
|
||||
theme = {
|
||||
name = "adw-gtk3-dark";
|
||||
package = pkgs.adw-gtk3;
|
||||
};
|
||||
iconTheme = {
|
||||
name = "Qogir-dark";
|
||||
package = pkgs.qogir-icon-theme;
|
||||
};
|
||||
|
||||
gtk3.extraConfig = {gtk-application-prefer-dark-theme = true;};
|
||||
gtk3.extraCss = builtins.readFile ./theme.css;
|
||||
|
||||
gtk4.extraConfig = {gtk-application-prefer-dark-theme = true;};
|
||||
gtk4.extraCss = builtins.readFile ./theme.css;
|
||||
};
|
||||
dconf = {
|
||||
enable = true;
|
||||
settings."org/gnome/desktop/interface".color-scheme = "prefer-dark";
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
@define-color bg #1C1B1A;
|
||||
@define-color bg-alt #282726;
|
||||
@define-color fg #DAD8CE;
|
||||
@define-color fg-alt #B7B5AC;
|
||||
@define-color muted #878580;
|
||||
@define-color ui #343331;
|
||||
@define-color ui-alt #403E3C;
|
||||
@define-color black #100F0F;
|
||||
@define-color accent #CF6A4C;
|
||||
@define-color red #D14D41;
|
||||
@define-color red-alt #AF3029;
|
||||
@define-color orange #DA702C;
|
||||
@define-color orange-alt #BC5215;
|
||||
@define-color yellow #D0A215;
|
||||
@define-color yellow-alt #AD8301;
|
||||
@define-color green #879A39;
|
||||
@define-color green-alt #66800B;
|
||||
@define-color cyan #3AA99F;
|
||||
@define-color cyan-alt #24837B;
|
||||
@define-color blue #4385BE;
|
||||
@define-color blue-alt #205EA6;
|
||||
@define-color purple #8B7EC8;
|
||||
@define-color purple-alt #5E409D;
|
||||
@define-color magenta #CE5D97;
|
||||
@define-color magenta-alt #A02F6F;
|
||||
@define-color white #DAD8CE;
|
||||
@define-color white-alt #F2F0E5;
|
||||
|
||||
/* Adwaita stuff */
|
||||
@define-color accent_color @accent;
|
||||
@define-color accent_bg_color @accent;
|
||||
@define-color accent_fg_color @fg;
|
||||
|
||||
@define-color window_bg_color @bg;
|
||||
@define-color window_fg_color @fg;
|
||||
|
||||
@define-color headerbar_bg_color @bg-alt;
|
||||
@define-color headerbar_fg_color @fg;
|
||||
|
||||
@define-color popover_bg_color @bg-alt;
|
||||
@define-color popover_fg_color @fg;
|
||||
|
||||
@define-color dialog_bg_color @popover_bg_color;
|
||||
@define-color dialog_fg_color @popover_fg_color;
|
||||
|
||||
@define-color sidebar_bg_color @bg-alt;
|
||||
@define-color sidebar_fg_color @fg;
|
||||
@define-color sidebar_backdrop_color @bg-alt;
|
||||
@define-color sidebar_shade_color rgba(0, 0, 0, 0.25);
|
||||
@define-color sidebar_border_color rgba(0, 0, 0, 0.36);
|
||||
|
||||
@define-color secondary_sidebar_bg_color @sidebar_backdrop_color;
|
||||
@define-color secondary_sidebar_fg_color @fg;
|
||||
@define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
|
||||
@define-color secondary_sidebar_shade_color @sidebar_shade_color;
|
||||
@define-color secondary_sidebar_border_color @sidebar_border_color;
|
||||
|
||||
@define-color view_bg_color @bg;
|
||||
@define-color view_fg_color @fg;
|
||||
|
||||
@define-color card_bg_color @bg-alt;
|
||||
@define-color card_fg_color @fg;
|
||||
|
||||
@define-color thumbnail_bg_color @bg-alt;
|
||||
@define-color thumbnail_fg_color @fg;
|
||||
|
||||
@define-color warning_bg_color @red;
|
||||
@define-color warning_fg_color @fg;
|
||||
@define-color warning_color @red;
|
||||
@define-color error_bg_color @red;
|
||||
@define-color error_fg_color @fg;
|
||||
@define-color error_color @red;
|
||||
@define-color success_bg_color @green;
|
||||
@define-color success_fg_color @fg;
|
||||
@define-color success_color @green;
|
||||
@define-color destructive_bg_color @red;
|
||||
@define-color destructive_fg_color @fg;
|
||||
@define-color destructive_color @red;
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
inputs,
|
||||
...
|
||||
}: let
|
||||
c = config.fireproof.theme.colors;
|
||||
hasMonitors = config.monitors != [];
|
||||
primaryMonitorName =
|
||||
if hasMonitors
|
||||
|
|
@ -41,12 +42,12 @@ in {
|
|||
layout = {
|
||||
gaps = 10;
|
||||
focus-ring.enable = false;
|
||||
insert-hint.display.color = "#CF6A4C";
|
||||
insert-hint.display.color = "#${c.accent}";
|
||||
border = {
|
||||
enable = true;
|
||||
width = 2;
|
||||
active.color = "#CF6A4C";
|
||||
inactive.color = "#343331";
|
||||
active.color = "#${c.accent}";
|
||||
inactive.color = "#${c.ui}";
|
||||
};
|
||||
tab-indicator = {
|
||||
hide-when-single-tab = true;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
...
|
||||
}:
|
||||
lib.mkIf config.fireproof.homelab.enable (let
|
||||
hsl = config.fireproof.theme.hsl;
|
||||
domain = "glance.nickolaj.com";
|
||||
port = 8088;
|
||||
|
||||
|
|
@ -50,10 +51,10 @@ in {
|
|||
base-url = "https://${domain}";
|
||||
};
|
||||
theme = {
|
||||
background-color = "30 4 11"; # #1C1B1A (HSL)
|
||||
primary-color = "14 56 55"; # #CF6A4C accent (HSL)
|
||||
positive-color = "72 59 38"; # #879A39 green (HSL)
|
||||
negative-color = "5 64 54"; # #D14D41 red (HSL)
|
||||
background-color = hsl.bg;
|
||||
primary-color = hsl.accent;
|
||||
positive-color = hsl.green;
|
||||
negative-color = hsl.red;
|
||||
contrast-multiplier = 1.1;
|
||||
text-saturation-multiplier = 1.0;
|
||||
custom-css-file = "https://${domain}/custom.css";
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
lib,
|
||||
pkgs,
|
||||
...
|
||||
}: {
|
||||
}: let
|
||||
c = config.fireproof.theme.colors;
|
||||
in {
|
||||
config = lib.mkIf config.fireproof.desktop.enable {
|
||||
environment.systemPackages = with pkgs; [
|
||||
ghostty
|
||||
|
|
@ -22,29 +24,29 @@
|
|||
};
|
||||
themes = {
|
||||
fireproof = {
|
||||
background = "1C1B1A";
|
||||
cursor-color = "DAD8CE";
|
||||
foreground = "DAD8CE";
|
||||
background = c.bg;
|
||||
cursor-color = c.fg;
|
||||
foreground = c.fg;
|
||||
palette = [
|
||||
"0=#100F0F"
|
||||
"1=#AF3029"
|
||||
"2=#66800B"
|
||||
"3=#AD8301"
|
||||
"4=#205EA6"
|
||||
"5=#A02F6F"
|
||||
"6=#24837B"
|
||||
"7=#DAD8CE"
|
||||
"8=#878580"
|
||||
"9=#D14D41"
|
||||
"10=#879A39"
|
||||
"11=#D0A215"
|
||||
"12=#4385BE"
|
||||
"13=#CE5D97"
|
||||
"14=#3AA99F"
|
||||
"15=#F2F0E5"
|
||||
"0=#${c.black}"
|
||||
"1=#${c.redAlt}"
|
||||
"2=#${c.greenAlt}"
|
||||
"3=#${c.yellowAlt}"
|
||||
"4=#${c.blueAlt}"
|
||||
"5=#${c.magentaAlt}"
|
||||
"6=#${c.cyanAlt}"
|
||||
"7=#${c.fg}"
|
||||
"8=#${c.muted}"
|
||||
"9=#${c.red}"
|
||||
"10=#${c.green}"
|
||||
"11=#${c.yellow}"
|
||||
"12=#${c.blue}"
|
||||
"13=#${c.magenta}"
|
||||
"14=#${c.cyan}"
|
||||
"15=#${c.whiteAlt}"
|
||||
];
|
||||
selection-background = "403E3C";
|
||||
selection-foreground = "DAD8CE";
|
||||
selection-background = c.uiAlt;
|
||||
selection-foreground = c.fg;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue