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

FIX: do not override logo markup when loading page in dark mode

Browse Source 
Ensures that when loading the page in dark mode, logo can switch back to light logo if user toggles their OS appearance.
This commit is contained in:
Penar Musaraj 2020-08-18 20:33:42 -04:00
parent ed0e1e28b4
commit 1a7391a251
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
3 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js
View File

@ -91,10 +91,11 @@ export default {
); );
Session.currentProp( Session.currentProp(
"darkColorScheme", "defaultColorSchemeIsDark",
getComputedStyle(document.documentElement) !window.matchMedia("(prefers-color-scheme: dark)").matches &&
.getPropertyValue("--scheme-type") getComputedStyle(document.documentElement)
.trim() === "dark" .getPropertyValue("--scheme-type")
.trim() === "dark"
); );
Session.currentProp("highlightJsPath", setupData.highlightJsPath); Session.currentProp("highlightJsPath", setupData.highlightJsPath);

2
app/assets/javascripts/discourse/app/widgets/home-logo.js
View File

@ -85,7 +85,7 @@ export default createWidget("home-logo", {
// try dark logos first when color scheme is dark // try dark logos first when color scheme is dark
// this is independent of browser dark mode // this is independent of browser dark mode
// hence the fallback to normal logos // hence the fallback to normal logos
if (Session.currentProp("darkColorScheme")) { if (Session.currentProp("defaultColorSchemeIsDark")) {
return ( return (
siteSettings[`site_${name}_dark_url`] || siteSettings[`site_${name}_dark_url`] ||
siteSettings[`site_${name}_url`] || siteSettings[`site_${name}_url`] ||

8
test/javascripts/widgets/home-logo-test.js
View File

@ -202,10 +202,10 @@ widgetTest("dark color scheme and dark logo set", {
beforeEach() { beforeEach() {
this.siteSettings.site_logo_url = bigLogo; this.siteSettings.site_logo_url = bigLogo;
this.siteSettings.site_logo_dark_url = darkLogo; this.siteSettings.site_logo_dark_url = darkLogo;
Session.currentProp("darkColorScheme", true); Session.currentProp("defaultColorSchemeIsDark", true);
}, },
afterEach() { afterEach() {
Session.currentProp("darkColorScheme", null); Session.currentProp("defaultColorSchemeIsDark", null);
}, },
test(assert) { test(assert) {
assert.ok(find("img#site-logo.logo-big").length === 1); assert.ok(find("img#site-logo.logo-big").length === 1);
@ -222,10 +222,10 @@ widgetTest("dark color scheme and dark logo not set", {
beforeEach() { beforeEach() {
this.siteSettings.site_logo_url = bigLogo; this.siteSettings.site_logo_url = bigLogo;
this.siteSettings.site_logo_dark_url = ""; this.siteSettings.site_logo_dark_url = "";
Session.currentProp("darkColorScheme", true); Session.currentProp("defaultColorSchemeIsDark", true);
}, },
afterEach() { afterEach() {
Session.currentProp("darkColorScheme", null); Session.currentProp("defaultColorSchemeIsDark", null);
}, },
test(assert) { test(assert) {
assert.ok(find("img#site-logo.logo-big").length === 1); assert.ok(find("img#site-logo.logo-big").length === 1);