colors: refactor dark theme
colors: refactor dark theme
This commit is contained in:
parent
d9f629f3a9
commit
f55f7474fd
2 changed files with 307 additions and 0 deletions
285
modules/nixos/appearance/palettes/dark.nix
Normal file
285
modules/nixos/appearance/palettes/dark.nix
Normal file
|
|
@ -0,0 +1,285 @@
|
||||||
|
let
|
||||||
|
/*
|
||||||
|
extended version of gruvbox/gruvbox material to support multiple frameworks:
|
||||||
|
|
||||||
|
- tailwind
|
||||||
|
- base16/24
|
||||||
|
- semantic
|
||||||
|
|
||||||
|
references:
|
||||||
|
|
||||||
|
shades
|
||||||
|
<https://coolors.co/dfd2b3-d9c7a5-d4be98-c6b395-b4a288-a49384-99897a-8b7c6f>
|
||||||
|
<https://coolors.co/1a1a1a-212121-282828-343232-3f3b3b-4d4947-585350-645f59-716860-7d6f64>
|
||||||
|
|
||||||
|
colors
|
||||||
|
<https://coolors.co/69713f-737c45-7f884c-8c9654-9aa55c-a9b665-b1be74-b8c481-bec98c-c4ce96>
|
||||||
|
<https://coolors.co/e57b76-ea6962-e95149-e33e35>
|
||||||
|
<https://coolors.co/e69965-e78a4e-e07b38-de732b>
|
||||||
|
*/
|
||||||
|
colors = {
|
||||||
|
#shades
|
||||||
|
|
||||||
|
shade-50 = "#dfd2b3";
|
||||||
|
shade-100 = "#d9c7a5";
|
||||||
|
shade-150 = "#d4be98";
|
||||||
|
shade-200 = "#c6b395";
|
||||||
|
shade-250 = "#b4a288";
|
||||||
|
shade-300 = "#a49384";
|
||||||
|
shade-350 = "#99897a";
|
||||||
|
shade-400 = "#8b7c6f";
|
||||||
|
shade-450 = "#7d6f64";
|
||||||
|
shade-500 = "#716860";
|
||||||
|
shade-550 = "#645f59";
|
||||||
|
shade-600 = "#585350";
|
||||||
|
shade-650 = "#4d4947";
|
||||||
|
shade-700 = "#3f3b3b";
|
||||||
|
shade-750 = "#343232";
|
||||||
|
shade-800 = "#282828";
|
||||||
|
shade-850 = "#212121";
|
||||||
|
shade-900 = "#1a1a1a";
|
||||||
|
|
||||||
|
# we use green as the primary color here.
|
||||||
|
primary = "#a9b665";
|
||||||
|
|
||||||
|
# color scale for our primary accent color.
|
||||||
|
primary-dark-1 = "#b1be74";
|
||||||
|
primary-dark-2 = "${colors.primary-dark-1}";
|
||||||
|
primary-dark-3 = "#b8c481";
|
||||||
|
primary-dark-4 = "${colors.primary-dark-3}";
|
||||||
|
primary-dark-5 = "#bec98c";
|
||||||
|
primary-dark-6 = "${colors.primary-dark-4}";
|
||||||
|
primary-dark-7 = "#c4ce96";
|
||||||
|
|
||||||
|
primary-light-1 = "#9aa55c";
|
||||||
|
primary-light-2 = "${colors.primary-light-1}";
|
||||||
|
primary-light-3 = "#8c9654";
|
||||||
|
primary-light-4 = "${colors.primary-dark-3}";
|
||||||
|
primary-light-5 = "#7f884c";
|
||||||
|
primary-light-6 = "${colors.primary-dark-5}";
|
||||||
|
primary-light-7 = "#69713f";
|
||||||
|
|
||||||
|
primary-alpha-10 = "${colors.primary}19";
|
||||||
|
primary-alpha-20 = "${colors.primary}33";
|
||||||
|
primary-alpha-30 = "${colors.primary}4b";
|
||||||
|
primary-alpha-40 = "${colors.primary}66";
|
||||||
|
primary-alpha-50 = "${colors.primary}80";
|
||||||
|
primary-alpha-60 = "${colors.primary}99";
|
||||||
|
primary-alpha-70 = "${colors.primary}b3";
|
||||||
|
primary-alpha-80 = "${colors.primary}cc";
|
||||||
|
primary-alpha-90 = "${colors.primary}e1";
|
||||||
|
|
||||||
|
primary-hover = "${colors.primary-light-2}";
|
||||||
|
primary-active = "${colors.primary-light-4}";
|
||||||
|
|
||||||
|
# we use green as the secondary color here.
|
||||||
|
secondary = "${colors.shade-700}";
|
||||||
|
|
||||||
|
# color scale for our secondary accent color.
|
||||||
|
secondary-dark-1 = "${colors.shade-550}";
|
||||||
|
secondary-dark-2 = "${colors.shade-500}";
|
||||||
|
secondary-dark-3 = "${colors.shade-450}";
|
||||||
|
secondary-dark-4 = "${colors.shade-400}";
|
||||||
|
secondary-dark-5 = "${colors.shade-350}";
|
||||||
|
secondary-dark-6 = "${colors.shade-300}";
|
||||||
|
secondary-dark-7 = "${colors.shade-250}";
|
||||||
|
secondary-dark-8 = "${colors.shade-200}";
|
||||||
|
secondary-dark-9 = "${colors.shade-150}";
|
||||||
|
secondary-dark-10 = "${colors.shade-100}";
|
||||||
|
secondary-dark-11 = "${colors.shade-100}";
|
||||||
|
secondary-dark-12 = "${colors.shade-100}";
|
||||||
|
secondary-dark-13 = "${colors.shade-100}";
|
||||||
|
|
||||||
|
secondary-light-1 = "${colors.shade-650}";
|
||||||
|
secondary-light-2 = "${colors.shade-700}";
|
||||||
|
secondary-light-3 = "${colors.shade-750}";
|
||||||
|
secondary-light-4 = "${colors.shade-800}";
|
||||||
|
|
||||||
|
secondary-alpha-10 = "${colors.secondary}19";
|
||||||
|
secondary-alpha-20 = "${colors.secondary}33";
|
||||||
|
secondary-alpha-30 = "${colors.secondary}4b";
|
||||||
|
secondary-alpha-40 = "${colors.secondary}66";
|
||||||
|
secondary-alpha-50 = "${colors.secondary}80";
|
||||||
|
secondary-alpha-60 = "${colors.secondary}99";
|
||||||
|
secondary-alpha-70 = "${colors.secondary}b3";
|
||||||
|
secondary-alpha-80 = "${colors.secondary}cc";
|
||||||
|
secondary-alpha-90 = "${colors.secondary}e1";
|
||||||
|
|
||||||
|
secondary-hover = "${colors.secondary-light-1}";
|
||||||
|
secondary-active = "${colors.secondary-light-2}";
|
||||||
|
|
||||||
|
red-light = "#e57b76";
|
||||||
|
red = "#ea6962";
|
||||||
|
red-dark-1 = "#e7534b";
|
||||||
|
red-dark-2 = "#e33e35";
|
||||||
|
|
||||||
|
orange-light = "#e69965";
|
||||||
|
orange = "#e78a4e";
|
||||||
|
orange-dark-1 = "#e07b38";
|
||||||
|
orange-dark-2 = "#de732b";
|
||||||
|
|
||||||
|
yellow-light = "#d9b06d";
|
||||||
|
yellow = "#d8a657";
|
||||||
|
yellow-dark-1 = "#d09a43";
|
||||||
|
yellow-dark-2 = "#c99136";
|
||||||
|
|
||||||
|
olive-light = "#beb874";
|
||||||
|
olive = "#b9b25f";
|
||||||
|
olive-dark-1 = "#ada652";
|
||||||
|
olive-dark-2 = "#9b944b";
|
||||||
|
|
||||||
|
green-light = "#b1be74";
|
||||||
|
green = "#a9b665";
|
||||||
|
green-dark-1 = "#9aa55c";
|
||||||
|
green-dark-2 = "#8c9654";
|
||||||
|
|
||||||
|
teal-light = "#9abb95";
|
||||||
|
teal = "#89b482";
|
||||||
|
teal-dark-1 = "#7aa573";
|
||||||
|
teal-dark-2 = "#6c9a65";
|
||||||
|
|
||||||
|
blue-light = "#91b6ae";
|
||||||
|
blue = "#7daea3";
|
||||||
|
blue-dark-1 = "#6ea096";
|
||||||
|
blue-dark-2 = "#63978d";
|
||||||
|
|
||||||
|
violet-light = "#dba3c7";
|
||||||
|
violet = "#d892c1";
|
||||||
|
violet-dark-1 = "#cd7eb3";
|
||||||
|
violet-dark-2 = "#c86faa";
|
||||||
|
|
||||||
|
purple-light = "#d9a0af";
|
||||||
|
purple = "#d3869b";
|
||||||
|
purple-dark-1 = "#ca778d";
|
||||||
|
purple-dark-2 = "#c26680";
|
||||||
|
|
||||||
|
pink-light = "#d8abcc";
|
||||||
|
pink = "#cf91be";
|
||||||
|
pink-dark-1 = "#c47eb1";
|
||||||
|
pink-dark-2 = "#bc71a8";
|
||||||
|
|
||||||
|
brown-light = "#b18568";
|
||||||
|
brown = "#a87757";
|
||||||
|
brown-dark-1 = "#976b4e";
|
||||||
|
brown-dark-2 = "#896248";
|
||||||
|
|
||||||
|
grey-light = "${colors.shade-350}";
|
||||||
|
grey = "${colors.shade-450}";
|
||||||
|
grey-dark-1 = "${colors.shade-500}";
|
||||||
|
grey-dark-2 = "${colors.shade-550}";
|
||||||
|
|
||||||
|
black-light = "${colors.shade-700}";
|
||||||
|
black = "${colors.shade-800}";
|
||||||
|
black-dark-1 = "${colors.shade-850}";
|
||||||
|
black-dark-2 = "${colors.shade-900}";
|
||||||
|
|
||||||
|
# semantic
|
||||||
|
body = "${colors.shade-700}";
|
||||||
|
header = "${colors.shade-800}";
|
||||||
|
text = "${colors.shade-150}";
|
||||||
|
text-light = "${colors.shade-100}";
|
||||||
|
text-lighter = "${colors.shade-50}";
|
||||||
|
texter-dark = "${colors.shade-200}";
|
||||||
|
text-darker = "${colors.shade-350}";
|
||||||
|
footer = "${colors.shade-800}";
|
||||||
|
menu = "${colors.shade-800}";
|
||||||
|
border-active = "${colors.shade-150}";
|
||||||
|
border-inactive = "${colors.shade-600}";
|
||||||
|
|
||||||
|
error-bg = "${colors.red}";
|
||||||
|
error-bg-active = "${colors.red-dark-1}";
|
||||||
|
error-bg-hover = "${colors.red-dark-2}";
|
||||||
|
error-text = "${colors.shade-800}";
|
||||||
|
error-border = "${colors.red-light}";
|
||||||
|
|
||||||
|
success-bg = "${colors.green}";
|
||||||
|
success-bg-active = "${colors.green-dark-1}";
|
||||||
|
success-bg-hover = "${colors.green-dark-2}";
|
||||||
|
success-text = "${colors.shade-800}";
|
||||||
|
success-border = "${colors.green-light}";
|
||||||
|
|
||||||
|
warning-bg = "${colors.yellow}";
|
||||||
|
warning-bg-active = "${colors.yellow-dark-1}";
|
||||||
|
warning-bg-hover = "${colors.yellow-dark-2}";
|
||||||
|
warning-text = "${colors.shade-800}";
|
||||||
|
warning-border = "${colors.yellow-light}";
|
||||||
|
|
||||||
|
info-bg = "${colors.blue}";
|
||||||
|
info-bg-active = "${colors.blue-dark-1}";
|
||||||
|
info-bg-hover = "${colors.blue-dark-2}";
|
||||||
|
info-text = "${colors.shade-800}";
|
||||||
|
info-border = "${colors.blue-light}";
|
||||||
|
|
||||||
|
tip-bg = "${colors.teal}";
|
||||||
|
tip-bg-active = "${colors.teal-dark-1}";
|
||||||
|
tip-bg-hover = "${colors.teal-dark-2}";
|
||||||
|
tip-text = "${colors.shade-800}";
|
||||||
|
tip-border = "${colors.teal-light}";
|
||||||
|
|
||||||
|
input-text = "${colors.text-light}";
|
||||||
|
|
||||||
|
# syntax
|
||||||
|
|
||||||
|
syntax = {
|
||||||
|
string = "${colors.green}";
|
||||||
|
number = "${colors.purple}";
|
||||||
|
float = "${colors.purple}";
|
||||||
|
boolean = "${colors.purple}";
|
||||||
|
type = "${colors.yellow}";
|
||||||
|
structure = "${colors.orange}";
|
||||||
|
statement = "${colors.red}";
|
||||||
|
label = "${colors.orange}";
|
||||||
|
operator = "${colors.orange}";
|
||||||
|
identifier = "${colors.blue}";
|
||||||
|
function = "${colors.green}";
|
||||||
|
storageClass = "${colors.orange}";
|
||||||
|
constant = "${colors.teal}";
|
||||||
|
exception = "${colors.red}";
|
||||||
|
preproc = "${colors.purple}";
|
||||||
|
include = "${colors.purple}";
|
||||||
|
define = "${colors.purple}";
|
||||||
|
macro = "${colors.teal}";
|
||||||
|
preCondit = "${colors.purple}";
|
||||||
|
special = "${colors.yellow}";
|
||||||
|
specialChar = "${colors.yellow}";
|
||||||
|
comment = "${colors.text-darker}";
|
||||||
|
todo = "${colors.purple}";
|
||||||
|
tag = "${colors.tag}";
|
||||||
|
|
||||||
|
mdH1 = "${colors.red}";
|
||||||
|
mdH2 = "${colors.orange}";
|
||||||
|
mdH3 = "${colors.yellow}";
|
||||||
|
mdH4 = "${colors.green}";
|
||||||
|
mdH5 = "${colors.blue}";
|
||||||
|
mdH6 = "${colors.purple}";
|
||||||
|
};
|
||||||
|
|
||||||
|
# base 16/24
|
||||||
|
base00 = "${colors.shade-800}";
|
||||||
|
base01 = "${colors.shade-700}";
|
||||||
|
base02 = "${colors.shade-600}";
|
||||||
|
base03 = "${colors.shade-450}";
|
||||||
|
base04 = "${colors.shade-300}";
|
||||||
|
base05 = "${colors.shade-150}";
|
||||||
|
base06 = "${colors.shade-100}";
|
||||||
|
base07 = "${colors.shade-50}";
|
||||||
|
base08 = "${colors.red}";
|
||||||
|
base09 = "${colors.orange}";
|
||||||
|
base0A = "${colors.yellow}";
|
||||||
|
base0B = "${colors.green}";
|
||||||
|
base0C = "${colors.teal}";
|
||||||
|
base0D = "${colors.blue}";
|
||||||
|
base0E = "${colors.purple}";
|
||||||
|
base0F = "${colors.brown}";
|
||||||
|
base10 = "${colors.shade-850}";
|
||||||
|
base11 = "${colors.shade-900}";
|
||||||
|
base12 = "${colors.red-light}";
|
||||||
|
base13 = "${colors.yellow-light}";
|
||||||
|
base14 = "${colors.green-light}";
|
||||||
|
base15 = "${colors.teal-light}";
|
||||||
|
base16 = "${colors.blue-light}";
|
||||||
|
base17 = "${colors.purple-light}";
|
||||||
|
};
|
||||||
|
in {
|
||||||
|
inherit colors;
|
||||||
|
}
|
||||||
22
modules/nixos/appearance/palettes/readme.md
Normal file
22
modules/nixos/appearance/palettes/readme.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# References:
|
||||||
|
|
||||||
|
## Dark
|
||||||
|
|
||||||
|
### Shades
|
||||||
|
|
||||||
|
- (https://coolors.co/1a1a1a-212121-282828-343232-3f3b3b-4d4947-585350-645f59-716860-7d6f64)[Dark]
|
||||||
|
- (https://coolors.co/dfd2b3-d9c7a5-d4be98-c6b395-b4a288-a49384-99897a-8b7c6f)[light]
|
||||||
|
|
||||||
|
### Colors
|
||||||
|
|
||||||
|
- [https://coolors.co/69713f-737c45-7f884c-8c9654-9aa55c-a9b665-b1be74-b8c481-bec98c-c4ce96](Green)
|
||||||
|
- [https://coolors.co/e57b76-ea6962-e95149-e33e35](Red)
|
||||||
|
- [https://coolors.co/e69965-e78a4e-e07b38-de732b](Orange)
|
||||||
|
- [https://coolors.co/d9b06d-d8a657-d09a43-c99136](Yellow)
|
||||||
|
- [https://coolors.co/beb874-b9b25f-ada652-9b944b](Olive)
|
||||||
|
- [https://coolors.co/9abb95-89b482-7aa573-6c9a65](Teal)
|
||||||
|
- [https://coolors.co/91b6ae-7daea3-6ea096-63978d](Blue)
|
||||||
|
- [https://coolors.co/dba3c7-d892c1-cd7eb3-c86faa](Violet)
|
||||||
|
- [https://coolors.co/d9a0af-d3869b-ca778d-c26680](Purple)
|
||||||
|
- [https://coolors.co/d8abcc-cf91be-c47eb1-bc71a8](Pink)
|
||||||
|
- [https://coolors.co/b18568-a87757-976b4e-896248](Brown)
|
||||||
Loading…
Add table
Add a link
Reference in a new issue