#27k2vbb: System theme settings

electron.js

@@ -124,16 +124,23 @@ function trayIcon () {
 	if (is.windows) {
 		return path.join(__dirname, '/electron/icon64x64.png');
 	} else {
-		const dark = nativeTheme.shouldUseDarkColors || nativeTheme.shouldUseHighContrastColors || nativeTheme.shouldUseInvertedColorScheme;
-		return path.join(__dirname, '/electron/icon-tray-' + (dark ? 'white' : 'black') + '.png');
+		return path.join(__dirname, '/electron/icon-tray-' + (isDarkTheme() ? 'white' : 'black') + '.png');
 	};
 };
 
-nativeTheme.on('updated', () => {
+nativeTheme.on('updated', () => { initTheme(); });
+
+function isDarkTheme () {
+	return nativeTheme.shouldUseDarkColors || nativeTheme.shouldUseHighContrastColors || nativeTheme.shouldUseInvertedColorScheme;
+};
+
+function initTheme () {
 	if (tray) {
 		tray.setImage(trayIcon());
 	};
-});
+
+	send('native-theme', isDarkTheme());
+};
 
 function initTray () {
 	tray = new Tray (trayIcon());
@@ -287,8 +294,7 @@ function createWindow () {
 	};
 
 	ipcMain.on('appLoaded', () => {
-		send('dataPath', dataPath.join('/'));
-		send('config', config);
+		send('init', dataPath.join('/'), config, isDarkTheme());
 	});
 
 	ipcMain.on('keytarSet', (e, key, value) => {
@@ -398,14 +404,23 @@ function createWindow () {
 
 function getBgColor () {
 	let { theme } = config;
-	let bg = '#fff';
+	let light = '#fff';
+	let dark = '#2c2b27';
+	let bg = '';
 
 	switch (theme) {
+		default:
+			bg = light;
+			break;
+
 		case 'dark':
-			bg = '#2c2b27';
+			bg = dark;
+			break;
+
+		case 'system':
+			bg = isDarkTheme() ? dark : light;
 			break;
 	};
-
 	return bg;
 };
 

src/img/icon/popup/settings/theme/system.svg

@@ -0,0 +1,6 @@
+<svg width="120" height="60" viewBox="0 0 120 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="119" height="58.9913" rx="11.5" fill="white" stroke="#DFDDD0"/>
+<path d="M60 0H108C114.627 0 120 5.37258 120 12V48C120 54.6274 114.627 60 108 60H60V0Z" fill="black"/>
+<path d="M67.2618 39.3082C66.294 39.3082 65.4223 39.1359 64.6467 38.7912C63.8778 38.4399 63.2679 37.9228 62.8172 37.2401C62.373 36.5573 62.151 35.7154 62.151 34.7145C62.151 33.8527 62.3101 33.1402 62.6283 32.5767C62.9464 32.0133 63.3806 31.5625 63.9308 31.2244C64.481 30.8864 65.1008 30.6312 65.7902 30.4588C66.4862 30.2798 67.2054 30.1506 67.9479 30.071C68.8427 29.9782 69.5686 29.8954 70.1254 29.8224C70.6822 29.7429 71.0866 29.6236 71.3385 29.4645C71.597 29.2988 71.7263 29.0436 71.7263 28.6989V28.6392C71.7263 27.8902 71.5042 27.3101 71.0601 26.8991C70.6159 26.4882 69.9763 26.2827 69.141 26.2827C68.2594 26.2827 67.5601 26.4749 67.043 26.8594C66.5326 27.2438 66.1879 27.6979 66.0089 28.2216L62.6481 27.7443C62.9133 26.8163 63.3508 26.0407 63.9606 25.4176C64.5705 24.7879 65.3162 24.3172 66.1979 24.0057C67.0795 23.6875 68.0539 23.5284 69.1211 23.5284C69.8569 23.5284 70.5894 23.6146 71.3186 23.7869C72.0478 23.9593 72.714 24.2443 73.3172 24.642C73.9204 25.0331 74.4043 25.5668 74.7689 26.2429C75.1401 26.919 75.3257 27.7642 75.3257 28.7784V39H71.8655V36.902H71.7461C71.5274 37.3262 71.2192 37.724 70.8214 38.0952C70.4303 38.4598 69.9365 38.7547 69.3399 38.9801C68.7499 39.1989 68.0572 39.3082 67.2618 39.3082ZM68.1964 36.6634C68.919 36.6634 69.5454 36.5208 70.0757 36.2358C70.606 35.9441 71.0137 35.5597 71.2987 35.0824C71.5904 34.6051 71.7362 34.0848 71.7362 33.5213V31.7216C71.6235 31.8144 71.4313 31.9006 71.1595 31.9801C70.8944 32.0597 70.5961 32.1293 70.2646 32.1889C69.9332 32.2486 69.6051 32.3016 69.2802 32.348C68.9554 32.3944 68.6737 32.4342 68.4351 32.4673C67.8981 32.5402 67.4176 32.6596 66.9933 32.8253C66.5691 32.991 66.2343 33.223 65.989 33.5213C65.7438 33.813 65.6211 34.1908 65.6211 34.6548C65.6211 35.3177 65.8631 35.8182 66.347 36.1562C66.8309 36.4943 67.4474 36.6634 68.1964 36.6634Z" fill="white"/>
+<path d="M44.641 39H40.7035L47.8726 18.6364H52.4265L59.6055 39H55.668L50.2291 22.8125H50.07L44.641 39ZM44.7703 31.0156H55.5089V33.9787H44.7703V31.0156Z" fill="black"/>
+</svg>

src/scss/popup/settings.scss

@@ -101,6 +101,7 @@
 
 				.icon.light .inner { background-image: url('~img/icon/popup/settings/theme/light.svg'); }
 				.icon.dark .inner { background-image: url('~img/icon/popup/settings/theme/dark.svg'); }
+				.icon.system .inner { background-image: url('~img/icon/popup/settings/theme/system.svg'); }
 			}
 
 			.btn.active {

src/ts/app.tsx

@@ -343,7 +343,7 @@ class App extends React.Component<Props, State> {
 		const phrase = Storage.get('phrase');
 		const renderer = Util.getRenderer();
 		const restoreKeys = [
-			'theme', 'pinTime', 'defaultType', 'autoSidebar',
+			'pinTime', 'defaultType', 'autoSidebar',
 		];
 
 		// Check auth phrase with keytar
@@ -390,6 +390,10 @@ class App extends React.Component<Props, State> {
 
 		head.find('#link-prism').remove();
 
+		if (theme == 'system') {
+			theme = commonStore.nativeTheme;
+		};
+
 		if (theme) {
 			head.append(`<link id="link-prism" rel="stylesheet" href="./css/theme/${theme}/prism.css" />`);
 		};
@@ -407,12 +411,17 @@ class App extends React.Component<Props, State> {
 
 		renderer.send('appLoaded', true);
 
-		renderer.on('dataPath', (e: any, dataPath: string) => {
+		renderer.on('init', (e: any, dataPath: string, config: any, isDark: boolean) => {
 			authStore.pathSet(dataPath);
 			Storage.init(dataPath);
 
 			this.initStorage();
-			this.initTheme(commonStore.theme);
+
+			commonStore.nativeThemeSet(isDark);
+			commonStore.configSet(config, true);
+			commonStore.themeSet(config.theme);
+
+			this.initTheme(config.theme);
 
 			window.setTimeout(() => {
 				logo.css({ opacity: 0 });
@@ -550,6 +559,11 @@ class App extends React.Component<Props, State> {
 			commonStore.fullscreenSet(false);
 		});
 
+		renderer.on('native-theme', (e: any, isDark: boolean) => {
+			commonStore.nativeThemeSet(isDark);
+			commonStore.themeSet(commonStore.theme);
+  		});
+
 		renderer.on('debugSync', (e: any) => {
 			C.DebugSync(100, (message: any) => {
 				if (!message.error.code) {

src/ts/component/page/index.tsx

@@ -81,7 +81,7 @@ const Page = observer(class Page extends React.Component<Props, {}> {
 
 	render () {
 		const { isPopup } = this.props;
-		const { config } = commonStore;
+		const { config, theme } = commonStore;
 		const { account } = authStore;
 		const match = this.getMatch();
 		const { page, action } = match.params || {};
@@ -218,6 +218,8 @@ const Page = observer(class Page extends React.Component<Props, {}> {
 		this.event();
 		this.unbind();
 
+		commonStore.themeSet(commonStore.theme);
+
 		win.on('resize.page' + (isPopup ? 'Popup' : ''), () => { this.resize(); });
 
 		if (!isPopup) {
@@ -350,7 +352,7 @@ const Page = observer(class Page extends React.Component<Props, {}> {
 	};
 	
 	setBodyClass () {
-		const { config, theme } = commonStore;
+		const { config } = commonStore;
 		const platform = Util.getPlatform();
 		const cn = [ 
 			this.getClass('body'), 
@@ -358,13 +360,10 @@ const Page = observer(class Page extends React.Component<Props, {}> {
 		];
 		const obj = $('html');
 
-		if (theme) {
-			cn.push(Util.toCamelCase(`theme-${theme}`));
-		};
-
 		if (config.debug.ui) {
 			cn.push('debug');
 		};
+
 		obj.attr({ class: cn.join(' ') });
 	};
 	

src/ts/component/popup/settings.tsx

@@ -272,6 +272,7 @@ const PopupSettings = observer(class PopupSettings extends React.Component<Props
 				const themes: any[] = [
 					{ id: '', class: 'light', name: 'Light' },
 					{ id: 'dark', class: 'dark', name: 'Dark' },
+					{ id: 'system', class: 'system', name: 'System' },
 				];
 
 				const inner = <div className="inner"></div>;
@@ -295,7 +296,7 @@ const PopupSettings = observer(class PopupSettings extends React.Component<Props
 									<div 
 										key={i} 
 										className={[ 'btn', (theme == item.id ? 'active' : '') ].join(' ')} 
-										onClick={() => { commonStore.themeSet(item.id); }}
+										onClick={() => { this.onTheme(item.id); }}
 									>
 										<Icon className={item.class} inner={inner} />
 										<Label text={item.name} />
@@ -884,6 +885,14 @@ const PopupSettings = observer(class PopupSettings extends React.Component<Props
 		});
 	};
 
+	onTheme (id: string) {
+		const renderer = Util.getRenderer();
+
+		commonStore.themeSet(id);
+		renderer.send('configSet', { theme: id });
+		analytics.event('ThemeSet', { id });
+	};
+
 	onTypeChange (id: string) {
 		commonStore.defaultTypeSet(id);
 		analytics.event('DefaultTypeChange', { objectType: id });

src/ts/lib/util.tsx

@@ -939,6 +939,7 @@ class Util {
 		if (v) {
 			c.push(this.toCamelCase(`${prefix}-${v}`));
 		};
+
 		obj.attr({ class: c.join(' ') });
 	};
 

src/ts/store/common.tsx

@@ -47,6 +47,7 @@ class CommonStore {
     public configObj: any = {};
     public cellId: string = '';
 	public themeId: string = '';
+	public nativeThemeIsDark: boolean = false;
 	public typeId: string = '';
 	public pinTimeId: number = 0;
 	public sidebarObj: Sidebar = { width: 0, height: 0, x: 0, y: 0, fixed: false, snap: I.MenuDirection.Left };
@@ -65,6 +66,7 @@ class CommonStore {
             previewObj: observable,
             configObj: observable,
 			themeId: observable,
+			nativeThemeIsDark: observable,
 			typeId: observable,
 			isFullScreen: observable,
             config: computed,
@@ -75,6 +77,7 @@ class CommonStore {
             coverImage: computed,
             gateway: computed,
 			theme: computed,
+			nativeTheme: computed,
 			sidebar: computed,
             coverSet: action,
             coverSetUploadedImage: action,
@@ -86,6 +89,7 @@ class CommonStore {
             filterSet: action,
             previewSet: action,
 			themeSet: action,
+			nativeThemeSet: action,
 			sidebarSet: action,
         });
     };
@@ -138,6 +142,10 @@ class CommonStore {
 		return String(this.themeId || '');
 	};
 
+	get nativeTheme(): string {
+		return this.nativeThemeIsDark ? 'dark' : '';
+	};
+
 	get sidebar(): Sidebar {
 		return this.sidebarObj;
 	};
@@ -227,14 +235,21 @@ class CommonStore {
 	};
 
 	themeSet (v: string) {
-		const renderer = Util.getRenderer();
+		console.log('[themeSet]', this.nativeThemeIsDark, v);
 
 		this.themeId = v;
 		Storage.set('theme', v);
-		Util.addBodyClass('theme', v);
 
-		renderer.send('configSet', { theme: v });
-		analytics.event('ThemeSet', { id: v });
+		if (this.themeId == 'system') {
+			Util.addBodyClass('theme', this.nativeThemeIsDark ? 'dark' : '');
+		} else {
+			Util.addBodyClass('theme', v);
+		};
+	};
+
+	nativeThemeSet (isDark: boolean) {
+		console.log('[nativeThemeSet]', isDark);
+		this.nativeThemeIsDark = isDark;
 	};
 
 	sidebarInit () {