Browse Source

Add Dracula theme

merge-requests/55/head
Deimos 6 years ago
parent
commit
e7e4703f75
  1. 1
      tildes/scss/styles.scss
  2. 42
      tildes/scss/themes/_dracula.scss
  3. 16
      tildes/scss/themes/_theme_base.scss
  4. 3
      tildes/tildes/templates/base.jinja2
  5. 1
      tildes/tildes/views/settings.py

1
tildes/scss/styles.scss

@ -38,4 +38,5 @@
// meta tag inside the base.jinja2 template, so mobile browsers can match // meta tag inside the base.jinja2 template, so mobile browsers can match
@import 'themes/theme_base'; @import 'themes/theme_base';
@import 'themes/black'; @import 'themes/black';
@import 'themes/dracula';
@import 'themes/solarized'; @import 'themes/solarized';

42
tildes/scss/themes/_dracula.scss

@ -0,0 +1,42 @@
// Color palette is Zeno Rocha's "Dracula" (https://draculatheme.com/)
$background: #282a36;
$background-alt: #44475a;
$foreground: #f8f8f2;
$foreground-alt: #6272a4;
$cyan: #8be9fd;
$green: #50fa7b;
$orange: #ffb86c;
$pink: #ff79c6;
$purple: #bd93f9;
$red: #ff5555;
$yellow: #f1fa8c;
$theme-dracula: (
"alert": $orange,
"background-primary": $background,
"background-secondary": $background-alt,
"background-input": darken($background, 10%),
"border": $foreground-alt,
"comment-label-exemplary": $cyan,
"comment-label-joke": $green,
"comment-label-noise": $yellow,
"comment-label-offtopic": $pink,
"comment-label-malice": $red,
"error": $red,
"foreground-primary": $foreground,
"foreground-secondary": $foreground-alt,
"foreground-highlight": $foreground,
"link": $cyan,
"link-visited": $purple,
"stripe-mine": $purple,
"stripe-target": $yellow,
"topic-tag-nsfw": $red,
"topic-tag-spoiler": $yellow,
"warning": $yellow,
);
body.theme-dracula {
@include use-theme($theme-dracula);
}

16
tildes/scss/themes/_theme_base.scss

@ -127,7 +127,14 @@
} }
.btn.btn-primary { .btn.btn-primary {
color: #fff;
$is-button-bg-light: lightness(map-get($theme, "button")) > 50;
@if ($is-button-bg-light) {
color: #000;
} @else {
color: #fff;
}
background-color: map-get($theme, "button"); background-color: map-get($theme, "button");
border-color: map-get($theme, "button"); border-color: map-get($theme, "button");
@ -137,7 +144,11 @@
} }
&:visited { &:visited {
color: #fff;
@if ($is-button-bg-light) {
color: #000;
} @else {
color: #fff;
}
} }
} }
@ -367,6 +378,7 @@
&.active a { &.active a {
color: map-get($theme, "link"); color: map-get($theme, "link");
border-bottom-color: map-get($theme, "link");
} }
} }

3
tildes/tildes/templates/base.jinja2

@ -14,6 +14,8 @@
{# Hardcoding each option isn't great, but I don't know a better method #} {# Hardcoding each option isn't great, but I don't know a better method #}
{% if request.cookies.get('theme', '') == 'dark' %} {% if request.cookies.get('theme', '') == 'dark' %}
<meta name="theme-color" content="#073642"> <meta name="theme-color" content="#073642">
{% elif request.cookies.get("theme", "") == "dracula" %}
<meta name="theme-color" content="#282a36">
{% elif request.cookies.get('theme', '') == 'black' %} {% elif request.cookies.get('theme', '') == 'black' %}
<meta name="theme-color" content="#222"> <meta name="theme-color" content="#222">
{% endif %} {% endif %}
@ -99,6 +101,7 @@
("white", "White"), ("white", "White"),
("light", "Solarized Light"), ("light", "Solarized Light"),
("dark", "Solarized Dark"), ("dark", "Solarized Dark"),
("dracula", "Dracula"),
("black", "Black")) %} ("black", "Black")) %}
<option value="{{ theme }}" <option value="{{ theme }}"
{{ 'selected' if theme == request.cookies.get("theme", "white") else '' }} {{ 'selected' if theme == request.cookies.get("theme", "white") else '' }}

1
tildes/tildes/views/settings.py

@ -32,6 +32,7 @@ def get_settings(request: Request) -> dict:
"white": "White", "white": "White",
"light": "Solarized Light", "light": "Solarized Light",
"dark": "Solarized Dark", "dark": "Solarized Dark",
"dracula": "Dracula",
"black": "Black", "black": "Black",
} }

Loading…
Cancel
Save