You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

103 lines
2.2 KiB

// Color palette is Sven Greb's "Nord"
// (https://www.nordtheme.com/)
// "Official" color names from Nord
// stylelint-disable scss/dollar-variable-pattern
// Polar Night
$nord0: #2e3440;
$nord1: #3b4252;
$nord2: #434c5e;
$nord3: #4c566a;
// Snow Storm
$nord4: #d8dee9;
$nord5: #e5e9f0;
$nord6: #eceff4;
// Frost
$nord7: #8fbcbb;
$nord8: #88c0d0;
$nord9: #81a1c1;
$nord10: #5e81ac;
// Aurora
$nord11: #bf616a;
$nord12: #d08770;
$nord13: #ebcb8b;
$nord14: #a3be8c;
$nord15: #b48ead;
// stylelint-enable scss/dollar-variable-pattern
// Shared between both "light" and "dark" variants
$theme-nord-base: (
"alert": $nord12,
"comment-label-exemplary": $nord10,
"comment-label-joke": $nord14,
"comment-label-noise": $nord13,
"comment-label-offtopic": $nord8,
"comment-label-malice": $nord11,
"error": $nord11,
"link": $nord8,
"link-visited": $nord15,
"success": $nord14,
"syntax-builtin": $nord8,
"syntax-comment": $nord14,
"syntax-constant": $nord11,
"syntax-keyword": $nord9,
"syntax-literal": $nord15,
"syntax-string": $nord13,
"warning": $nord13,
);
// Dark theme definition
$theme-nord-dark:
map-merge(
$theme-nord-base,
(
"background-input": #001f27,
"background-primary": $nord0,
"background-secondary": $nord2,
"border": $nord3,
"foreground-highlight": $nord6,
"foreground-primary": $nord5,
"foreground-secondary": $nord4,
)
);
body.theme-nord-dark {
@include use-theme($theme-nord-dark);
}
@include theme-preview-block(
"nord-dark",
map-get($theme-nord-dark, "foreground-primary"),
map-get($theme-nord-dark, "background-primary")
);
// Light theme definition
$theme-nord-light:
map-merge(
$theme-nord-base,
(
"background-input": #fefbf1,
"background-primary": $nord6,
"background-secondary": $nord5,
"border": #cbc5b6,
"foreground-highlight": $nord3,
"foreground-primary": $nord2,
"foreground-secondary": $nord1,
"stripe-target": $nord13,
"warning": $nord12,
)
);
body.theme-nord-light {
@include use-theme($theme-nord-light);
}
@include theme-preview-block(
"nord-light",
map-get($theme-nord-light, "foreground-primary"),
map-get($theme-nord-light, "background-primary")
);