From 9c5120bd48651cfddbba8d86f8192e244ef5eda9 Mon Sep 17 00:00:00 2001 From: wonderlandpark Date: Thu, 4 Mar 2021 16:56:14 +0900 Subject: [PATCH] feat: added darkmode lightmode toggle shortcut --- package.json | 1 + pages/_app.tsx | 86 +++++++++++++++++++++++++--------------------- utils/Constants.ts | 5 +++ utils/Tools.ts | 8 +++++ yarn.lock | 9 ++++- 5 files changed, 69 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 79aaa91..1cc3ad5 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "postcss-preset-env": "6.7.0", "react": "17.0.1", "react-dom": "17.0.1", + "react-hotkeys": "^2.0.0", "react-responsive-modal": "6.0.1", "react-select": "4.1.0", "react-showdown": "2.1.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 9e54160..531ef40 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,10 +2,14 @@ import Head from 'next/head' import type { AppProps } from 'next/app' import dynamic from 'next/dynamic' import { useRouter } from 'next/router' -import { useEffect, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' +import { GlobalHotKeys, HotKeys } from 'react-hotkeys' import { init } from '@utils/Sentry' import Logger from '@utils/Logger' +import { systemTheme } from '@utils/Tools' +import { shortcutKeyMap } from '@utils/Constants' +import { Theme } from '@types' const Footer = dynamic(() => import('@components/Footer')) const Navbar = dynamic(() => import('@components/Navbar')) @@ -17,9 +21,8 @@ import 'core-js/es/set' import 'core-js/es/map' import '../app.css' -import '@fortawesome/fontawesome-free/css/all.css' import '../github-markdown.css' -import { Theme } from '@types' +import '@fortawesome/fontawesome-free/css/all.css' init() @@ -27,7 +30,6 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX const [ betaKey, setBetaKey ] = useState('') const [ theme, setTheme ] = useState('system') const router = useRouter() - let systemColor:Theme useEffect(() => { setBetaKey(localStorage.betaKey) @@ -39,49 +41,55 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX '%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!', 'color: #ff0000; font-size: 20px; font-weight: bold;' ) - try { - // eslint-disable-next-line react-hooks/exhaustive-deps - systemColor = window.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light' - } catch (e) { - systemColor = 'dark' - } if (!localStorage.theme) { - Logger.debug(`[THEME] ${systemColor.toUpperCase()} THEME DETECTED`) - setTheme(systemColor) + Logger.debug(`[THEME] ${systemTheme().toUpperCase()} THEME DETECTED`) + setTheme(systemTheme()) } else setTheme(localStorage.theme) }, []) - return ( -
- - - 한국 디스코드봇 리스트 - - - - - - - - - - -
- { - process.env.NEXT_PUBLIC_TESTER_KEY === Crypto.createHmac('sha256', betaKey ?? '').digest('hex') ? - : -
-

주어진 테스터키를 입력해주세요.


- { localStorage.setItem('betaKey', e.target.value); setBetaKey(e.target.value) }} /> -
- } -
+ const changeTheme = (theme) => { + const t = theme === 'dark' ? 'light' : 'dark' + console.log(theme, t) + localStorage.setItem('theme', t) + setTheme(t) + } + + return
+ + + 한국 디스코드봇 리스트 + + + + + + + + + + +
{ - !['/bots/[id]'].includes(router.pathname) &&
+ process.env.NEXT_PUBLIC_TESTER_KEY === Crypto.createHmac('sha256', betaKey ?? '').digest('hex') ? + : +
+

주어진 테스터키를 입력해주세요.


+ { localStorage.setItem('betaKey', e.target.value); setBetaKey(e.target.value) }} /> +
}
- ) + { + !['/bots/[id]'].includes(router.pathname) &&
} interface KoreanbotsProps extends AppProps { diff --git a/utils/Constants.ts b/utils/Constants.ts index bbb6c51..4a3d700 100644 --- a/utils/Constants.ts +++ b/utils/Constants.ts @@ -1,4 +1,5 @@ import { Bot, ImageOptions, KoreanbotsImageOptions } from '@types' +import { KeyMap } from 'react-hotkeys' import { formatNumber, makeImageURL } from './Tools' export const Status = { @@ -214,6 +215,10 @@ export const KoreanbotsEmoji = [{ imageUrl: '/emojis/python.png' }] +export const shortcutKeyMap: KeyMap = { + CHANGE_THEME: 'command+k' +} + export const ErrorText = { DEFAULT: '예상치 못한 에러가 발생하였습니다.', 400: '올바르지 않은 요청입니다.', diff --git a/utils/Tools.ts b/utils/Tools.ts index 0fce7f8..72ae899 100644 --- a/utils/Tools.ts +++ b/utils/Tools.ts @@ -50,6 +50,14 @@ export function supportsWebP() { return false } +export function systemTheme() { + try { + return window.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light' + } catch { + return 'dark' + } +} + export function checkBrowser(): string { const ua = navigator.userAgent let tem diff --git a/yarn.lock b/yarn.lock index 4f6f449..a777a45 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6603,7 +6603,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@15.7.2, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -6760,6 +6760,13 @@ react-fast-compare@^2.0.1: resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== +react-hotkeys@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f" + integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q== + dependencies: + prop-types "^15.6.1" + react-input-autosize@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz"