diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss index 72c1e33..17a71d5 100644 --- a/tildes/scss/styles.scss +++ b/tildes/scss/styles.scss @@ -55,3 +55,4 @@ @import "themes/zenburn"; @import "themes/gruvbox"; @import "themes/love"; +@import "themes/nord"; \ No newline at end of file diff --git a/tildes/scss/themes/_nord.scss b/tildes/scss/themes/_nord.scss new file mode 100644 index 0000000..105f4be --- /dev/null +++ b/tildes/scss/themes/_nord.scss @@ -0,0 +1,103 @@ +// 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") +); \ No newline at end of file diff --git a/tildes/tildes/templates/base.jinja2 b/tildes/tildes/templates/base.jinja2 index 20c7b1b..df39a5f 100644 --- a/tildes/tildes/templates/base.jinja2 +++ b/tildes/tildes/templates/base.jinja2 @@ -36,6 +36,10 @@ {% elif request.current_theme == "love-light" %} + {% elif request.current_theme == "nord-dark" %} + + {% elif request.current_theme == "nord-light" %} + {% endif %} {% assets "css" %} @@ -124,7 +128,10 @@ ("gruvbox-light", "Gruvbox Light"), ("gruvbox-dark", "Gruvbox Dark"), ("love-dark", "Love Dark"), - ("love-light", "Love Light")) %} + ("love-light", "Love Light"), + ("nord-dark", "Nord Dark"), + ("nord-light", "Nord Light")) %} +