mirror of
https://github.com/koreanbots/core.git
synced 2025-12-15 14:10:22 +00:00
feat: added darkmode lightmode toggle shortcut
This commit is contained in:
wonderlandpark
parent
d410b5cba0
commit
9c5120bd48
@ -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",
|
||||
|
||||
@ -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<Theme>('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 (
|
||||
<div className={theme}>
|
||||
<Head>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<title>한국 디스코드봇 리스트</title>
|
||||
<meta name='description' content='다양한 국내 디스코드봇들을 확인하고, 초대해보세요!' />
|
||||
<meta name='og:title' content='한국 디스코드봇 리스트' />
|
||||
<meta name='og:url' content='https://koreanbots.dev' />
|
||||
<meta name='og:description' content='다양한 국내 디스코드봇들을 확인하고, 초대해보세요!' />
|
||||
<meta name='og:image' content='/logo.png' />
|
||||
<meta charSet='utf-8' />
|
||||
<link rel='shortcut icon' href='/logo.png' />
|
||||
<meta name='theme-color' content='#3366FF' />
|
||||
</Head>
|
||||
<Navbar />
|
||||
<div className='iu-is-the-best h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
|
||||
{
|
||||
process.env.NEXT_PUBLIC_TESTER_KEY === Crypto.createHmac('sha256', betaKey ?? '').digest('hex') ?
|
||||
<Component {...pageProps} err={err} theme={theme} setTheme={setTheme} /> :
|
||||
<div className='text-center py-40 px-10'>
|
||||
<h1 className='text-3xl font-bold'>주어진 테스터키를 입력해주세요.</h1><br/>
|
||||
<input value={betaKey} name='field_name' className='text-black border outline-none px-4 py-2 rounded-2xl' type='text' placeholder='테스터 키' onChange={(e)=> { localStorage.setItem('betaKey', e.target.value); setBetaKey(e.target.value) }} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
const changeTheme = (theme) => {
|
||||
const t = theme === 'dark' ? 'light' : 'dark'
|
||||
console.log(theme, t)
|
||||
localStorage.setItem('theme', t)
|
||||
setTheme(t)
|
||||
}
|
||||
|
||||
return <div className={theme}>
|
||||
<Head>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<title>한국 디스코드봇 리스트</title>
|
||||
<meta name='description' content='다양한 국내 디스코드봇들을 확인하고, 초대해보세요!' />
|
||||
<meta name='og:title' content='한국 디스코드봇 리스트' />
|
||||
<meta name='og:url' content='https://koreanbots.dev' />
|
||||
<meta name='og:description' content='다양한 국내 디스코드봇들을 확인하고, 초대해보세요!' />
|
||||
<meta name='og:image' content='/logo.png' />
|
||||
<meta charSet='utf-8' />
|
||||
<link rel='shortcut icon' href='/logo.png' />
|
||||
<meta name='theme-color' content='#3366FF' />
|
||||
</Head>
|
||||
<Navbar />
|
||||
<div className='iu-is-the-best h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
|
||||
{
|
||||
!['/bots/[id]'].includes(router.pathname) && <Footer theme={theme} setTheme={setTheme} />
|
||||
process.env.NEXT_PUBLIC_TESTER_KEY === Crypto.createHmac('sha256', betaKey ?? '').digest('hex') ?
|
||||
<Component {...pageProps} err={err} theme={theme} setTheme={setTheme} /> :
|
||||
<div className='text-center py-40 px-10'>
|
||||
<h1 className='text-3xl font-bold'>주어진 테스터키를 입력해주세요.</h1><br/>
|
||||
<input value={betaKey} name='field_name' className='text-black border outline-none px-4 py-2 rounded-2xl' type='text' placeholder='테스터 키' onChange={(e)=> { localStorage.setItem('betaKey', e.target.value); setBetaKey(e.target.value) }} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
{
|
||||
!['/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>
|
||||
}
|
||||
|
||||
interface KoreanbotsProps extends AppProps {
|
||||
|
||||
@ -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: '올바르지 않은 요청입니다.',
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user