Follow system theme by default
This commit is contained in:
parent
009966a5c7
commit
5c0eb20cb4
4 changed files with 46 additions and 37 deletions
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
|
@ -1,4 +1,4 @@
|
|||
<!-- Please read https://github.com/ajbura/cinny/CONTRIBUTING.md before submitting your pull request -->
|
||||
<!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
|
||||
|
||||
### Description
|
||||
<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
|
||||
|
|
|
@ -57,23 +57,25 @@ function AppearanceSection() {
|
|||
)}
|
||||
content={<Text variant="b3">Use light or dark mode based on the system settings.</Text>}
|
||||
/>
|
||||
{!settings.useSystemTheme && (
|
||||
<SettingTile
|
||||
title="Theme"
|
||||
content={(
|
||||
<SegmentedControls
|
||||
selected={settings.getThemeIndex()}
|
||||
segments={[
|
||||
{ text: 'Light' },
|
||||
{ text: 'Silver' },
|
||||
{ text: 'Dark' },
|
||||
{ text: 'Butter' },
|
||||
]}
|
||||
onSelect={(index) => settings.setTheme(index)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<SettingTile
|
||||
title="Theme"
|
||||
content={(
|
||||
<SegmentedControls
|
||||
selected={settings.useSystemTheme ? -1 : settings.getThemeIndex()}
|
||||
segments={[
|
||||
{ text: 'Light' },
|
||||
{ text: 'Silver' },
|
||||
{ text: 'Dark' },
|
||||
{ text: 'Butter' },
|
||||
]}
|
||||
onSelect={(index) => {
|
||||
if (settings.useSystemTheme) toggleSystemTheme();
|
||||
settings.setTheme(index);
|
||||
updateState({});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-appearance__card">
|
||||
<MenuHeader>Room messages</MenuHeader>
|
||||
|
|
|
@ -48,31 +48,43 @@ class Settings extends EventEmitter {
|
|||
return this.themes[this.themeIndex];
|
||||
}
|
||||
|
||||
setTheme(themeIndex) {
|
||||
const appBody = document.getElementById('appBody');
|
||||
|
||||
appBody.classList.remove('system-theme');
|
||||
_clearTheme() {
|
||||
document.body.classList.remove('system-theme');
|
||||
this.themes.forEach((themeName) => {
|
||||
if (themeName === '') return;
|
||||
appBody.classList.remove(themeName);
|
||||
document.body.classList.remove(themeName);
|
||||
});
|
||||
// If use system theme is enabled
|
||||
// we will override current theme choice with system theme
|
||||
}
|
||||
|
||||
applyTheme() {
|
||||
this._clearTheme();
|
||||
if (this.useSystemTheme) {
|
||||
appBody.classList.add('system-theme');
|
||||
} else if (this.themes[themeIndex] !== '') {
|
||||
appBody.classList.add(this.themes[themeIndex]);
|
||||
document.body.classList.add('system-theme');
|
||||
} else if (this.themes[this.themeIndex]) {
|
||||
document.body.classList.add(this.themes[this.themeIndex]);
|
||||
}
|
||||
setSettings('themeIndex', themeIndex);
|
||||
}
|
||||
|
||||
setTheme(themeIndex) {
|
||||
this.themeIndex = themeIndex;
|
||||
setSettings('themeIndex', this.themeIndex);
|
||||
this.applyTheme();
|
||||
}
|
||||
|
||||
toggleUseSystemTheme() {
|
||||
this.useSystemTheme = !this.useSystemTheme;
|
||||
setSettings('useSystemTheme', this.useSystemTheme);
|
||||
this.applyTheme();
|
||||
|
||||
this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
|
||||
}
|
||||
|
||||
getUseSystemTheme() {
|
||||
if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return false;
|
||||
if (typeof settings.useSystemTheme === 'undefined') return false;
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.useSystemTheme === 'undefined') return true;
|
||||
return settings.useSystemTheme;
|
||||
}
|
||||
|
||||
|
@ -138,12 +150,7 @@ class Settings extends EventEmitter {
|
|||
setter(action) {
|
||||
const actions = {
|
||||
[cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
|
||||
this.useSystemTheme = !this.useSystemTheme;
|
||||
|
||||
setSettings('useSystemTheme', this.useSystemTheme);
|
||||
this.setTheme(this.themeIndex);
|
||||
|
||||
this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
|
||||
this.toggleUseSystemTheme();
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_MARKDOWN]: () => {
|
||||
this.isMarkdown = !this.isMarkdown;
|
||||
|
|
|
@ -7,7 +7,7 @@ import settings from './client/state/settings';
|
|||
|
||||
import App from './app/pages/App';
|
||||
|
||||
settings.setTheme(settings.getThemeIndex());
|
||||
settings.applyTheme();
|
||||
|
||||
ReactDom.render(
|
||||
<App />,
|
||||
|
|
Loading…
Reference in a new issue