pixelifytica/nixos
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Start converting theme to use a centrally defined accent colour

Browse source 
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
This commit is contained in:
Evie Litherland-Smith 2024-02-20 19:31:21 +00:00
parent 4874de6af7
commit 59b9fac674
5 changed files with 231 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
flake.nix
View file

@ -25,6 +25,9 @@
system = "x86_64-linux"; system = "x86_64-linux";
group = "users"; group = "users";
shell = "zsh"; shell = "zsh";
wallpaper = ./wallpapers/space.png;
base16Scheme = ./schemes/modus-vivendi-tinted.yaml;
accentColour = "base0E"; # magenta
systemModules = [./system/hyprland.nix]; systemModules = [./system/hyprland.nix];
serviceModules = []; serviceModules = [];
homeModules = [./home/hyprland/default.nix]; homeModules = [./home/hyprland/default.nix];
@ -36,12 +39,15 @@
system ? default.system, system ? default.system,
group ? default.group, group ? default.group,
shell ? default.shell, shell ? default.shell,
wallpaper ? default.wallpaper,
base16Scheme ? default.base16Scheme,
accentColour ? default.accentColour,
systemModules ? default.systemModules, systemModules ? default.systemModules,
serviceModules ? default.serviceModules, serviceModules ? default.serviceModules,
homeModules ? default.homeModules, homeModules ? default.homeModules,
stateVersion ? default.stateVersion, stateVersion ? default.stateVersion,
}: let }: let
specialArgs = {inherit hostName user group shell;}; specialArgs = {inherit hostName user group shell accentColour;};
in in
nixpkgs.lib.nixosSystem { nixpkgs.lib.nixosSystem {
inherit system specialArgs; inherit system specialArgs;
@ -152,14 +158,14 @@
firewall.enable = true; firewall.enable = true;
}; };
stylix = { stylix = {
inherit base16Scheme;
autoEnable = false; autoEnable = false;
targets = { targets = {
chromium.enable = true; chromium.enable = true;
console.enable = true; console.enable = true;
fish.enable = true; fish.enable = true;
}; };
image = ./wallpapers/sweet/Sweet-space.png; image = wallpaper;
base16Scheme = ./schemes/modus-vivendi-tinted.yaml;
polarity = "dark"; polarity = "dark";
opacity = { opacity = {
applications = 0.85; applications = 0.85;

11
home/avizo/default.nix
View file

@ -1,13 +1,18 @@
{config, ...}: { {
config,
accentColour,
...
}: {
services.avizo = { services.avizo = {
enable = true; 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}); opacity = kind: (toString config.stylix.opacity.${kind});
in { in {
background = "rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, ${opacity "popups"})"; 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-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"})"; 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"; image-opacity = opacity "desktop";
}; };
}; };

6
home/hyprland/default.nix
View file

@ -2,6 +2,7 @@
config, config,
lib, lib,
pkgs, pkgs,
accentColour,
... ...
}: { }: {
stylix.targets.xresources.enable = true; stylix.targets.xresources.enable = true;
@ -123,8 +124,9 @@
smart_resizing = false; smart_resizing = false;
drop_at_cursor = true; drop_at_cursor = true;
}; };
general = with config.lib.stylix.colors; { general = with config.lib.stylix;
"col.active_border" = "rgb(${magenta})"; with colors; {
"col.active_border" = "rgb(${colors.${accentColour}})";
"col.inactive_border" = "rgb(${base03})"; "col.inactive_border" = "rgb(${base03})";
gaps_in = 5; gaps_in = 5;
gaps_out = 10; gaps_out = 10;

3
home/rofi/default.nix
View file

@ -1,6 +1,7 @@
{ {
config, config,
pkgs, pkgs,
accentColour,
... ...
}: { }: {
programs.rofi = { programs.rofi = {
@ -38,7 +39,7 @@
bg2 = mkLiteral "rgba (${base01-rgb-r}, ${base01-rgb-g}, ${base01-rgb-b}, 80%)"; bg2 = mkLiteral "rgba (${base01-rgb-r}, ${base01-rgb-g}, ${base01-rgb-b}, 80%)";
fg = mkLiteral withHashtag.base05; fg = mkLiteral withHashtag.base05;
fg2 = mkLiteral withHashtag.base04; fg2 = mkLiteral withHashtag.base04;
border = mkLiteral withHashtag.magenta; border = mkLiteral withHashtag.${accentColour};
blue = mkLiteral withHashtag.blue; blue = mkLiteral withHashtag.blue;
in { in {
"*" = { "*" = {

412
home/swaync/default.nix
View file

@ -1,347 +1,351 @@
{config, ...}: { {
config,
accentColour,
...
}: {
xdg.configFile."swaync/style.css".text = with config.lib.stylix.colors; '' xdg.configFile."swaync/style.css".text = with config.lib.stylix.colors; ''
* { * {
all: unset; all: unset;
font-size: ${toString config.stylix.fonts.sizes.desktop}px; font-size: ${toString config.stylix.fonts.sizes.desktop}px;
font-family: "${config.stylix.fonts.monospace.name}"; font-family: "${config.stylix.fonts.monospace.name}";
transition: 200ms; transition: 200ms;
} }
.floating-notifications.background .notification-row .notification-background { .floating-notifications.background .notification-row .notification-background {
border-radius: 5px; border-radius: 5px;
border: 1px solid ${withHashtag.magenta}; border: 1px solid ${withHashtag.${accentColour}};
margin: 18px; margin: 18px;
background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5); background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5);
color: ${withHashtag.base05}; color: ${withHashtag.base05};
padding: 0; padding: 0;
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification { .notification {
padding: 7px; padding: 7px;
border-radius: 5px; border-radius: 5px;
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
.notification-content { .notification-content {
margin: 7px; margin: 7px;
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
.notification-content .notification-content
.summary { .summary {
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
.notification-content .notification-content
.time { .time {
color: ${withHashtag.base04}; color: ${withHashtag.base04};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
.notification-content .notification-content
.body { .body {
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
> *:last-child > *:last-child
> * { > * {
min-height: 3.4em; min-height: 3.4em;
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
> *:last-child > *:last-child
> * > *
.notification-action { .notification-action {
border-radius: 5px; border-radius: 5px;
background-color: ${withHashtag.base01}; background-color: ${withHashtag.base01};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
margin: 7px; margin: 7px;
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
> *:last-child > *:last-child
> * > *
.notification-action:hover { .notification-action:hover {
background-color: ${withHashtag.base01}; background-color: ${withHashtag.base01};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
> *:last-child > *:last-child
> * > *
.notification-action:active { .notification-action:active {
background-color: ${withHashtag.blue}; background-color: ${withHashtag.blue};
color: ${withHashtag.base00}; color: ${withHashtag.base00};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.close-button { .close-button {
margin: 7px; margin: 7px;
padding: 2px; padding: 2px;
border-radius: 5px; border-radius: 5px;
background-color: ${withHashtag.red}; background-color: ${withHashtag.red};
color: ${withHashtag.base00}; color: ${withHashtag.base00};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.close-button:hover { .close-button:hover {
background-color: ${withHashtag.red}; background-color: ${withHashtag.red};
color: ${withHashtag.base00}; color: ${withHashtag.base00};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.close-button:active { .close-button:active {
background-color: ${withHashtag.red}; background-color: ${withHashtag.red};
color: ${withHashtag.base00}; color: ${withHashtag.base00};
} }
.control-center { .control-center {
border-radius: 5px; border-radius: 5px;
border: 1px solid ${withHashtag.magenta}; border: 1px solid ${withHashtag.${accentColour}};
margin: 18px; margin: 18px;
background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5); background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.5);
color: ${withHashtag.base05}; color: ${withHashtag.base05};
padding: 14px; padding: 14px;
} }
.control-center .widget-title { .control-center .widget-title {
color: ${withHashtag.base05}; color: ${withHashtag.base05};
font-size: 1.3em; font-size: 1.3em;
} }
.control-center .widget-title button { .control-center .widget-title button {
border-radius: 7px; border-radius: 7px;
background-color: ${withHashtag.base01}; background-color: ${withHashtag.base01};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
padding: 8px; padding: 8px;
} }
.control-center .widget-title button:hover { .control-center .widget-title button:hover {
background-color: ${withHashtag.base02}; background-color: ${withHashtag.base02};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.control-center .widget-title button:active { .control-center .widget-title button:active {
background-color: ${withHashtag.base03}; background-color: ${withHashtag.base03};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.control-center .notification-row .notification-background { .control-center .notification-row .notification-background {
border-radius: 5px; border-radius: 5px;
background-color: ${withHashtag.base01}; background-color: ${withHashtag.base01};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
margin-top: 14px; margin-top: 14px;
} }
.control-center .notification-row .notification-background .notification { .control-center .notification-row .notification-background .notification {
padding: 7px; padding: 7px;
border-radius: 7px; border-radius: 7px;
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
.notification-content { .notification-content {
margin: 7px; margin: 7px;
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
.notification-content .notification-content
.summary { .summary {
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
.notification-content .notification-content
.time { .time {
color: ${withHashtag.base04}; color: ${withHashtag.base04};
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
.notification-content .notification-content
.body { .body {
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
> *:last-child > *:last-child
> * { > * {
min-height: 3.4em; min-height: 3.4em;
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
> *:last-child > *:last-child
> * > *
.notification-action { .notification-action {
border-radius: 7px; border-radius: 7px;
background-color: ${withHashtag.base00}; background-color: ${withHashtag.base00};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
margin: 7px; margin: 7px;
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
> *:last-child > *:last-child
> * > *
.notification-action:hover { .notification-action:hover {
background-color: ${withHashtag.base01};; background-color: ${withHashtag.base01};;
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.notification .notification
> *:last-child > *:last-child
> * > *
.notification-action:active { .notification-action:active {
background-color: ${withHashtag.blue}; background-color: ${withHashtag.blue};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.control-center .notification-row .notification-background .close-button { .control-center .notification-row .notification-background .close-button {
margin: 7px; margin: 7px;
padding: 2px; padding: 2px;
border-radius: 6.3px; border-radius: 6.3px;
background-color: ${withHashtag.red}; background-color: ${withHashtag.red};
color: ${withHashtag.base00}; color: ${withHashtag.base00};
} }
.control-center .notification-row .notification-background .close-button:hover { .control-center .notification-row .notification-background .close-button:hover {
background-color: ${withHashtag.red}; background-color: ${withHashtag.red};
color: ${withHashtag.base00}; color: ${withHashtag.base00};
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.close-button:active { .close-button:active {
background-color: ${withHashtag.red}; background-color: ${withHashtag.red};
color: ${withHashtag.base00}; color: ${withHashtag.base00};
} }
.control-center .notification-row .notification-background:hover { .control-center .notification-row .notification-background:hover {
background-color: ${withHashtag.base00}; background-color: ${withHashtag.base00};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
.control-center .notification-row .notification-background:active { .control-center .notification-row .notification-background:active {
background-color: ${withHashtag.blue}; background-color: ${withHashtag.blue};
color: ${withHashtag.base05}; color: ${withHashtag.base05};
} }
progressbar, progressbar,
progress, progress,
trough { trough {
border-radius: 12.6px; border-radius: 12.6px;
} }
.notification.critical progress { .notification.critical progress {
background-color: ${withHashtag.red}; background-color: ${withHashtag.red};
} }
.notification.low progress, .notification.low progress,
.notification.normal progress { .notification.normal progress {
background-color: ${withHashtag.blue}; background-color: ${withHashtag.blue};
} }
trough { trough {
background-color: ${withHashtag.base00}; background-color: ${withHashtag.base00};
} }
.control-center trough { .control-center trough {
background-color: ${withHashtag.base03}; background-color: ${withHashtag.base03};
} }
.control-center-dnd { .control-center-dnd {
margin-top: 5px; margin-top: 5px;
border-radius: 8px; border-radius: 8px;
background: ${withHashtag.base00}; background: ${withHashtag.base00};
border: 1px solid ${withHashtag.base03}; border: 1px solid ${withHashtag.base03};
} }
.control-center-dnd:checked { .control-center-dnd:checked {
background: ${withHashtag.base00}; background: ${withHashtag.base00};
} }
.control-center-dnd slider { .control-center-dnd slider {
background: ${withHashtag.base03}; background: ${withHashtag.base03};
border-radius: 8px; border-radius: 8px;
} }
.widget-dnd { .widget-dnd {
margin: 0px; margin: 0px;
font-size: 1.1rem; font-size: 1.1rem;
} }
.widget-dnd > switch { .widget-dnd > switch {
font-size: initial; font-size: initial;
border-radius: 8px; border-radius: 8px;
background: ${withHashtag.base00}; background: ${withHashtag.base00};
border: 1px solid ${withHashtag.base03}; border: 1px solid ${withHashtag.base03};
} }
.widget-dnd > switch:checked { .widget-dnd > switch:checked {
background: ${withHashtag.base00}; background: ${withHashtag.base00};
} }
.widget-dnd > switch slider { .widget-dnd > switch slider {
background: ${withHashtag.base01}; background: ${withHashtag.base01};
border-radius: 8px; border-radius: 8px;
border: 1px solid ${withHashtag.magenta}; border: 1px solid ${withHashtag.${accentColour}};
} }
''; '';