diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss index 0eb36d1..d32e0df 100644 --- a/tildes/scss/styles.scss +++ b/tildes/scss/styles.scss @@ -40,4 +40,5 @@ @import 'themes/default'; @import 'themes/black'; @import 'themes/dracula'; +@import 'themes/atom_one_dark'; @import 'themes/solarized'; diff --git a/tildes/scss/themes/_atom_one_dark.scss b/tildes/scss/themes/_atom_one_dark.scss new file mode 100644 index 0000000..bd85fe3 --- /dev/null +++ b/tildes/scss/themes/_atom_one_dark.scss @@ -0,0 +1,39 @@ +// Colours from Atom One Dark Syntax: https://github.com/atom/atom/blob/master/packages/one-dark-syntax/styles/colors.less + +$background: hsl(220, 13%, 18%); +$background-alt: #21242b; +$foreground-alt: hsl(220, 14%, 71%); +$foreground: lighten($foreground, 10%); + +$cyan: hsl(187, 47%, 55%); +$blue: hsl(207, 82%, 66%); +$purple: hsl(286, 60%, 67%); +$green: hsl( 95, 38%, 62%); +$red: hsl(355, 65%, 65%); +$orange: hsl( 29, 54%, 61%); + +$theme-atom-one-dark: ( + "alert": $orange, + "background-primary": $background, + "background-secondary": $background-alt, + "comment-label-exemplary": $blue, + "comment-label-joke": $green, + "comment-label-noise": $orange, + "comment-label-offtopic": $cyan, + "comment-label-malice": $red, + "error": $red, + "foreground-primary": $foreground, + "foreground-secondary": $foreground-alt, + "foreground-highlight": $foreground, + "link": $blue, + "link-visited": $purple, + "stripe-mine": $purple, + "stripe-target": $orange, + "topic-tag-nsfw": $red, + "topic-tag-spoiler": $orange, + "warning": $orange, +); + +body.theme-atom-one-dark { + @include use-theme($theme-atom-one-dark); +} \ No newline at end of file diff --git a/tildes/tildes/templates/base.jinja2 b/tildes/tildes/templates/base.jinja2 index 9c19f8b..0324cfd 100644 --- a/tildes/tildes/templates/base.jinja2 +++ b/tildes/tildes/templates/base.jinja2 @@ -16,6 +16,8 @@ {% elif request.cookies.get("theme", "") == "dracula" %} + {% elif request.cookies.get("theme", "") == "atom-one-dark" %} + {% elif request.cookies.get('theme', '') == 'black' %} {% endif %} @@ -102,6 +104,7 @@ ("light", "Solarized Light"), ("dark", "Solarized Dark"), ("dracula", "Dracula"), + ("atom-one-dark", "Atom One Dark"), ("black", "Black")) %}