vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add light/dark type to theme

Browse Source
This commit is contained in:
jeffvli
2022-11-13 01:52:39 -08:00
parent a03f41b76d
commit 353168ad4e
3 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/app.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const App = () => {
withGlobalStyles withGlobalStyles
withNormalizeCSS withNormalizeCSS
theme={{ theme={{
colorScheme: theme, colorScheme: theme as 'light' | 'dark',
defaultRadius: 'xs', defaultRadius: 'xs',
dir: 'ltr', dir: 'ltr',
focusRing: 'auto', focusRing: 'auto',
src/renderer/features/settings/components/general-tab.tsx
+4 -8
View File
@@ -1,14 +1,10 @@
import { Divider, Stack } from '@mantine/core'; import { Divider, Stack } from '@mantine/core';
import { Switch, Select } from '@/renderer/components'; import { Switch, Select } from '@/renderer/components';
import { SettingsOptions } from '@/renderer/features/settings/components/settings-option'; import { SettingsOptions } from '@/renderer/features/settings/components/settings-option';
import { THEME_DATA } from '@/renderer/hooks';
import { useSettingsStore } from '@/renderer/store/settings.store'; import { useSettingsStore } from '@/renderer/store/settings.store';
import { AppTheme } from '@/renderer/themes/types'; import { AppTheme } from '@/renderer/themes/types';
const THEME_OPTIONS = [
{ label: 'Default Dark', value: AppTheme.DEFAULT_DARK },
{ label: 'Default Light', value: AppTheme.DEFAULT_LIGHT },
];
export const GeneralTab = () => { export const GeneralTab = () => {
const settings = useSettingsStore((state) => state.general); const settings = useSettingsStore((state) => state.general);
const update = useSettingsStore((state) => state.setSettings); const update = useSettingsStore((state) => state.setSettings);
@@ -59,7 +55,7 @@ export const GeneralTab = () => {
{ {
control: ( control: (
<Select <Select
data={THEME_OPTIONS} data={THEME_DATA}
defaultValue={settings.theme} defaultValue={settings.theme}
onChange={(e) => { onChange={(e) => {
update({ update({
@@ -78,7 +74,7 @@ export const GeneralTab = () => {
{ {
control: ( control: (
<Select <Select
data={THEME_OPTIONS} data={THEME_DATA}
defaultValue={settings.themeDark} defaultValue={settings.themeDark}
onChange={(e) => { onChange={(e) => {
update({ update({
@@ -97,7 +93,7 @@ export const GeneralTab = () => {
{ {
control: ( control: (
<Select <Select
data={THEME_OPTIONS} data={THEME_DATA}
defaultValue={settings.themeLight} defaultValue={settings.themeLight}
onChange={(e) => { onChange={(e) => {
update({ update({
src/renderer/hooks/use-theme.ts
+7 -1
View File
@@ -1,5 +1,11 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useSettingsStore } from '@/renderer/store/settings.store'; import { useSettingsStore } from '@/renderer/store/settings.store';
import { AppTheme } from '@/renderer/themes/types';
export const THEME_DATA = [
{ label: 'Default dark', type: 'dark', value: AppTheme.DEFAULT_DARK },
{ label: 'Default light', type: 'light', value: AppTheme.DEFAULT_LIGHT },
];
export const useTheme = () => { export const useTheme = () => {
const getCurrentTheme = () => const getCurrentTheme = () =>
@@ -33,5 +39,5 @@ export const useTheme = () => {
document.body.setAttribute('data-theme', appTheme); document.body.setAttribute('data-theme', appTheme);
}, [appTheme]); }, [appTheme]);
return isDarkTheme ? 'dark' : 'light'; return THEME_DATA.find((t) => t.value === appTheme)?.type || 'dark';
}; };