🚀 add theming with base16

dev-docs
Moritz Böhme 2022-04-23 17:31:50 +02:00
parent 34e2ad58ce
commit f6976cd478
No known key found for this signature in database
GPG Key ID: 213820E2795F5CF5
9 changed files with 416 additions and 153 deletions

View File

@ -50,6 +50,42 @@
"type": "github"
}
},
"base16": {
"inputs": {
"nixpkgs": [
"nixpkgs"
]
},
"locked": {
"lastModified": 1643556194,
"narHash": "sha256-mU/pD30cIRcodLROhbIpRuEoEsO9aV5lDrYav0ZSIUA=",
"owner": "SenchoPens",
"repo": "base16.nix",
"rev": "abc25e69d0e18ce54dbe6d95a531c4d63ed59932",
"type": "github"
},
"original": {
"owner": "SenchoPens",
"repo": "base16.nix",
"type": "github"
}
},
"asus-touchpad-numpad-driver": {
"flake": false,
"locked": {
"lastModified": 1646981564,
"narHash": "sha256-qanPTmP2Sctq4ybiUFzIiADP2gZH8HhajBORUSIXb04=",
"owner": "mohamed-badaoui",
"repo": "asus-touchpad-numpad-driver",
"rev": "a2bada610ebb3fc002fceb53ddf93bc799241867",
"type": "github"
},
"original": {
"owner": "mohamed-badaoui",
"repo": "asus-touchpad-numpad-driver",
"type": "github"
}
},
"dracula-fish": {
"flake": false,
"locked": {
@ -270,6 +306,7 @@
"agenix": "agenix",
"arkenfox-userjs": "arkenfox-userjs",
"asus-touchpad-numpad-driver": "asus-touchpad-numpad-driver",
"base16": "base16",
"dracula-fish": "dracula-fish",
"emacs-overlay": "emacs-overlay",
"forgit-git": "forgit-git",

View File

@ -41,9 +41,15 @@
url = "github:arkenfox/user.js";
flake = false;
};
# Theming
base16 = {
url = "github:SenchoPens/base16.nix";
inputs.nixpkgs.follows = "nixpkgs";
};
};
outputs = inputs@{ self, agenix, home-manager, nixpkgs, utils, ... }:
outputs = inputs@{ self, agenix, home-manager, nixpkgs, utils, base16, ... }:
utils.lib.mkFlake {
inherit self inputs;
@ -84,6 +90,7 @@
}
self.nixosModules.default
agenix.nixosModules.age
base16.nixosModule
];
hosts.nixos-laptop.modules =

View File

@ -9,6 +9,7 @@
./gaming.nix
./security.nix
./services
./theming.nix
];
# USERS

View File

@ -14,57 +14,6 @@
"ctrl+plus" = "change_font_size all +2.0";
"ctrl+minus" = "change_font_size all -2.0";
};
extraConfig = ''
foreground #f8f8f2
background #282a36
#background #000000
selection_foreground #44475a
selection_background #f8f8f2
url_color #ffb86c
# black
color0 #21222c
color8 #6272a4
# red
color1 #ff5555
color9 #ff6e6e
# green
color2 #50fa7b
color10 #69ff94
# yellow
color3 #f1fa8c
color11 #ffffa5
# blue
color4 #bd93f9
color12 #d6acff
# magenta
color5 #ff79c6
color13 #ff92df
# cyan
color6 #8be9fd
color14 #a4ffff
# white
color7 #f8f8f2
color15 #ffffff
# Cursor colors
cursor #6272a4
cursor_text_color background
# Tab bar colors
active_tab_foreground #44475a
active_tab_background #f8f8f2
inactive_tab_foreground #282a36
inactive_tab_background #6272a4
'';
font = {
name = "FiraCode Nerd Font";
size = 10;

View File

@ -7,7 +7,6 @@
enable = true;
package =
pkgs.rofi.override { plugins = with pkgs; [ rofi-calc rofi-emoji ]; };
theme = ./dracula.rasi;
extraConfig = { combi-modi = "drun,window,emoji"; };
};
home.packages = with pkgs;

View File

@ -1,58 +1,13 @@
{ config, lib, pkgs, ... }:
{
home-manager.users.moritz = {
programs.zathura = {
home-manager.users.moritz.programs.zathura = {
enable = true;
options = {
#
# Startup Options
#
recolor = true;
adjust-open = "width";
#
# Dracula Theme
#
completion-bg = "#282a36";
completion-fg = "#ff79c6";
completion-group-bg = "#282a36";
completion-group-fg = "#6272a4";
completion-highlight-bg = "#44475a";
completion-highlight-fg = "#f8f8f2";
notification-error-bg = "#ff5555";
notification-error-fg = "#f8f8f2";
notification-warning-bg = "#ffb86c";
notification-warning-fg = "#44475a";
notification-bg = "#282a36";
notification-fg = "#f8f8f2";
index-bg = "#282a36";
index-fg = "#f8f8f2";
index-active-bg = "#44475a";
index-active-fg = "#f8f8f2";
default-bg = "#44475a";
default-fg = "#bd93f9";
inputbar-bg = "#282a36";
inputbar-fg = "#8be9fd";
statusbar-bg = "#282a36";
statusbar-fg = "#f8f8f2";
render-loading = true;
render-loading-fg = "#282a36";
render-loading-bg = "#f8f8f2";
#
# Recolor settings
#
recolor-lightcolor = "#282a36";
recolor-darkcolor = "#f8f8f2";
font = "Jetbrains Mono 9";
};
selection-clipboard = "clipboard";
};
};
}

View File

@ -34,7 +34,7 @@ in {
"feh" = { state = "floating"; };
"Vampire_Survivors" = { state = "fullscreen"; };
};
settings = {
settings = with config.scheme.withHashtag; {
border_width = 2;
window_gap = 5;
borderless_monocle = true;
@ -42,9 +42,9 @@ in {
focus_follows_pointer = true;
# Dracula theme #
focused_border_color = "#bd93f9";
normal_border_color = "#44475a";
active_border_color = "#6272a4";
focused_border_color = base0D;
normal_border_color = base03;
active_border_color = base03;
};
startupPrograms = [
"${pkgs.systemd}/bin/systemctl --user start polybar.service"

View File

@ -12,22 +12,7 @@ in {
MONITOR=$m polybar --reload bottom &
done
'';
config = let
colors = {
background = "#282a36";
current-line = "#44475a";
foreground = "#f8f8f2";
comment = "#6272a4";
cyan = "#8be9fd";
green = "#50fa7b";
orange = "#ffb86c";
pink = "#ff79c6";
purple = "#bd93f9";
red = "#ff5555";
yellow = "#f1fa8c";
};
in {
config = with config.scheme.withHashtag; {
"global/wm" = { margin-top = 5; };
"bar/bottom" = {
# position
@ -35,18 +20,18 @@ in {
bottom = true;
width = "100%:-20";
heigth = 25;
background = colors.background;
foreground = colors.foreground;
background = base00;
foreground = base05;
radius = 10;
offset-x = 10;
offset-y = 5;
padding = 1;
line-size = 3;
line-color = colors.pink;
line-color = base06;
module-margin = 1;
separator = "%{F${colors.comment}}%{F-}";
separator = "%{F${base03}}%{F-}";
font-0 = "FiraCode Nerd Font:size=10;0";
@ -69,10 +54,10 @@ in {
time-format = "%H:%M";
format-charging =
"%{F${colors.green}}<animation-charging>%{F-} <label-charging>";
"%{F${base0B}}<animation-charging>%{F-} <label-charging>";
format-discharging =
"%{F${colors.red}}<animation-discharging>%{F-} <label-discharging>";
format-full = "%{F${colors.green}} %{F-} <label-full>";
"%{F${base08}}<animation-discharging>%{F-} <label-discharging>";
format-full = "%{F${base08}} %{F-} <label-full>";
label-charging = "%percentage%% %time% remaining";
label-discharging = "%percentage%% %time% remaining";
@ -96,23 +81,23 @@ in {
type = "internal/bspwm";
label-focused = "";
label-focused-foreground = colors.purple;
label-focused-foreground = base0E;
label-focused-padding = 1;
label-occupied = "";
label-occupied-foreground = colors.comment;
label-occupied-foreground = base03;
label-occupied-padding = 1;
label-urgent = "";
label-urgent-foreground = colors.red;
label-urgent-foreground = base08;
label-urgent-padding = 1;
label-empty = "";
label-empty-foreground = colors.comment;
label-empty-foreground = base03;
label-empty-padding = 1;
label-separator = " ";
label-separator-foreground = colors.cyan;
label-separator-foreground = base0C;
label-separator-padding = 1;
pin-workspaces = true;
@ -123,11 +108,11 @@ in {
format = "<ramp-load><label>";
ramp-load-0 = " ";
ramp-load-0-foreground = colors.green;
ramp-load-0-foreground = base0B;
ramp-load-1 = " ";
ramp-load-1-foreground = colors.orange;
ramp-load-1-foreground = base0A;
ramp-load-2 = " ";
ramp-load-2-foreground = colors.red;
ramp-load-2-foreground = base08;
label = "%percentage:2%%";
};
@ -140,7 +125,7 @@ in {
label = "%time%";
format-prefix = " ";
format-prefix-foreground = colors.cyan;
format-prefix-foreground = base0C;
};
"module/date" = {
type = "internal/date";
@ -151,7 +136,7 @@ in {
label = "%date%";
format-prefix = " ";
format-prefix-foreground = colors.orange;
format-prefix-foreground = base0A;
};
"module/memory" = {
@ -160,11 +145,11 @@ in {
format = "<ramp-used><label>";
ramp-used-0 = " ";
ramp-used-0-foreground = colors.green;
ramp-used-0-foreground = base0B;
ramp-used-1 = " ";
ramp-used-1-foreground = colors.orange;
ramp-used-1-foreground = base0A;
ramp-used-2 = " ";
ramp-used-2-foreground = colors.red;
ramp-used-2-foreground = base08;
ramp-used-3 = " ";
label = "%gb_used%";
@ -173,20 +158,20 @@ in {
type = "internal/pulseaudio";
format-volume = "<ramp-volume> <label-volume>";
format-underline = colors.orange;
format-underline = base0A;
label-volume = "%percentage%%";
label-muted = "%{F${colors.red}} %{F-}muted";
label-muted = "%{F${base08}} %{F-}muted";
ramp-volume-0 = "";
ramp-volume-0-foreground = colors.green;
ramp-volume-0-foreground = base0B;
ramp-volume-1 = "";
ramp-volume-1-foreground = colors.green;
ramp-volume-1-foreground = base0B;
ramp-volume-2 = "奔";
ramp-volume-2-foreground = colors.green;
ramp-volume-2-foreground = base0B;
ramp-volume-3 = "";
ramp-volume-3-foreground = colors.orange;
ramp-volume-3-foreground = base0A;
ramp-volume-4 = "";
ramp-volume-4-foreground = colors.red;
ramp-volume-4-foreground = base08;
click-middle = "${pkgs.pavucontrol}/bin/pavucontrol";
};
@ -197,7 +182,7 @@ in {
interval = 3;
format-connected = "<label-connected>";
label-connected =
"%{F${colors.purple}}%{F-} %upspeed% %{F${colors.pink}}%{F-} %downspeed%";
"%{F${base0E}}%{F-} %upspeed% %{F${base06}}%{F-} %downspeed%";
};
};
};

330
modules/theming.nix Normal file
View File

@ -0,0 +1,330 @@
{ config, lib, pkgs, inputs, ... }:
let
dracula = {
slug = "Dracula";
scheme = "Dracula";
author = "Moritz Boehme based on Dracula Theme";
base00 = "282a36"; # Background
base01 = "69ff94"; # Green 2
base02 = "ffffa5"; # Yellow 2
base03 = "6272a4"; # Black 2
base04 = "d6acff"; # Blue 2
base05 = "f8f8f2"; # Foreground
base06 = "ff92df"; # Magenta 2
base07 = "44475a"; # White 2
base08 = "ff5555"; # Red 1
base09 = "ff6e6e"; # Red 2
base0A = "f1fa8c"; # Yellow 1
base0B = "50fa7b"; # Green 1
base0C = "8be9fd"; # Cyan 1
base0D = "bd93f9"; # Blue 1
base0E = "ff79c6"; # Magenta 1
base0F = "a4ffff"; # Cyan 2
};
catppuccin = {
slug = "Catpuccin";
scheme = "Catpuccin";
author = "Moritz Boehme based on Catppuccin Theme";
base00 = "1e1e2e"; # Background
base01 = "abe9b3"; # Green 2
base02 = "fae380"; # Yellow 2
base03 = "988ba2"; # Black 2
base04 = "96cdf8"; # Blue 2
base05 = "d9e0ee"; # Foreground
base06 = "ddb6f2"; # Magenta 2
base07 = "d9e0ee"; # White 2
base08 = "f28fad"; # Red 1
base09 = "f28fad"; # Red 2
base0A = "fae3b0"; # Yellow 1
base0B = "abe9b3"; # Green 1
base0C = "89dceb"; # Cyan 1
base0D = "96cdfb"; # Blue 1
base0E = "f5c2e7"; # Magenta 1
base0F = "89dceb"; # Cyan 2
};
nord = {
slug = "Nord";
scheme = "Nord";
author = "arcticicestudio";
base00 = "2E3440";
base01 = "ECEFF4";
base02 = "B48EAD";
base03 = "4C566A";
base04 = "D8DEE9";
base05 = "E5E9F0";
base06 = "434C5E";
base07 = "8FBCBB";
base08 = "BF616A";
base09 = "3B4252";
base0A = "EBCB8B";
base0B = "A3BE8C";
base0C = "88C0D0";
base0D = "5E81AC";
base0E = "D08770";
base0F = "81A1C1";
};
onedark = {
slug = "onedark";
scheme = "OneDark";
author = "Lalit Magant (http://github.com/tilal6991)";
base00 = "282c34";
base01 = "353b45";
base02 = "3e4451";
base03 = "545862";
base04 = "565c64";
base05 = "abb2bf";
base06 = "b6bdca";
base07 = "c8ccd4";
base08 = "e06c75";
base09 = "d19a66";
base0A = "e5c07b";
base0B = "98c379";
base0C = "56b6c2";
base0D = "61afef";
base0E = "c678dd";
base0F = "be5046";
};
in {
scheme = dracula;
home-manager.users.moritz = {
programs = {
kitty.extraConfig = builtins.readFile (config.scheme {
template = ''
# Base16 {{scheme-name}} - kitty color config
# Scheme by {{scheme-author}}
background #{{base00-hex}}
foreground #{{base05-hex}}
selection_background #{{base05-hex}}
selection_foreground #{{base00-hex}}
url_color #{{base04-hex}}
cursor #{{base03-hex}}
active_border_color #{{base03-hex}}
inactive_border_color #{{base01-hex}}
active_tab_background #{{base00-hex}}
active_tab_foreground #{{base05-hex}}
inactive_tab_background #{{base01-hex}}
inactive_tab_foreground #{{base04-hex}}
tab_bar_background #{{base01-hex}}
# normal
color0 #{{base00-hex}}
color1 #{{base08-hex}}
color2 #{{base0B-hex}}
color3 #{{base0A-hex}}
color4 #{{base0D-hex}}
color5 #{{base0E-hex}}
color6 #{{base0C-hex}}
color7 #{{base05-hex}}
# bright
color8 #{{base03-hex}}
color9 #{{base09-hex}}
color10 #{{base01-hex}}
color11 #{{base02-hex}}
color12 #{{base04-hex}}
color13 #{{base06-hex}}
color14 #{{base0F-hex}}
color15 #{{base07-hex}}
'';
});
zathura.extraConfig = builtins.readFile (config.scheme {
template = ''
# Base16 {{scheme-name}}
# Author: {{scheme-author}}
set completion-bg "#{{base00-hex}}"
set completion-fg "#{{base05-hex}}"
set completion-group-bg "#{{base00-hex}}"
set completion-group-fg "#{{base03-hex}}"
set completion-highlight-bg "#{{base07-hex}}"
set completion-highlight-fg "#{{base06-hex}}"
set notification-bg "#{{base00-hex}}"
set notification-fg "#{{base05-hex}}"
set notification-warning-bg "#{{base0A-hex}}"
set notification-warning-fg "#{{base05-hex}}"
set notification-error-bg "#{{base08-hex}}"
set notification-error-fg "#{{base05-hex}}"
set index-bg "#{{base00-hex}}"
set index-fg "#{{base05-hex}}"
set index-active-bg "#{{base07-hex}}"
set index-active-fg "#{{base05-hex}}"
set default-bg "#{{base00-hex}}"
set default-fg "#{{base05-hex}}"
set inputbar-bg "#{{base00-hex}}"
set inputbar-fg "#{{base0C-hex}}"
set statusbar-bg "#{{base00-hex}}"
set statusbar-fg "#{{base05-hex}}"
set highlight-color "#{{base0A-hex}}"
set highlight-active-color "#{{base06-hex}}"
set recolor-lightcolor "#{{base00-hex}}"
set recolor-darkcolor "#{{base05-hex}}"
'';
});
rofi.theme = config.scheme {
template = ''
* {
drac-bgd: #{{base00-hex}};
drac-cur: #{{base07-hex}};
drac-fgd: #{{base05-hex}};
drac-cmt: #{{base03-hex}};
drac-cya: #{{base0C-hex}};
drac-grn: #{{base0B-hex}};
drac-ora: #{{base0A-hex}};
drac-pnk: #{{base0E-hex}};
drac-pur: #{{base0D-hex}};
drac-red: #{{base08-hex}};
drac-yel: #{{base0A-hex}};
font: "FiraCode Nerd Font 14";
foreground: @drac-fgd;
background-color: @drac-bgd;
active-background: @drac-pnk;
urgent-background: @drac-red;
selected-background: @active-background;
selected-urgent-background: @urgent-background;
selected-active-background: @active-background;
separatorcolor: @active-background;
bordercolor: #6272a4;
}
#window {
background-color: @background;
border: 3;
border-radius: 6;
border-color: @bordercolor;
padding: 25;
}
#mainbox {
border: 0;
padding: 5;
}
#message {
border: 1px dash 0px 0px ;
border-color: @separatorcolor;
padding: 1px ;
}
#textbox {
text-color: @foreground;
}
#listview {
fixed-height: 0;
border: 2px dash 0px 0px ;
border-color: @bordercolor;
spacing: 2px ;
scrollbar: false;
padding: 2px 0px 0px ;
}
#element-text {
border: 0;
padding: 1px ;
text-color: @foreground;
}
#element-text normal.normal {
background-color: @background;
}
#element-text normal.urgent {
background-color: @urgent-background;
text-color: @urgent-foreground;
}
#element-text normal.active {
backgroundr: @active-background;
}
#element-text selected.normal {
background-color: @selected-background;
}
#element-text selected.urgent {
background-color: @selected-urgent-background;
}
#element-text selected.active {
background-color: @selected-active-background;
}
#element-text alternate.normal {
background-color: @background;
}
#element-text alternate.urgent {
background-color: @urgent-background;
}
#element-text alternate.active {
background-color: @active-background;
}
#scrollbar {
width: 2px ;
border: 0;
handle-width: 8px ;
padding: 0;
}
#sidebar {
border: 2px dash 0px 0px ;
border-color: @separatorcolor;
}
#button selected {
background-color: @selected-background;
text-color: @foreground;
}
#inputbar {
spacing: 0;
text-color: @foreground;
padding: 1px ;
}
#case-indicator {
spacing: 0;
text-color: @foreground;
}
#entry {
spacing: 0;
text-color: @drac-cya;
}
#prompt {
spacing: 0;
text-color: @drac-grn;
}
#inputbar {
children: [ prompt,textbox-prompt-colon,entry,case-indicator ];
}
#textbox-prompt-colon {
expand: false;
str: ":";
margin: 0px 0.3em 0em 0em ;
text-color: @drac-grn;
}
'';
};
firefox.profiles."default" = {
userChrome = with config.scheme; ''
toolbar#nav-bar, nav-bar-customization-target {
background: #${base00} !important;
}
@-moz-document url("about:newtab"),
@-moz-document url("about:blank") {
* { background-color: #${base00} !important; }
}
#urlbar-background {
background-color: #${base00} !important
}
#urlbar {
color: #${base05} !important
}
#sidebar-splitter {
border-color: #${base01} !important;
color: #${base01} !important;
background-color: #${base01} !important;
}
'';
settings = with config.scheme; {
"toolkit.legacyUserProfileCustomizations.stylesheets" = true;
"browser.anchor_color" = "#${base0D}";
"browser.visited_color" = "#${base0C}";
};
};
};
};
}