From 59b9fac674530a48fcd3a19bc7acd315295bcca6 Mon Sep 17 00:00:00 2001 From: Evie Litherland-Smith Date: Tue, 20 Feb 2024 19:31:21 +0000 Subject: [PATCH] Start converting theme to use a centrally defined accent colour accentColour defined in flake.nix and passed via specialArgs / extraSpecialArgs to where it's needed Still need to change the mustache configs but otherwise I think everything has been changed --- flake.nix | 12 +- home/avizo/default.nix | 11 +- home/hyprland/default.nix | 6 +- home/rofi/default.nix | 3 +- home/swaync/default.nix | 412 +++++++++++++++++++------------------- 5 files changed, 231 insertions(+), 213 deletions(-) diff --git a/flake.nix b/flake.nix index 29eb7284..76faaec4 100644 --- a/flake.nix +++ b/flake.nix @@ -25,6 +25,9 @@ system = "x86_64-linux"; group = "users"; shell = "zsh"; + wallpaper = ./wallpapers/space.png; + base16Scheme = ./schemes/modus-vivendi-tinted.yaml; + accentColour = "base0E"; # magenta systemModules = [./system/hyprland.nix]; serviceModules = []; homeModules = [./home/hyprland/default.nix]; @@ -36,12 +39,15 @@ system ? default.system, group ? default.group, shell ? default.shell, + wallpaper ? default.wallpaper, + base16Scheme ? default.base16Scheme, + accentColour ? default.accentColour, systemModules ? default.systemModules, serviceModules ? default.serviceModules, homeModules ? default.homeModules, stateVersion ? default.stateVersion, }: let - specialArgs = {inherit hostName user group shell;}; + specialArgs = {inherit hostName user group shell accentColour;}; in nixpkgs.lib.nixosSystem { inherit system specialArgs; @@ -152,14 +158,14 @@ firewall.enable = true; }; stylix = { + inherit base16Scheme; autoEnable = false; targets = { chromium.enable = true; console.enable = true; fish.enable = true; }; - image = ./wallpapers/sweet/Sweet-space.png; - base16Scheme = ./schemes/modus-vivendi-tinted.yaml; + image = wallpaper; polarity = "dark"; opacity = { applications = 0.85; diff --git a/home/avizo/default.nix b/home/avizo/default.nix index ba63393f..8f2f11bc 100644 --- a/home/avizo/default.nix +++ b/home/avizo/default.nix @@ -1,13 +1,18 @@ -{config, ...}: { +{ + config, + accentColour, + ... +}: { services.avizo = { enable = true; - settings.default = with config.lib.stylix.colors; let + settings.default = with config.lib.stylix; + with colors; let opacity = kind: (toString config.stylix.opacity.${kind}); in { background = "rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, ${opacity "popups"})"; bar-bg-color = "rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, ${opacity "popups"})"; bar-fg-color = "rgba(${base05-rgb-r}, ${base05-rgb-g}, ${base05-rgb-b}, ${opacity "desktop"})"; - border-color = "rgba(${base0E-rgb-r}, ${base0E-rgb-g}, ${base0E-rgb-b}, ${opacity "desktop"})"; + border-color = "rgba(${colors."${accentColour}-rgb-r"}, ${colors."${accentColour}-rgb-g"}, ${colors."${accentColour}-rgb-b"}, ${opacity "desktop"})"; image-opacity = opacity "desktop"; }; }; diff --git a/home/hyprland/default.nix b/home/hyprland/default.nix index e4120ecf..8857db03 100644 --- a/home/hyprland/default.nix +++ b/home/hyprland/default.nix @@ -2,6 +2,7 @@ config, lib, pkgs, + accentColour, ... }: { stylix.targets.xresources.enable = true; @@ -123,8 +124,9 @@ smart_resizing = false; drop_at_cursor = true; }; - general = with config.lib.stylix.colors; { - "col.active_border" = "rgb(${magenta})"; + general = with config.lib.stylix; + with colors; { + "col.active_border" = "rgb(${colors.${accentColour}})"; "col.inactive_border" = "rgb(${base03})"; gaps_in = 5; gaps_out = 10; diff --git a/home/rofi/default.nix b/home/rofi/default.nix index 6718d2e4..29ca72d6 100644 --- a/home/rofi/default.nix +++ b/home/rofi/default.nix @@ -1,6 +1,7 @@ { config, pkgs, + accentColour, ... }: { programs.rofi = { @@ -38,7 +39,7 @@ bg2 = mkLiteral "rgba (${base01-rgb-r}, ${base01-rgb-g}, ${base01-rgb-b}, 80%)"; fg = mkLiteral withHashtag.base05; fg2 = mkLiteral withHashtag.base04; - border = mkLiteral withHashtag.magenta; + border = mkLiteral withHashtag.${accentColour}; blue = mkLiteral withHashtag.blue; in { "*" = { diff --git a/home/swaync/default.nix b/home/swaync/default.nix index 6cad6457..dcf473fd 100644 --- a/home/swaync/default.nix +++ b/home/swaync/default.nix @@ -1,347 +1,351 @@ -{config, ...}: { +{ + config, + accentColour, + ... +}: { xdg.configFile."swaync/style.css".text = with config.lib.stylix.colors; '' * { - all: unset; - font-size: ${toString config.stylix.fonts.sizes.desktop}px; - font-family: "${config.stylix.fonts.monospace.name}"; - transition: 200ms; + all: unset; + font-size: ${toString config.stylix.fonts.sizes.desktop}px; + font-family: "${config.stylix.fonts.monospace.name}"; + transition: 200ms; } .floating-notifications.background .notification-row .notification-background { - border-radius: 5px; - border: 1px solid ${withHashtag.magenta}; - margin: 18px; - background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5); - color: ${withHashtag.base05}; - padding: 0; + border-radius: 5px; + border: 1px solid ${withHashtag.${accentColour}}; + margin: 18px; + background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5); + color: ${withHashtag.base05}; + padding: 0; } .floating-notifications.background - .notification-row - .notification-background - .notification { - padding: 7px; - border-radius: 5px; + .notification-row + .notification-background + .notification { + padding: 7px; + border-radius: 5px; } .floating-notifications.background - .notification-row - .notification-background - .notification - .notification-content { - margin: 7px; + .notification-row + .notification-background + .notification + .notification-content { + margin: 7px; } .floating-notifications.background - .notification-row - .notification-background - .notification - .notification-content - .summary { - color: ${withHashtag.base05}; + .notification-row + .notification-background + .notification + .notification-content + .summary { + color: ${withHashtag.base05}; } .floating-notifications.background - .notification-row - .notification-background - .notification - .notification-content - .time { - color: ${withHashtag.base04}; + .notification-row + .notification-background + .notification + .notification-content + .time { + color: ${withHashtag.base04}; } .floating-notifications.background - .notification-row - .notification-background - .notification - .notification-content - .body { - color: ${withHashtag.base05}; + .notification-row + .notification-background + .notification + .notification-content + .body { + color: ${withHashtag.base05}; } .floating-notifications.background - .notification-row - .notification-background - .notification - > *:last-child - > * { - min-height: 3.4em; + .notification-row + .notification-background + .notification + > *:last-child + > * { + min-height: 3.4em; } .floating-notifications.background - .notification-row - .notification-background - .notification - > *:last-child - > * - .notification-action { - border-radius: 5px; - background-color: ${withHashtag.base01}; - color: ${withHashtag.base05}; - margin: 7px; + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action { + border-radius: 5px; + background-color: ${withHashtag.base01}; + color: ${withHashtag.base05}; + margin: 7px; } .floating-notifications.background - .notification-row - .notification-background - .notification - > *:last-child - > * - .notification-action:hover { - background-color: ${withHashtag.base01}; - color: ${withHashtag.base05}; + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action:hover { + background-color: ${withHashtag.base01}; + color: ${withHashtag.base05}; } .floating-notifications.background - .notification-row - .notification-background - .notification - > *:last-child - > * - .notification-action:active { - background-color: ${withHashtag.blue}; - color: ${withHashtag.base00}; + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action:active { + background-color: ${withHashtag.blue}; + color: ${withHashtag.base00}; } .floating-notifications.background - .notification-row - .notification-background - .close-button { - margin: 7px; - padding: 2px; - border-radius: 5px; - background-color: ${withHashtag.red}; - color: ${withHashtag.base00}; + .notification-row + .notification-background + .close-button { + margin: 7px; + padding: 2px; + border-radius: 5px; + background-color: ${withHashtag.red}; + color: ${withHashtag.base00}; } .floating-notifications.background - .notification-row - .notification-background - .close-button:hover { - background-color: ${withHashtag.red}; - color: ${withHashtag.base00}; + .notification-row + .notification-background + .close-button:hover { + background-color: ${withHashtag.red}; + color: ${withHashtag.base00}; } .floating-notifications.background - .notification-row - .notification-background - .close-button:active { - background-color: ${withHashtag.red}; - color: ${withHashtag.base00}; + .notification-row + .notification-background + .close-button:active { + background-color: ${withHashtag.red}; + color: ${withHashtag.base00}; } .control-center { - border-radius: 5px; - border: 1px solid ${withHashtag.magenta}; - margin: 18px; - background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5); - color: ${withHashtag.base05}; - padding: 14px; + border-radius: 5px; + border: 1px solid ${withHashtag.${accentColour}}; + margin: 18px; + background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5); + color: ${withHashtag.base05}; + padding: 14px; } .control-center .widget-title { - color: ${withHashtag.base05}; - font-size: 1.3em; + color: ${withHashtag.base05}; + font-size: 1.3em; } .control-center .widget-title button { - border-radius: 7px; - background-color: ${withHashtag.base01}; - color: ${withHashtag.base05}; - padding: 8px; + border-radius: 7px; + background-color: ${withHashtag.base01}; + color: ${withHashtag.base05}; + padding: 8px; } .control-center .widget-title button:hover { - background-color: ${withHashtag.base02}; - color: ${withHashtag.base05}; + background-color: ${withHashtag.base02}; + color: ${withHashtag.base05}; } .control-center .widget-title button:active { - background-color: ${withHashtag.base03}; - color: ${withHashtag.base05}; + background-color: ${withHashtag.base03}; + color: ${withHashtag.base05}; } .control-center .notification-row .notification-background { - border-radius: 5px; - background-color: ${withHashtag.base01}; - color: ${withHashtag.base05}; - margin-top: 14px; + border-radius: 5px; + background-color: ${withHashtag.base01}; + color: ${withHashtag.base05}; + margin-top: 14px; } .control-center .notification-row .notification-background .notification { - padding: 7px; - border-radius: 7px; + padding: 7px; + border-radius: 7px; } .control-center - .notification-row - .notification-background - .notification - .notification-content { - margin: 7px; + .notification-row + .notification-background + .notification + .notification-content { + margin: 7px; } .control-center - .notification-row - .notification-background - .notification - .notification-content - .summary { - color: ${withHashtag.base05}; + .notification-row + .notification-background + .notification + .notification-content + .summary { + color: ${withHashtag.base05}; } .control-center - .notification-row - .notification-background - .notification - .notification-content - .time { - color: ${withHashtag.base04}; + .notification-row + .notification-background + .notification + .notification-content + .time { + color: ${withHashtag.base04}; } .control-center - .notification-row - .notification-background - .notification - .notification-content - .body { - color: ${withHashtag.base05}; + .notification-row + .notification-background + .notification + .notification-content + .body { + color: ${withHashtag.base05}; } .control-center - .notification-row - .notification-background - .notification - > *:last-child - > * { - min-height: 3.4em; + .notification-row + .notification-background + .notification + > *:last-child + > * { + min-height: 3.4em; } .control-center - .notification-row - .notification-background - .notification - > *:last-child - > * - .notification-action { - border-radius: 7px; - background-color: ${withHashtag.base00}; - color: ${withHashtag.base05}; - margin: 7px; + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action { + border-radius: 7px; + background-color: ${withHashtag.base00}; + color: ${withHashtag.base05}; + margin: 7px; } .control-center - .notification-row - .notification-background - .notification - > *:last-child - > * - .notification-action:hover { - background-color: ${withHashtag.base01};; - color: ${withHashtag.base05}; + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action:hover { + background-color: ${withHashtag.base01};; + color: ${withHashtag.base05}; } .control-center - .notification-row - .notification-background - .notification - > *:last-child - > * - .notification-action:active { - background-color: ${withHashtag.blue}; - color: ${withHashtag.base05}; + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action:active { + background-color: ${withHashtag.blue}; + color: ${withHashtag.base05}; } .control-center .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - background-color: ${withHashtag.red}; - color: ${withHashtag.base00}; + margin: 7px; + padding: 2px; + border-radius: 6.3px; + background-color: ${withHashtag.red}; + color: ${withHashtag.base00}; } .control-center .notification-row .notification-background .close-button:hover { - background-color: ${withHashtag.red}; - color: ${withHashtag.base00}; + background-color: ${withHashtag.red}; + color: ${withHashtag.base00}; } .control-center - .notification-row - .notification-background - .close-button:active { - background-color: ${withHashtag.red}; - color: ${withHashtag.base00}; + .notification-row + .notification-background + .close-button:active { + background-color: ${withHashtag.red}; + color: ${withHashtag.base00}; } .control-center .notification-row .notification-background:hover { - background-color: ${withHashtag.base00}; - color: ${withHashtag.base05}; + background-color: ${withHashtag.base00}; + color: ${withHashtag.base05}; } .control-center .notification-row .notification-background:active { - background-color: ${withHashtag.blue}; - color: ${withHashtag.base05}; + background-color: ${withHashtag.blue}; + color: ${withHashtag.base05}; } progressbar, progress, trough { - border-radius: 12.6px; + border-radius: 12.6px; } .notification.critical progress { - background-color: ${withHashtag.red}; + background-color: ${withHashtag.red}; } .notification.low progress, .notification.normal progress { - background-color: ${withHashtag.blue}; + background-color: ${withHashtag.blue}; } trough { - background-color: ${withHashtag.base00}; + background-color: ${withHashtag.base00}; } .control-center trough { - background-color: ${withHashtag.base03}; + background-color: ${withHashtag.base03}; } .control-center-dnd { - margin-top: 5px; - border-radius: 8px; - background: ${withHashtag.base00}; - border: 1px solid ${withHashtag.base03}; + margin-top: 5px; + border-radius: 8px; + background: ${withHashtag.base00}; + border: 1px solid ${withHashtag.base03}; } .control-center-dnd:checked { - background: ${withHashtag.base00}; + background: ${withHashtag.base00}; } .control-center-dnd slider { - background: ${withHashtag.base03}; - border-radius: 8px; + background: ${withHashtag.base03}; + border-radius: 8px; } .widget-dnd { - margin: 0px; - font-size: 1.1rem; + margin: 0px; + font-size: 1.1rem; } .widget-dnd > switch { - font-size: initial; - border-radius: 8px; - background: ${withHashtag.base00}; - border: 1px solid ${withHashtag.base03}; + font-size: initial; + border-radius: 8px; + background: ${withHashtag.base00}; + border: 1px solid ${withHashtag.base03}; } .widget-dnd > switch:checked { - background: ${withHashtag.base00}; + background: ${withHashtag.base00}; } .widget-dnd > switch slider { - background: ${withHashtag.base01}; - border-radius: 8px; - border: 1px solid ${withHashtag.magenta}; + background: ${withHashtag.base01}; + border-radius: 8px; + border: 1px solid ${withHashtag.${accentColour}}; } '';