paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-01 12:33:40 +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";
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");
}

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.
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();
}
});

14
static/styles/dark_theme.css
View File

@@ -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;
}
}

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

@@ -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%);
}

4
templates/zerver/base.html
View File

@@ -1,5 +1,5 @@
<!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. #}
@@ -37,7 +37,7 @@
{% endblock %}
</head>
<body {% if color_scheme == 1 %} class="color-scheme-automatic" {% elif color_scheme == 2 %} class="dark-theme" {% endif %}>
<body>
{% block content %}
{% endblock %}