diff --git a/static/js/dark_theme.js b/static/js/dark_theme.js index 9e564f3649..9b9ef2e942 100644 --- a/static/js/dark_theme.js +++ b/static/js/dark_theme.js @@ -4,7 +4,7 @@ import {localstorage} from "./localstorage"; import {page_params} from "./page_params"; export function enable() { - $("body").removeClass("color-scheme-automatic").addClass("dark-theme"); + $(":root").removeClass("color-scheme-automatic").addClass("dark-theme"); if (page_params.is_spectator) { const ls = localstorage(); @@ -13,7 +13,7 @@ export function enable() { } export function disable() { - $("body").removeClass("color-scheme-automatic").removeClass("dark-theme"); + $(":root").removeClass("color-scheme-automatic").removeClass("dark-theme"); if (page_params.is_spectator) { const ls = localstorage(); @@ -22,5 +22,5 @@ export function disable() { } export function default_preference_checker() { - $("body").removeClass("dark-theme").addClass("color-scheme-automatic"); + $(":root").removeClass("dark-theme").addClass("color-scheme-automatic"); } diff --git a/static/js/realm_logo.js b/static/js/realm_logo.js index 88ba198fc9..265576a4ce 100644 --- a/static/js/realm_logo.js +++ b/static/js/realm_logo.js @@ -107,7 +107,7 @@ export function initialize() { // Rerender the realm-logo when the browser detects color scheme changes. const dark_mode_media_query_list = window.matchMedia("(prefers-color-scheme: dark)"); dark_mode_media_query_list.addEventListener("change", () => { - if ($("body").hasClass("color-scheme-automatic")) { + if ($(":root").hasClass("color-scheme-automatic")) { render(); } }); diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css index 47587a3263..b480e7efbb 100644 --- a/static/styles/dark_theme.css +++ b/static/styles/dark_theme.css @@ -1,13 +1,14 @@ @import url("flatpickr/dist/themes/dark.css"); -body.dark-theme { +:root.dark-theme { /* the following block(s) are generated by the import statements. See postcss.config.js for details. */ @extend %dark-theme-block; - background-color: hsl(212, 28%, 18%); - color: hsl(236, 33%, 90%); + body { + color: hsl(236, 33%, 90%); + } .placeholder { color: hsl(0, 0%, 55%); @@ -134,6 +135,7 @@ body.dark-theme { } } + body, .app-main, .header-main, #message_view_header_underpadding, @@ -1334,13 +1336,13 @@ body.dark-theme { } @supports (-moz-appearance: none) { - body.dark-theme #settings_page select { + :root.dark-theme #settings_page select { background-color: hsla(0, 0%, 0%, 0.2); } } @media (prefers-color-scheme: dark) { - body.color-scheme-automatic { - @extend body.dark-theme; + :root.color-scheme-automatic { + @extend :root.dark-theme; } } diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html index 4fea28d98e..050a01a552 100644 --- a/templates/zerver/app/index.html +++ b/templates/zerver/app/index.html @@ -52,10 +52,10 @@ animation-fill-mode: forwards; visibility: hidden; } - body.color-scheme-automatic #app-loading{ + :root.color-scheme-automatic #app-loading { color: hsl(0, 0%, 20%); } - body.dark-theme #app-loading { + :root.dark-theme #app-loading { background-color: hsl(212, 28%, 18%); color: hsl(236, 33%, 90%); } diff --git a/templates/zerver/base.html b/templates/zerver/base.html index 17c604657f..c057dee427 100644 --- a/templates/zerver/base.html +++ b/templates/zerver/base.html @@ -1,5 +1,5 @@ - + {# Base template for the whole site. #} @@ -37,7 +37,7 @@ {% endblock %} - + {% block content %} {% endblock %}