From f4b5e042e981db144c8b90f211bec31b96522617 Mon Sep 17 00:00:00 2001 From: Emil Ghitta Date: Fri, 10 Apr 2026 19:42:36 +0300 Subject: [PATCH] Add dark mode --- kitsune/sumo/jinja2/base.html | 41 ++++ .../sumo/jinja2/includes/common_macros.html | 20 +- kitsune/sumo/static/sumo/js/alpine.js | 3 + kitsune/sumo/static/sumo/js/messages.js | 2 +- kitsune/sumo/static/sumo/js/theme-toggle.js | 61 +++++ kitsune/sumo/static/sumo/js/wiki.js | 4 +- .../sumo/static/sumo/scss/base/_reset.scss | 1 + .../sumo/static/sumo/scss/base/_table.scss | 36 +++ .../static/sumo/scss/base/forms/_buttons.scss | 10 + .../static/sumo/scss/base/forms/_fields.scss | 35 ++- .../scss/base/forms/_simple-search-form.scss | 14 ++ .../static/sumo/scss/base/forms/_toggles.scss | 2 +- .../static/sumo/scss/components/_banner.scss | 3 +- .../static/sumo/scss/components/_card.scss | 21 +- .../sumo/scss/components/_dashboards.scss | 32 +++ .../sumo/scss/components/_editor-tools.scss | 10 + .../static/sumo/scss/components/_flaggit.scss | 15 +- .../static/sumo/scss/components/_groups.scss | 147 ++++++++++- .../static/sumo/scss/components/_index.scss | 6 +- .../scss/components/_kbox--todo-remove.scss | 4 +- .../sumo/scss/components/_messages.scss | 34 ++- .../static/sumo/scss/components/_modal.scss | 12 + .../components/_product-picker-dropdown.scss | 15 +- .../sumo/scss/components/_progress-bar.scss | 10 +- .../components/_protocol-dark-bridge.scss | 150 ++++++++++++ .../sumo/scss/components/_sidebar-nav.scss | 44 +++- .../scss/components/_users.autocomplete.scss | 11 +- .../static/sumo/scss/components/_wiki.scss | 231 +++++++++++++++--- .../static/sumo/scss/config/_elevation.scss | 17 +- .../sumo/scss/config/_project-theme.scss | 75 +++++- .../sumo/static/sumo/scss/layout/_aaq.scss | 20 +- .../static/sumo/scss/layout/_community.scss | 19 +- .../static/sumo/scss/layout/_document.scss | 25 +- .../sumo/static/sumo/scss/layout/_forum.scss | 116 +++++++++ .../sumo/static/sumo/scss/layout/_nav.scss | 74 +++++- .../static/sumo/scss/layout/_products.scss | 2 +- .../static/sumo/scss/layout/_topic-page.scss | 9 + svelte/contribute/Contribute.svelte | 4 +- 38 files changed, 1205 insertions(+), 130 deletions(-) create mode 100644 kitsune/sumo/static/sumo/js/theme-toggle.js create mode 100644 kitsune/sumo/static/sumo/scss/components/_protocol-dark-bridge.scss diff --git a/kitsune/sumo/jinja2/base.html b/kitsune/sumo/jinja2/base.html index abbff340d41..c88868ae7df 100644 --- a/kitsune/sumo/jinja2/base.html +++ b/kitsune/sumo/jinja2/base.html @@ -3,8 +3,14 @@ {% if request.LANGUAGE_CODE == 'xx' %} {% set meta = [('robots', 'noindex')] %} {% endif %} +{# Read the theme cookie set by theme-toggle.js so we can pre-render the correct #} +{# data-theme and background inline — this eliminates a potential navigation flash entirely #} +{# because the HTML arrives from the server already styled, before any JS runs. #} +{% set _theme_cookie = request.COOKIES.get('sumo-theme', '') %} +{% set _is_dark = _theme_cookie == 'dark' %} + {# ============================================================ #} + {# Theme flash prevention #} + {# Primary: data-theme + style are pre-rendered by Django from #} + {# the sumo-theme cookie (set by theme-toggle.js on toggle). #} + {# Fallback: inline style + script cover first-time visitors #} + {# (no cookie yet) who rely on OS dark mode. #} + {# #1C1B22 = --color-dark-gray-09 = --page-bg in dark mode. #} + {# ============================================================ #} + + {# Fallback for first-time OS-dark visitors with no cookie yet. #} + + {% include "includes/google-analytics.html" %} {% block head_top %}{% endblock %} @@ -137,6 +165,19 @@ {% endif %} +
+ +
+