forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-01 05:06:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Set default theme based on system preferences

Browse Source
This commit is contained in:
Alejandro Celaya
2023-12-18 23:05:17 +01:00
parent ddc466b797
commit 8907ea5310
9 changed files with 67 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/App.tsx
View File

@@ -1,4 +1,4 @@
import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
import { changeThemeInMarkup, getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
import { clsx } from 'clsx';
import type { FC } from 'react';
import { useEffect, useRef } from 'react';
@@ -58,7 +58,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
}, [fetchServers]);
useEffect(() => {
changeThemeInMarkup(settings.ui?.theme ?? 'light');
changeThemeInMarkup(settings.ui?.theme ?? getSystemPreferredTheme());
}, [settings.ui?.theme]);
return (

37
src/settings/UserInterfaceSettings.tsx
View File

@@ -1,27 +1,34 @@
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { Theme } from '@shlinkio/shlink-frontend-kit';
import { SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
import { getSystemPreferredTheme, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
import type { FC } from 'react';
import { useMemo } from 'react';
import type { AppSettings, UiSettings } from './reducers/settings';
import './UserInterfaceSettings.scss';
interface UserInterfaceProps {
settings: AppSettings;
setUiSettings: (settings: UiSettings) => void;
/* Test seam */
_matchMedia?: typeof window.matchMedia;
}
export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
<SimpleCard title="User interface" className="h-100">
<FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
<ToggleSwitch
checked={ui?.theme === 'dark'}
onChange={(useDarkTheme) => {
const theme: Theme = useDarkTheme ? 'dark' : 'light';
setUiSettings({ ...ui, theme });
}}
>
Use dark theme.
</ToggleSwitch>
</SimpleCard>
);
export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings, _matchMedia }) => {
const currentTheme = useMemo(() => ui?.theme ?? getSystemPreferredTheme(_matchMedia), [ui?.theme, _matchMedia]);
return (
<SimpleCard title="User interface" className="h-100">
<FontAwesomeIcon icon={currentTheme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
<ToggleSwitch
checked={currentTheme === 'dark'}
onChange={(useDarkTheme) => {
const theme: Theme = useDarkTheme ? 'dark' : 'light';
setUiSettings({ ...ui, theme });
}}
>
Use dark theme.
</ToggleSwitch>
</SimpleCard>
);
};

3
src/settings/reducers/settings.ts
View File

@@ -2,6 +2,7 @@ import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import { mergeDeepRight } from '@shlinkio/data-manipulation';
import type { Theme } from '@shlinkio/shlink-frontend-kit';
import { getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
import type {
Settings,
ShortUrlCreationSettings,
@@ -34,7 +35,7 @@ const initialState: AppSettings = {
validateUrls: false,
},
ui: {
theme: 'light',
theme: getSystemPreferredTheme(),
},
visits: {
defaultInterval: 'last30Days',