github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-29 00:24:36 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Improve manual color scheme toggle in styleguide (#21629)

Browse Source
This commit is contained in:
Penar Musaraj 2023-05-18 01:31:20 -04:00 committed by GitHub
parent 1de8361d2e
commit a25bb81a64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.hbs
View File

@ -1 +1,3 @@
<DButton @action={{this.toggle}} class="toggle-color-mode">Toggle color</DButton> {{#if this.shouldRender}}
<DButton @action={{this.toggle}} class="toggle-color-mode">Toggle color</DButton>
{{/if}}

27
plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
View File

@ -2,13 +2,17 @@ import Component from "@glimmer/component";
import { action } from "@ember/object"; import { action } from "@ember/object";
import { inject as service } from "@ember/service"; import { inject as service } from "@ember/service";
import { tracked } from "@glimmer/tracking"; import { tracked } from "@glimmer/tracking";
import { loadColorSchemeStylesheet } from "discourse/lib/color-scheme-picker";
import { currentThemeId } from "discourse/lib/theme-selector";
const DARK = "dark"; const DARK = "dark";
const LIGHT = "light"; const LIGHT = "light";
function colorSchemeOverride(type) { function colorSchemeOverride(type) {
const lightScheme = document.querySelector("link.light-scheme"); const lightScheme = document.querySelector("link.light-scheme");
const darkScheme = document.querySelector("link.dark-scheme"); const darkScheme =
document.querySelector("link.dark-scheme") ||
document.querySelector("link#cs-preview-dark");
if (!lightScheme && !darkScheme) { if (!lightScheme && !darkScheme) {
return; return;
@ -42,8 +46,29 @@ function colorSchemeOverride(type) {
export default class ToggleColorMode extends Component { export default class ToggleColorMode extends Component {
@service keyValueStore; @service keyValueStore;
@service siteSettings;
@tracked colorSchemeOverride = this.default; @tracked colorSchemeOverride = this.default;
@tracked shouldRender = true;
constructor() {
super(...arguments);
// If site has a dark color scheme set but user doesn't auto switch in dark mode
// we need to load the stylesheet manually
if (!document.querySelector("link.dark-scheme")) {
if (this.siteSettings.default_dark_mode_color_scheme_id > 0) {
loadColorSchemeStylesheet(
this.siteSettings.default_dark_mode_color_scheme_id,
currentThemeId(),
true
);
} else {
// no dark color scheme available, hide button
this.shouldRender = false;
}
}
}
get default() { get default() {
return window.matchMedia("(prefers-color-scheme: dark)").matches return window.matchMedia("(prefers-color-scheme: dark)").matches