paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark_theme: Move color scheme classes from body to root element.

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2022-11-25 12:55:06 -08:00
committed by Tim Abbott
parent 2cf64b569e
commit 21f8d26040
5 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/js/dark_theme.js
View File

@@ -4,7 +4,7 @@ import {localstorage} from "./localstorage";
import {page_params} from "./page_params"; import {page_params} from "./page_params";
export function enable() { export function enable() {
$("body").removeClass("color-scheme-automatic").addClass("dark-theme"); $(":root").removeClass("color-scheme-automatic").addClass("dark-theme");
if (page_params.is_spectator) { if (page_params.is_spectator) {
const ls = localstorage(); const ls = localstorage();
@@ -13,7 +13,7 @@ export function enable() {
} }
export function disable() { export function disable() {
$("body").removeClass("color-scheme-automatic").removeClass("dark-theme"); $(":root").removeClass("color-scheme-automatic").removeClass("dark-theme");
if (page_params.is_spectator) { if (page_params.is_spectator) {
const ls = localstorage(); const ls = localstorage();
@@ -22,5 +22,5 @@ export function disable() {
} }
export function default_preference_checker() { export function default_preference_checker() {
$("body").removeClass("dark-theme").addClass("color-scheme-automatic"); $(":root").removeClass("dark-theme").addClass("color-scheme-automatic");
} }

2
static/js/realm_logo.js
View File

@@ -107,7 +107,7 @@ export function initialize() {
// Rerender the realm-logo when the browser detects color scheme changes. // Rerender the realm-logo when the browser detects color scheme changes.
const dark_mode_media_query_list = window.matchMedia("(prefers-color-scheme: dark)"); const dark_mode_media_query_list = window.matchMedia("(prefers-color-scheme: dark)");
dark_mode_media_query_list.addEventListener("change", () => { dark_mode_media_query_list.addEventListener("change", () => {
if ($("body").hasClass("color-scheme-automatic")) { if ($(":root").hasClass("color-scheme-automatic")) {
render(); render();
} }
}); });

12
static/styles/dark_theme.css
View File

@@ -1,13 +1,14 @@
@import url("flatpickr/dist/themes/dark.css"); @import url("flatpickr/dist/themes/dark.css");
body.dark-theme { :root.dark-theme {
/* the following block(s) are generated by the import statements. /* the following block(s) are generated by the import statements.
See postcss.config.js for details. See postcss.config.js for details.
*/ */
@extend %dark-theme-block; @extend %dark-theme-block;
background-color: hsl(212, 28%, 18%); body {
color: hsl(236, 33%, 90%); color: hsl(236, 33%, 90%);
}
.placeholder { .placeholder {
color: hsl(0, 0%, 55%); color: hsl(0, 0%, 55%);
@@ -134,6 +135,7 @@ body.dark-theme {
} }
} }
body,
.app-main, .app-main,
.header-main, .header-main,
#message_view_header_underpadding, #message_view_header_underpadding,
@@ -1334,13 +1336,13 @@ body.dark-theme {
} }
@supports (-moz-appearance: none) { @supports (-moz-appearance: none) {
body.dark-theme #settings_page select { :root.dark-theme #settings_page select {
background-color: hsla(0, 0%, 0%, 0.2); background-color: hsla(0, 0%, 0%, 0.2);
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body.color-scheme-automatic { :root.color-scheme-automatic {
@extend body.dark-theme; @extend :root.dark-theme;
} }
} }

4
templates/zerver/app/index.html
View File

@@ -52,10 +52,10 @@
animation-fill-mode: forwards; animation-fill-mode: forwards;
visibility: hidden; visibility: hidden;
} }
body.color-scheme-automatic #app-loading{ :root.color-scheme-automatic #app-loading {
color: hsl(0, 0%, 20%); color: hsl(0, 0%, 20%);
} }
body.dark-theme #app-loading { :root.dark-theme #app-loading {
background-color: hsl(212, 28%, 18%); background-color: hsl(212, 28%, 18%);
color: hsl(236, 33%, 90%); color: hsl(236, 33%, 90%);
} }

4
templates/zerver/base.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='{{LANGUAGE_CODE}}'> <html lang='{{LANGUAGE_CODE}}' {% if color_scheme == 1 %} class="color-scheme-automatic" {% elif color_scheme == 2 %} class="dark-theme" {% endif %}>
{# Base template for the whole site. #} {# Base template for the whole site. #}
@@ -37,7 +37,7 @@
{% endblock %} {% endblock %}
</head> </head>
<body {% if color_scheme == 1 %} class="color-scheme-automatic" {% elif color_scheme == 2 %} class="dark-theme" {% endif %}> <body>
{% block content %} {% block content %}
{% endblock %} {% endblock %}