Merge pull request #675 from haishanh/automatic-color-scheme
This commit is contained in:
Haishan
GitHub
commit
8b2e4b6609
9 changed files with 2336 additions and 892 deletions
91
package.json
91
package.json
|
|
@ -27,84 +27,85 @@
|
|||
"private": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "7.16.3",
|
||||
"@fontsource/open-sans": "4.5.2",
|
||||
"@fontsource/roboto-mono": "4.5.0",
|
||||
"@babel/runtime": "7.17.2",
|
||||
"@fontsource/open-sans": "4.5.5",
|
||||
"@fontsource/roboto-mono": "4.5.3",
|
||||
"@hsjs/react-cache": "0.0.0-alpha.aa94237",
|
||||
"@reach/tooltip": "0.16.2",
|
||||
"@reach/visually-hidden": "0.16.0",
|
||||
"chart.js": "2.9.4",
|
||||
"clsx": "^1.1.0",
|
||||
"core-js": "3.19.1",
|
||||
"date-fns": "2.25.0",
|
||||
"framer-motion": "5.3.0",
|
||||
"history": "5.1.0",
|
||||
"i18next": "21.4.2",
|
||||
"i18next-browser-languagedetector": "6.1.2",
|
||||
"i18next-http-backend": "1.3.1",
|
||||
"immer": "9.0.6",
|
||||
"core-js": "3.21.1",
|
||||
"date-fns": "2.28.0",
|
||||
"framer-motion": "6.2.8",
|
||||
"history": "5.3.0",
|
||||
"i18next": "21.6.13",
|
||||
"i18next-browser-languagedetector": "6.1.3",
|
||||
"i18next-http-backend": "1.3.2",
|
||||
"immer": "9.0.12",
|
||||
"invariant": "^2.2.4",
|
||||
"lodash-es": "^4.17.21",
|
||||
"memoize-one": "6.0.0",
|
||||
"modern-normalize": "1.1.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"prop-types": "15.8.1",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-feather": "^2.0.9",
|
||||
"react-i18next": "11.14.2",
|
||||
"react-i18next": "11.15.5",
|
||||
"react-icons": "4.3.1",
|
||||
"react-modal": "3.14.4",
|
||||
"react-query": "3.32.1",
|
||||
"react-router": "6.0.2",
|
||||
"react-router-dom": "6.0.2",
|
||||
"react-query": "3.34.16",
|
||||
"react-router": "6.2.2",
|
||||
"react-router-dom": "6.2.2",
|
||||
"react-switch": "^6.0.0",
|
||||
"react-table": "7.7.0",
|
||||
"react-tabs": "3.2.3",
|
||||
"react-tabs": "4.0.1",
|
||||
"react-tiny-fab": "4.0.4",
|
||||
"react-window": "^1.8.5",
|
||||
"recoil": "0.5.2",
|
||||
"recoil": "0.6.1",
|
||||
"regenerator-runtime": "0.13.9",
|
||||
"reselect": "4.1.2",
|
||||
"reselect": "4.1.5",
|
||||
"tslib": "2.3.1",
|
||||
"workbox-core": "6.3.0",
|
||||
"workbox-expiration": "6.3.0",
|
||||
"workbox-precaching": "6.3.0",
|
||||
"workbox-routing": "6.3.0",
|
||||
"workbox-strategies": "6.3.0"
|
||||
"workbox-core": "6.5.1",
|
||||
"workbox-expiration": "6.5.1",
|
||||
"workbox-precaching": "6.5.1",
|
||||
"workbox-routing": "6.5.1",
|
||||
"workbox-strategies": "6.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/invariant": "2.2.35",
|
||||
"@types/jest": "27.0.2",
|
||||
"@types/lodash-es": "4.17.5",
|
||||
"@types/react": "17.0.34",
|
||||
"@types/react-dom": "17.0.11",
|
||||
"@types/jest": "27.4.1",
|
||||
"@types/lodash-es": "4.17.6",
|
||||
"@types/react": "17.0.39",
|
||||
"@types/react-dom": "17.0.13",
|
||||
"@types/react-modal": "3.13.1",
|
||||
"@types/react-tabs": "2.3.3",
|
||||
"@types/react-tabs": "2.3.4",
|
||||
"@types/react-window": "1.8.5",
|
||||
"@typescript-eslint/eslint-plugin": "5.3.1",
|
||||
"@typescript-eslint/parser": "5.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "5.13.0",
|
||||
"@typescript-eslint/parser": "5.13.0",
|
||||
"@vitejs/plugin-react-refresh": "1.3.6",
|
||||
"autoprefixer": "10.4.0",
|
||||
"cssnano": "5.0.10",
|
||||
"eslint": "8.2.0",
|
||||
"autoprefixer": "10.4.2",
|
||||
"cssnano": "5.1.0",
|
||||
"eslint": "8.10.0",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-config-prettier": "8.3.0",
|
||||
"eslint-config-react-app": "^6.0.0",
|
||||
"eslint-config-prettier": "8.5.0",
|
||||
"eslint-config-react-app": "7.0.0",
|
||||
"eslint-plugin-flowtype": "8.0.3",
|
||||
"eslint-plugin-import": "2.25.3",
|
||||
"eslint-plugin-jest": "25.2.4",
|
||||
"eslint-plugin-import": "2.25.4",
|
||||
"eslint-plugin-jest": "26.1.1",
|
||||
"eslint-plugin-jsx-a11y": "6.5.1",
|
||||
"eslint-plugin-react": "7.27.0",
|
||||
"eslint-plugin-react": "7.29.3",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"eslint-plugin-simple-import-sort": "^7.0.0",
|
||||
"postcss": "8.3.11",
|
||||
"postcss": "8.4.7",
|
||||
"postcss-custom-media": "^8.0.0",
|
||||
"postcss-import": "14.0.2",
|
||||
"postcss-simple-vars": "^6.0.3",
|
||||
"prettier": "2.4.1",
|
||||
"prettier": "2.5.1",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"sass": "1.43.4",
|
||||
"typescript": "4.4.4",
|
||||
"vite": "2.6.14",
|
||||
"vite-plugin-pwa": "0.11.3"
|
||||
"sass": "1.49.9",
|
||||
"typescript": "4.6.2",
|
||||
"vite": "2.8.6",
|
||||
"vite-plugin-pwa": "0.11.13"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,10 +124,16 @@ body {
|
|||
--select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
|
||||
}
|
||||
|
||||
// we don't have a "system" or "auto" mode now
|
||||
// it's just not make sense to have these yet
|
||||
// @media (prefers-color-scheme: dark) {}
|
||||
// @media (prefers-color-scheme: light) {}
|
||||
:root[data-theme='auto'] {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@include dark;
|
||||
color-scheme: dark;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
@include light;
|
||||
color-scheme: light;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
@include dark;
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
.iconWrapper {
|
||||
--sz: 40px;
|
||||
|
||||
width: var(--sz);
|
||||
height: var(--sz);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
color: var(--color-text);
|
||||
border-radius: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.iconWrapper:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.iconWrapper:focus {
|
||||
border-color: var(--color-focus-blue);
|
||||
}
|
||||
|
||||
.themeSwitchContainer {
|
||||
appearance: none;
|
||||
user-select: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
58
src/components/shared/ThemeSwitcher.module.scss
Normal file
58
src/components/shared/ThemeSwitcher.module.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
.iconWrapper {
|
||||
--sz: 40px;
|
||||
|
||||
width: var(--sz);
|
||||
height: var(--sz);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
color: var(--color-text);
|
||||
border-radius: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.iconWrapper:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.iconWrapper:focus {
|
||||
border-color: var(--color-focus-blue);
|
||||
}
|
||||
|
||||
.themeSwitchContainer {
|
||||
--sz: 40px;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--sz);
|
||||
select {
|
||||
cursor: pointer;
|
||||
padding-left: var(--sz);
|
||||
width: var(--sz);
|
||||
height: var(--sz);
|
||||
appearance: none;
|
||||
outline: none;
|
||||
border-radius: 100%;
|
||||
border: 1px solid transparent;
|
||||
background: var(--color-bg-sidebar);
|
||||
&:focus {
|
||||
border-color: var(--color-focus-blue);
|
||||
}
|
||||
option {
|
||||
// this has effect in Firefox
|
||||
// Chrome and Safari use the native menu
|
||||
background: var(--color-bg-sidebar);
|
||||
}
|
||||
}
|
||||
.iconWrapper {
|
||||
pointer-events: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import Tooltip from '@reach/tooltip';
|
||||
import cx from 'clsx';
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { connect } from 'src/components/StateProvider';
|
||||
|
|
@ -7,28 +6,40 @@ import { framerMotionResouce } from 'src/misc/motion';
|
|||
import { getTheme, switchTheme } from 'src/store/app';
|
||||
import { State } from 'src/store/types';
|
||||
|
||||
import s from './ThemeSwitcher.module.css';
|
||||
import s from './ThemeSwitcher.module.scss';
|
||||
|
||||
export function ThemeSwitcherImpl({ theme, dispatch }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const switchThemeHooked = React.useCallback(() => {
|
||||
dispatch(switchTheme());
|
||||
}, [dispatch]);
|
||||
const themeIcon = React.useMemo(() => {
|
||||
switch (theme) {
|
||||
case 'dark':
|
||||
return <MoonA />;
|
||||
case 'auto':
|
||||
return <Auto />;
|
||||
case 'light':
|
||||
return <Sun />;
|
||||
default:
|
||||
console.assert(false, 'Unknown theme');
|
||||
return <MoonA />;
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
const onChange = React.useCallback(
|
||||
(e: React.ChangeEvent<HTMLSelectElement>) => dispatch(switchTheme(e.target.value)),
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
label={t('theme')}
|
||||
aria-label={
|
||||
'switch to ' + (theme === 'light' ? 'dark' : 'light') + ' theme'
|
||||
}
|
||||
>
|
||||
<button
|
||||
className={cx(s.iconWrapper, s.themeSwitchContainer)}
|
||||
onClick={switchThemeHooked}
|
||||
>
|
||||
{theme === 'light' ? <MoonA /> : <Sun />}
|
||||
</button>
|
||||
<Tooltip label={t('switch_theme')} aria-label={'switch theme'}>
|
||||
<div className={s.themeSwitchContainer}>
|
||||
<span className={s.iconWrapper}>{themeIcon}</span>
|
||||
<select onChange={onChange}>
|
||||
<option value="auto">Auto</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
|
@ -75,11 +86,7 @@ function Sun() {
|
|||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="5"></circle>
|
||||
<motion.g
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<motion.g initial={{ scale: 0.7 }} animate={{ scale: 1 }} transition={{ duration: 0.5 }}>
|
||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||
|
|
@ -93,5 +100,38 @@ function Sun() {
|
|||
);
|
||||
}
|
||||
|
||||
function Auto() {
|
||||
const module = framerMotionResouce.read();
|
||||
const motion = module.motion;
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="11" />
|
||||
<clipPath id="cut-off-bottom">
|
||||
<motion.rect
|
||||
x="12"
|
||||
y="0"
|
||||
width="12"
|
||||
height="24"
|
||||
initial={{ rotate: -30 }}
|
||||
animate={{ rotate: 0 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
/>
|
||||
</clipPath>
|
||||
<circle cx="12" cy="12" r="6" clipPath="url(#cut-off-bottom)" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const mapState = (s: State) => ({ theme: getTheme(s) });
|
||||
export const ThemeSwitcher = connect(mapState)(ThemeSwitcherImpl);
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export const data = {
|
|||
Connections: 'Connections',
|
||||
Active: 'Active',
|
||||
Closed: 'Closed',
|
||||
switch_theme: 'Switch theme',
|
||||
theme: 'theme',
|
||||
about: 'about',
|
||||
no_logs: 'No logs yet, hang tight...',
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export const data = {
|
|||
Connections: '连接',
|
||||
Active: '活动',
|
||||
Closed: '已断开',
|
||||
switch_theme: '切换主题',
|
||||
theme: '主题',
|
||||
about: '关于',
|
||||
no_logs: '暂无日志...',
|
||||
|
|
|
|||
|
|
@ -94,25 +94,25 @@ export function updateClashAPIConfig({ baseURL, secret }) {
|
|||
}
|
||||
|
||||
const rootEl = document.querySelector('html');
|
||||
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
|
||||
function setTheme(theme = 'dark') {
|
||||
if (theme === 'dark') {
|
||||
type ThemeType = 'dark' | 'light' | 'auto';
|
||||
function setTheme(theme: ThemeType = 'dark') {
|
||||
if (theme === 'auto') {
|
||||
rootEl.setAttribute('data-theme', 'auto');
|
||||
} else if (theme === 'dark') {
|
||||
rootEl.setAttribute('data-theme', 'dark');
|
||||
themeColorMeta.setAttribute('content', '#202020');
|
||||
} else {
|
||||
rootEl.setAttribute('data-theme', 'light');
|
||||
themeColorMeta.setAttribute('content', '#f7f7f7');
|
||||
}
|
||||
}
|
||||
|
||||
export function switchTheme() {
|
||||
export function switchTheme(nextTheme = 'auto') {
|
||||
return (dispatch: DispatchFn, getState: GetStateFn) => {
|
||||
const currentTheme = getTheme(getState());
|
||||
const theme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
if (currentTheme === nextTheme) return;
|
||||
// side effect
|
||||
setTheme(theme);
|
||||
setTheme(nextTheme as ThemeType);
|
||||
dispatch('storeSwitchTheme', (s) => {
|
||||
s.app.theme = theme;
|
||||
s.app.theme = nextTheme;
|
||||
});
|
||||
// side effect
|
||||
saveState(getState().app);
|
||||
|
|
|
|||
Loading…
Reference in a new issue