wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-18 15:10:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added darkmode lightmode toggle shortcut

Browse Source
This commit is contained in:
wonderlandpark 2021-03-04 16:56:14 +09:00
parent d410b5cba0
commit 9c5120bd48
5 changed files with 69 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -41,6 +41,7 @@
"postcss-preset-env": "6.7.0", "postcss-preset-env": "6.7.0",
"react": "17.0.1", "react": "17.0.1",
"react-dom": "17.0.1", "react-dom": "17.0.1",
"react-hotkeys": "^2.0.0",
"react-responsive-modal": "6.0.1", "react-responsive-modal": "6.0.1",
"react-select": "4.1.0", "react-select": "4.1.0",
"react-showdown": "2.1.0", "react-showdown": "2.1.0",

38
pages/_app.tsx
View File

@ -2,10 +2,14 @@ import Head from 'next/head'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
import { useRouter } from 'next/router' 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 { init } from '@utils/Sentry'
import Logger from '@utils/Logger' 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 Footer = dynamic(() => import('@components/Footer'))
const Navbar = dynamic(() => import('@components/Navbar')) const Navbar = dynamic(() => import('@components/Navbar'))
@ -17,9 +21,8 @@ import 'core-js/es/set'
import 'core-js/es/map' import 'core-js/es/map'
import '../app.css' import '../app.css'
import '@fortawesome/fontawesome-free/css/all.css'
import '../github-markdown.css' import '../github-markdown.css'
import { Theme } from '@types' import '@fortawesome/fontawesome-free/css/all.css'
init() init()
@ -27,7 +30,6 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX
const [ betaKey, setBetaKey ] = useState('') const [ betaKey, setBetaKey ] = useState('')
const [ theme, setTheme ] = useState<Theme>('system') const [ theme, setTheme ] = useState<Theme>('system')
const router = useRouter() const router = useRouter()
let systemColor:Theme
useEffect(() => { useEffect(() => {
setBetaKey(localStorage.betaKey) setBetaKey(localStorage.betaKey)
@ -39,21 +41,21 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX
'%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!', '%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!',
'color: #ff0000; font-size: 20px; font-weight: bold;' '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) { if (!localStorage.theme) {
Logger.debug(`[THEME] ${systemColor.toUpperCase()} THEME DETECTED`) Logger.debug(`[THEME] ${systemTheme().toUpperCase()} THEME DETECTED`)
setTheme(systemColor) setTheme(systemTheme())
} }
else setTheme(localStorage.theme) else setTheme(localStorage.theme)
}, []) }, [])
return ( const changeTheme = (theme) => {
<div className={theme}> const t = theme === 'dark' ? 'light' : 'dark'
console.log(theme, t)
localStorage.setItem('theme', t)
setTheme(t)
}
return <div className={theme}>
<Head> <Head>
<meta name='viewport' content='width=device-width, initial-scale=1.0' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>한국 디스코드봇 리스트</title> <title>한국 디스코드봇 리스트</title>
@ -80,8 +82,14 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX
{ {
!['/bots/[id]'].includes(router.pathname) && <Footer theme={theme} setTheme={setTheme} /> !['/bots/[id]'].includes(router.pathname) && <Footer theme={theme} setTheme={setTheme} />
} }
<GlobalHotKeys keyMap={shortcutKeyMap} handlers={{
CHANGE_THEME: () => {
const overwrite = (localStorage.theme || systemTheme()) === 'dark' ? 'light' : 'dark'
setTheme(overwrite)
localStorage.setItem('theme', overwrite)
}
}} />
</div> </div>
)
} }
interface KoreanbotsProps extends AppProps { interface KoreanbotsProps extends AppProps {

5
utils/Constants.ts
View File

@ -1,4 +1,5 @@
import { Bot, ImageOptions, KoreanbotsImageOptions } from '@types' import { Bot, ImageOptions, KoreanbotsImageOptions } from '@types'
import { KeyMap } from 'react-hotkeys'
import { formatNumber, makeImageURL } from './Tools' import { formatNumber, makeImageURL } from './Tools'
export const Status = { export const Status = {
@ -214,6 +215,10 @@ export const KoreanbotsEmoji = [{
imageUrl: '/emojis/python.png' imageUrl: '/emojis/python.png'
}] }]
export const shortcutKeyMap: KeyMap = {
CHANGE_THEME: 'command+k'
}
export const ErrorText = { export const ErrorText = {
DEFAULT: '예상치 못한 에러가 발생하였습니다.', DEFAULT: '예상치 못한 에러가 발생하였습니다.',
400: '올바르지 않은 요청입니다.', 400: '올바르지 않은 요청입니다.',

8
utils/Tools.ts
View File

@ -50,6 +50,14 @@ export function supportsWebP() {
return false return false
} }
export function systemTheme() {
try {
return window.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'
} catch {
return 'dark'
}
}
export function checkBrowser(): string { export function checkBrowser(): string {
const ua = navigator.userAgent const ua = navigator.userAgent
let tem let tem

9
yarn.lock
View File

@ -6603,7 +6603,7 @@ prompts@^2.0.1:
kleur "^3.0.3" kleur "^3.0.3"
sisteransi "^1.0.5" 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" version "15.7.2"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== 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" resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== 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: react-input-autosize@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz" resolved "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz"