mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-10 09:10:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add toggle to use browser's preferred theme (#224)

Browse source 
* Add Auto theme that uses browser's preferred color scheme

This will use dark mode automatically if the browser requests it.

* fixup! Add Auto theme that uses browser's preferred color scheme

* Use a toggle to use system theme
This commit is contained in:
Gregory Anders 2022-01-03 06:16:43 -07:00 • committed by GitHub
parent 63a0adaa6e
commit 11f395f65f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 74 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/client/state/cons.js
View file

@ -54,6 +54,7 @@ const cons = {
},
},
settings: {
TOGGLE_SYSTEM_THEME: 'TOGGLE_SYSTEM_THEME',
TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
@ -110,6 +111,7 @@ const cons = {
ATTACHMENT_CANCELED: 'ATTACHMENT_CANCELED',
},
settings: {
SYSTEM_THEME_TOGGLED: 'SYSTEM_THEME_TOGGLED',
MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',

28
src/client/state/settings.js
View file

@ -23,6 +23,7 @@ class Settings extends EventEmitter {
this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme'];
this.themeIndex = this.getThemeIndex();
this.useSystemTheme = this.getUseSystemTheme();
this.isMarkdown = this.getIsMarkdown();
this.isPeopleDrawer = this.getIsPeopleDrawer();
this.hideMembershipEvents = this.getHideMembershipEvents();
@ -56,6 +57,15 @@ class Settings extends EventEmitter {
this.themeIndex = themeIndex;
}
getUseSystemTheme() {
if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme;
const settings = getSettings();
if (settings === null) return false;
if (typeof settings.useSystemTheme === 'undefined') return false;
return settings.useSystemTheme;
}
getIsMarkdown() {
if (typeof this.isMarkdown === 'boolean') return this.isMarkdown;
@ -94,6 +104,24 @@ class Settings extends EventEmitter {
setter(action) {
const actions = {
[cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
this.useSystemTheme = !this.useSystemTheme;
setSettings('useSystemTheme', this.useSystemTheme);
const appBody = document.getElementById('appBody');
if (this.useSystemTheme) {
appBody.classList.add('system-theme');
this.themes.forEach((themeName) => {
if (themeName === '') return;
appBody.classList.remove(themeName);
});
} else {
appBody.classList.remove('system-theme');
this.setTheme(this.themeIndex);
}
this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
},
[cons.actions.settings.TOGGLE_MARKDOWN]: () => {
this.isMarkdown = !this.isMarkdown;
setSettings('isMarkdown', this.isMarkdown);