From fefaf0306c07b55c716189f5307558ed7b5523ce Mon Sep 17 00:00:00 2001 From: Sébastien Dailly Date: Thu, 18 Nov 2021 14:38:08 +0100 Subject: Added dark theme --- Makefile | 4 +- theme/custom/base.html | 331 ++++++++++++++++++++++++++++++++++++++++++++++++ theme/custom/custom.css | 126 ++++++++++++------ 3 files changed, 422 insertions(+), 39 deletions(-) create mode 100755 theme/custom/base.html diff --git a/Makefile b/Makefile index 510d3bc..e6731ac 100644 --- a/Makefile +++ b/Makefile @@ -49,7 +49,9 @@ help: @echo 'Set the RELATIVE variable to 1 to enable relative urls ' @echo ' ' -content/extras/style.min.css: theme/Flex/static/stylesheet/style.min.css theme/custom/custom.css +SOURCE_THEME=theme/Flex/static/stylesheet/style.min.css + +content/extras/style.min.css: $(SOURCE_THEME) theme/custom/custom.css css_merge -o $@ $^ html: content/extras/style.min.css diff --git a/theme/custom/base.html b/theme/custom/base.html new file mode 100755 index 0000000..3e9f42b --- /dev/null +++ b/theme/custom/base.html @@ -0,0 +1,331 @@ +{% if 'jinja2.ext.i18n' not in JINJA_ENVIRONMENT.extensions and 'jinja2.ext.i18n' not in JINJA_EXTENSIONS %} + {%- macro _(msg) -%} + {{ msg % kwargs }} + {%- endmacro -%} +{% endif %} + + + + + + + + + + + {% if page in hidden_pages %} + + {% else %} + + {% endif %} + + {% if USE_GOOGLE_FONTS != False %} + + {% endif %} + + {% if USE_LESS %} + + + {% else %} + + {% endif %} + + {# DARK THEME STYLES #} + {% if THEME_COLOR == "dark" or THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR_ENABLE_USER_OVERRIDE %} + + {% endif %} + + {# PYGMENTS STYLES #} + {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR_ENABLE_USER_OVERRIDE or THEME_COLOR == "dark" %} + + {% endif %} + {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or not THEME_COLOR or THEME_COLOR == "light" %} + + {% endif %} + + {% if PLUGINS and 'tipue_search' in PLUGINS %} + + + + + + + {% endif %} + + + + + + {% if CUSTOM_CSS %} + + {% endif %} + + {% if FEED_ALL_ATOM %} + + {% endif %} + + {% if FEED_ALL_RSS %} + + {% endif %} + + {% if FAVICON %} + + + {% endif %} + + {% if GOOGLE_ANALYTICS %} + {% include "partial/ga.html" %} + {% endif %} + + {% if GOOGLE_GLOBAL_SITE_TAG %} + {% include "partial/ggst.html" %} + {% endif %} + + {% if BROWSER_COLOR %} + + + + + + + + + + {% endif %} + + {% if REL_CANONICAL %} + {% if page %} + + {% elif article %} + + {% elif page_name == 'index' and not articles_previous_page %} + + {% elif author or category or tag or page_name == 'index' %} + + {% else %} + + {% endif %} + {% endif %} + {% block meta %} + + + {% include "partial/og.html" %} + {% endblock %} + + {{ SITENAME }}{% block title %}{% endblock %} + + {% if GOOGLE_ADSENSE and GOOGLE_ADSENSE.page_level_ads %} + + + {% endif %} + {% if GOOGLE_TAG_MANAGER %} + {% include "partial/gtm.html" %} + {% endif %} + + + {% if GOOGLE_TAG_MANAGER %} + {% include "partial/gtm_noscript.html" %} + {% endif %} + +
+ {% if GOOGLE_ADSENSE and GOOGLE_ADSENSE.ads.main_menu %} + + + + {% endif %} + + {% if MAIN_MENU %} + + {% endif %} + + {% block content %} + {% endblock %} + +
+ {% if CC_LICENSE %} + {% include "partial/cc_license.html" %} + {% else %} + {% include "partial/copyright.html" %} + {% endif %} +
+
+ + {% if GUAGES %} + {% include "partial/guages.html" %} + {% endif %} + + {% if ADD_THIS_ID %} + + {% endif %} + + {% if (PIWIK_URL and PIWIK_SITE_ID) or (MATOMO_URL and MATOMO_SITE_ID) %} + {% include "partial/matomo.html" %} + {% endif %} + + {% include "partial/jsonld.html" %} + + {% if GITHUB_CORNER_URL %} + {% include 'partial/github.html' %} + {% endif %} + + {% if PLUGINS and 'tipue_search' in PLUGINS %} + + {% endif %} + + {% block additional_js %}{% endblock %} + + diff --git a/theme/custom/custom.css b/theme/custom/custom.css index f27695a..db4e5f5 100755 --- a/theme/custom/custom.css +++ b/theme/custom/custom.css @@ -1,14 +1,42 @@ -body { - color:#2e3440; +html[data-theme="dark"] { + --main-text-color: #d8dee9; + --main-background-color: #2e3440; + --side-background-color: #222; + --border-color: #4c566a; + --link-color: #88c0d0; } -main nav { - border-bottom: 1px solid #d8dee9; +html[data-theme="dark"] main article h1, main article h2 { + color: #5e81ac; } -hr { - background-color: #d8dee9; + +html[data-theme="dark"] main article a:hover { + background-color:#5e81ac; + color:#fff; } +html[data-theme="light"] { + --main-text-color: #2e3440; + --main-background-color: #fff; + --side-background-color: #2e3440; + --border-color: #eee; + --link-color: #5e81ac; +} + +body { + color: var(--main-text-color); + background-color: var(--main-background-color); +} +a { + color: var(--link-color); +} +aside { + background-color: var(--side-background-color); +} +aside, +aside a { + color:#eceff4 +} a.btn, .tag-cloud a, section#isso-thread section.auth-section p.post-action input { @@ -20,49 +48,34 @@ a.btn:hover, background-color:#5e81ac; color:#fff; } - -a { - color: #5e81ac; -} a:hover { color: #5e81ac; text-decoration:underline } - -aside { - background-color:#2e3440; -} - -aside, -aside a { - color:#eceff4 -} aside a:hover { color:#d8dee9; text-decoration:none; } -main article :not(pre)>code { - font-size:.8em; - white-space:nowrap; - color:#c25; - padding:1px 3px; - background-color:#f7f7f9; - border:1px solid #e1e1e8; - border-radius:3px + +aside a:hover { + color:#d8dee9; + text-decoration:none; } -main footer p { - margin:2px; - text-align:center; - padding:0 40px; - color:#999; - font-size:11px +hr { + background-color: var(--border-color); } + div.related-posts { margin:15px 0; padding-bottom:20px; - border-top:1px solid #eee; - border-bottom:1px solid #eee + border-top:1px solid var(--border-color); + border-bottom:1px solid var(--border-color); +} + + +main nav { + border-bottom: 1px solid #d8dee9; } ul.social a.sc-facebook { background-color:#3e5b98 @@ -138,6 +151,37 @@ ul.social a.sc-flickr { ul.social a.sc-lastfm { background-color:#d92323 } +main article table { + width: 100%; +} +.theme-switch { + color: unset; + background-color: unset; + border: 0px; +} +@media screen and (max-width: 768px) { + .theme-switch { + position: absolute; + top: 25px; + right: 25px; + } +} +@media screen and (min-width: 768px) { + .theme-switch { + position: fixed; + bottom: 10px; + } +} +main footer { + border-top: var(--border-color); +} +main footer p { + margin:2px; + text-align:center; + padding:0 40px; + color:#999; + font-size:11px +} div.admonition div, div.admonition p, div.admonition pre { @@ -183,9 +227,6 @@ div.figure { font-size:90%; color:#6c757d } -main article table { - width: 100%; -} main article table th.field-name { width: 10em; text-align: right; @@ -195,3 +236,12 @@ main article table th.field-name { main article table td.field-body { border-top: 0px; } +main article :not(pre)>code { + font-size:.8em; + white-space:nowrap; + color:#c25; + padding:1px 3px; + background-color:#f7f7f9; + border:1px solid #e1e1e8; + border-radius:3px +} -- cgit v1.2.3