github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 13:13:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Switch logos live when changing color schemes in user prefs (#13684)

Browse Source
This commit is contained in:
Penar Musaraj 2021-07-09 14:07:00 -04:00 committed by GitHub
parent 696bd0bf05
commit c7cdebd931
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/components/site-header.js
View File

@ -29,7 +29,9 @@ const SiteHeaderComponent = MountWidget.extend(
@observes(
"currentUser.unread_notifications",
"currentUser.unread_high_priority_notifications",
"currentUser.reviewable_count"
"currentUser.reviewable_count",
"session.defaultColorSchemeIsDark",
"session.darkModeAvailable"
)
notificationsChanged() {
this.queueRerender();

3
app/assets/javascripts/discourse/app/controllers/preferences/interface.js
View File

@ -1,4 +1,5 @@
import Controller, { inject as controller } from "@ember/controller";
import Session from "discourse/models/session";
import {
iOSWithVisualViewport,
isiPad,
@ -392,8 +393,10 @@ export default Controller.extend({
this.themeId,
true
);
Session.currentProp("darkModeAvailable", false);
} else {
loadColorSchemeStylesheet(colorSchemeId, this.themeId, true);
Session.currentProp("darkModeAvailable", true);
}
},

20
app/assets/javascripts/discourse/app/lib/color-scheme-picker.js
View File

@ -1,6 +1,8 @@
import cookie, { removeCookie } from "discourse/lib/cookie";
import I18n from "I18n";
import Session from "discourse/models/session";
import { ajax } from "discourse/lib/ajax";
import { later } from "@ember/runloop";
export function listColorSchemes(site, options = {}) {
let schemes = site.get("user_color_schemes");
@ -49,20 +51,20 @@ export function listColorSchemes(site, options = {}) {
export function loadColorSchemeStylesheet(
colorSchemeId,
theme_id,
dark = false
darkMode = false
) {
const themeId = theme_id ? `/${theme_id}` : "";
ajax(`/color-scheme-stylesheet/${colorSchemeId}${themeId}.json`).then(
(result) => {
if (result && result.new_href) {
const elementId = dark ? "cs-preview-dark" : "cs-preview-light";
const elementId = darkMode ? "cs-preview-dark" : "cs-preview-light";
const existingElement = document.querySelector(`link#${elementId}`);
if (existingElement) {
existingElement.href = result.new_href;
} else {
let link = document.createElement("link");
link.href = result.new_href;
link.media = dark
link.media = darkMode
? "(prefers-color-scheme: dark)"
: "(prefers-color-scheme: light)";
link.rel = "stylesheet";
@ -70,6 +72,18 @@ export function loadColorSchemeStylesheet(
document.body.appendChild(link);
}
if (!darkMode) {
later(() => {
const schemeType = getComputedStyle(document.body).getPropertyValue(
"--scheme-type"
);
Session.currentProp(
"defaultColorSchemeIsDark",
schemeType.trim() === "dark"
);
}, 500);
}
}
}
);