supnas/cinny
2
1
Fork 0
Code Issues 3 Pull requests Activity

Follow system theme by default

Browse source
This commit is contained in:
Ajay Bura 2022-07-09 18:08:35 +05:30
parent 009966a5c7
commit 5c0eb20cb4
4 changed files with 46 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/PULL_REQUEST_TEMPLATE.md vendored
View file

@ -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 ### Description
<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. --> <!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->

34
src/app/organisms/settings/Settings.jsx
View file

@ -57,23 +57,25 @@ function AppearanceSection() {
)} )}
content={<Text variant="b3">Use light or dark mode based on the system settings.</Text>} content={<Text variant="b3">Use light or dark mode based on the system settings.</Text>}
/> />
{!settings.useSystemTheme && ( <SettingTile
<SettingTile title="Theme"
title="Theme" content={(
content={( <SegmentedControls
<SegmentedControls selected={settings.useSystemTheme ? -1 : settings.getThemeIndex()}
selected={settings.getThemeIndex()} segments={[
segments={[ { text: 'Light' },
{ text: 'Light' }, { text: 'Silver' },
{ text: 'Silver' }, { text: 'Dark' },
{ text: 'Dark' }, { text: 'Butter' },
{ text: 'Butter' }, ]}
]} onSelect={(index) => {
onSelect={(index) => settings.setTheme(index)} if (settings.useSystemTheme) toggleSystemTheme();
/> settings.setTheme(index);
)} updateState({});
/> }}
/>
)} )}
/>
</div> </div>
<div className="settings-appearance__card"> <div className="settings-appearance__card">
<MenuHeader>Room messages</MenuHeader> <MenuHeader>Room messages</MenuHeader>

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

@ -48,31 +48,43 @@ class Settings extends EventEmitter {
return this.themes[this.themeIndex]; return this.themes[this.themeIndex];
} }
setTheme(themeIndex) { _clearTheme() {
const appBody = document.getElementById('appBody'); document.body.classList.remove('system-theme');
appBody.classList.remove('system-theme');
this.themes.forEach((themeName) => { this.themes.forEach((themeName) => {
if (themeName === '') return; 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) { if (this.useSystemTheme) {
appBody.classList.add('system-theme'); document.body.classList.add('system-theme');
} else if (this.themes[themeIndex] !== '') { } else if (this.themes[this.themeIndex]) {
appBody.classList.add(this.themes[themeIndex]); document.body.classList.add(this.themes[this.themeIndex]);
} }
setSettings('themeIndex', themeIndex); }
setTheme(themeIndex) {
this.themeIndex = 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() { getUseSystemTheme() {
if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme; if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme;
const settings = getSettings(); const settings = getSettings();
if (settings === null) return false; if (settings === null) return true;
if (typeof settings.useSystemTheme === 'undefined') return false; if (typeof settings.useSystemTheme === 'undefined') return true;
return settings.useSystemTheme; return settings.useSystemTheme;
} }
@ -138,12 +150,7 @@ class Settings extends EventEmitter {
setter(action) { setter(action) {
const actions = { const actions = {
[cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => { [cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
this.useSystemTheme = !this.useSystemTheme; this.toggleUseSystemTheme();
setSettings('useSystemTheme', this.useSystemTheme);
this.setTheme(this.themeIndex);
this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
}, },
[cons.actions.settings.TOGGLE_MARKDOWN]: () => { [cons.actions.settings.TOGGLE_MARKDOWN]: () => {
this.isMarkdown = !this.isMarkdown; this.isMarkdown = !this.isMarkdown;

2
src/index.jsx
View file

@ -7,7 +7,7 @@ import settings from './client/state/settings';
import App from './app/pages/App'; import App from './app/pages/App';
settings.setTheme(settings.getThemeIndex()); settings.applyTheme();
ReactDom.render( ReactDom.render(
<App />, <App />,