-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
415037d
commit 2235df2
Showing
8 changed files
with
868 additions
and
830 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,68 @@ | ||
| import {useCallback} from 'react' | ||
| import {useSelector,useDispatch} from '@redux/store' | ||
| import type {State} from '@type/redux' | ||
| import {Dispatch} from 'redux' | ||
| import { useCallback } from 'react' | ||
| import { useSelector, useDispatch } from '@redux/store' | ||
| import type { State } from '@type/redux' | ||
| import { Dispatch } from 'redux' | ||
| import useMediaQuery from '@mui/material/useMediaQuery'; | ||
| import { getCookie, setCookie } from 'cookies-next'; | ||
| import { getDayJs } from '@utils/main'; | ||
| import { domainCookie } from '@src/config'; | ||
|
|
||
| export default function useDarkTheme() { | ||
| const theme = useSelector<State['theme']>(s=>s.theme); | ||
| const theme = useSelector<State['theme']>(s => s.theme); | ||
| const dispatch = useDispatch(); | ||
| const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); | ||
| const isDark=prefersDarkMode && theme==='auto'||theme==='dark'; | ||
| const isDark = prefersDarkMode && theme === 'auto' || theme === 'dark'; | ||
|
|
||
| const sendTheme=useCallback((val1:State['theme'],val2:State['redux_theme'])=>(dispatch: Dispatch)=>{ | ||
| dispatch({type:"CHANGE_THEME",payload:val1}) | ||
| dispatch({type:"REDUX_THEME",payload:val2}) | ||
| },[]) | ||
| const sendTheme = useCallback((val1: State['theme'], val2: State['redux_theme']) => (dispatch: Dispatch) => { | ||
| dispatch({ type: "CHANGE_THEME", payload: val1 }) | ||
| dispatch({ type: "REDUX_THEME", payload: val2 }) | ||
| }, []) | ||
|
|
||
| const setHighlightJs = useCallback((value: State['redux_theme'])=>{ | ||
| const lightStyle = document.querySelector('link.higtlightjs-light'); | ||
| const darkStyle = document.querySelector('link.higtlightjs-dark'); | ||
| const setHighlightJs = useCallback((value: State['redux_theme']) => { | ||
| const lightStyle = document.querySelector('link.higtlightjs-light'); | ||
| const darkStyle = document.querySelector('link.higtlightjs-dark'); | ||
|
|
||
| if(value === 'light') { | ||
| darkStyle?.setAttribute('disabled','disabled'); | ||
| lightStyle?.removeAttribute('disabled'); | ||
| } else { | ||
| lightStyle?.setAttribute('disabled','disabled'); | ||
| darkStyle?.removeAttribute('disabled'); | ||
| } | ||
| },[]) | ||
|
|
||
| const setTheme = useCallback((value: State['theme'],force?:boolean)=>{ | ||
| const winDark = window?.matchMedia && window?.matchMedia('(prefers-color-scheme: dark)').matches; | ||
| const prefersDark = prefersDarkMode || winDark; | ||
| const newVal:State['redux_theme'] = (prefersDark && value=='auto')||value=='dark' ? 'dark' : 'light'; | ||
| const kuki:State['theme'] = ['light','dark','auto'].indexOf(value) !== -1 ? value : 'auto'; | ||
| if(force!==true) setCookie('theme',kuki,{expires:getDayJs().add(1,"year").toDate(),domain:domainCookie}); | ||
| setHighlightJs(newVal) | ||
| // @ts-ignore | ||
| dispatch(sendTheme(kuki,newVal)); | ||
| },[prefersDarkMode,dispatch,sendTheme,setHighlightJs]) | ||
| if (value === 'light') { | ||
| darkStyle?.setAttribute('disabled', 'disabled'); | ||
| lightStyle?.removeAttribute('disabled'); | ||
| } else { | ||
| lightStyle?.setAttribute('disabled', 'disabled'); | ||
| darkStyle?.removeAttribute('disabled'); | ||
| } | ||
| }, []) | ||
|
|
||
| const checkTheme = useCallback(()=>{ | ||
| const theme = getCookie('theme') as State['theme']|undefined; | ||
| let result = { | ||
| theme:"auto" as State["theme"], | ||
| redux_theme:"light" as State['redux_theme'] | ||
| } | ||
| if(!theme || theme === 'auto') { | ||
| const setTheme = useCallback((value: State['theme'], force?: boolean) => { | ||
| const winDark = window?.matchMedia && window?.matchMedia('(prefers-color-scheme: dark)').matches; | ||
| const prefersDark = prefersDarkMode || winDark; | ||
| const redux_theme = prefersDark ? 'dark' : 'light' | ||
| result.redux_theme = redux_theme; | ||
| if(!theme) result.theme = redux_theme | ||
| else result.theme = theme; | ||
| } else { | ||
| result = { | ||
| theme, | ||
| redux_theme:theme | ||
| const newVal: State['redux_theme'] = (prefersDark && value == 'auto') || value == 'dark' ? 'dark' : 'light'; | ||
| const kuki: State['theme'] = ['light', 'dark', 'auto'].indexOf(value) !== -1 ? value : 'auto'; | ||
| if (force !== true) setCookie('theme', kuki, { expires: getDayJs().add(1, "year").toDate(), domain: domainCookie, sameSite: "lax" }); | ||
| setHighlightJs(newVal) | ||
| // @ts-ignore | ||
| dispatch(sendTheme(kuki, newVal)); | ||
| }, [prefersDarkMode, dispatch, sendTheme, setHighlightJs]) | ||
|
|
||
| const checkTheme = useCallback(() => { | ||
| const theme = getCookie('theme') as State['theme'] | undefined; | ||
| let result = { | ||
| theme: "auto" as State["theme"], | ||
| redux_theme: "light" as State['redux_theme'] | ||
| } | ||
| if (!theme || theme === 'auto') { | ||
| const winDark = window?.matchMedia && window?.matchMedia('(prefers-color-scheme: dark)').matches; | ||
| const prefersDark = prefersDarkMode || winDark; | ||
| const redux_theme = prefersDark ? 'dark' : 'light' | ||
| result.redux_theme = redux_theme; | ||
| if (!theme) result.theme = redux_theme | ||
| else result.theme = theme; | ||
| } else { | ||
| result = { | ||
| theme, | ||
| redux_theme: theme | ||
| } | ||
| } | ||
| } | ||
| return result; | ||
| },[prefersDarkMode]) | ||
| return result; | ||
| }, [prefersDarkMode]) | ||
|
|
||
| return {theme,isDark,setTheme,prefersDarkMode,checkTheme,setHighlightJs} | ||
| return { theme, isDark, setTheme, prefersDarkMode, checkTheme, setHighlightJs } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,71 @@ | ||
| import { Theme } from "@mui/material"; | ||
|
|
||
| export default function Input(theme: Theme) { | ||
| return { | ||
| MuiInputBase: { | ||
| styleOverrides: { | ||
| root: { | ||
| '&.Mui-disabled': { | ||
| '& svg': { color: theme.palette.text.disabled } | ||
| } | ||
| return { | ||
| MuiInputBase: { | ||
| styleOverrides: { | ||
| root: { | ||
| '&.Mui-disabled': { | ||
| '& svg': { color: theme.palette.text.disabled } | ||
| } | ||
| }, | ||
| input: { | ||
| '&::placeholder': { | ||
| opacity: 1, | ||
| color: theme.palette.text.disabled | ||
| }, | ||
| '&:-webkit-autofill, &:-internal-autofill-selected, &:-internal-autofill-previewed': { | ||
| boxShadow: 'unset !important', | ||
| WebkitTextFillColor: `${theme.palette.text.primary} !important`, | ||
| caretColor: `${theme.palette.text.primary} !important`, | ||
| transition: "background-color 5000000s ease-in-out 0s;" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| input: { | ||
| '&::placeholder': { | ||
| opacity: 1, | ||
| color: theme.palette.text.disabled | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| MuiInput: { | ||
| styleOverrides: { | ||
| underline: { | ||
| '&:before': { | ||
| borderBottomColor: theme.palette.grey[500_56] | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| MuiFilledInput: { | ||
| styleOverrides: { | ||
| root: { | ||
| backgroundColor: theme.palette.grey[500_12], | ||
| '&:hover': { | ||
| backgroundColor: theme.palette.grey[500_16] | ||
| }, | ||
| '&.Mui-focused': { | ||
| backgroundColor: theme.palette.action.focus | ||
| }, | ||
| '&.Mui-disabled': { | ||
| backgroundColor: theme.palette.action.disabledBackground | ||
| } | ||
| MuiInput: { | ||
| styleOverrides: { | ||
| underline: { | ||
| '&:before': { | ||
| borderBottomColor: theme.palette.grey[500_56] | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| underline: { | ||
| '&:before': { | ||
| borderBottomColor: theme.palette.grey[500_56] | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| MuiOutlinedInput: { | ||
| styleOverrides: { | ||
| root: { | ||
| '& .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: theme.palette.grey[500_32] | ||
| }, | ||
| '&.Mui-disabled': { | ||
| '& .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: theme.palette.action.disabledBackground | ||
| MuiFilledInput: { | ||
| styleOverrides: { | ||
| root: { | ||
| backgroundColor: theme.palette.grey[500_12], | ||
| '&:hover': { | ||
| backgroundColor: theme.palette.grey[500_16] | ||
| }, | ||
| '&.Mui-focused': { | ||
| backgroundColor: theme.palette.action.focus | ||
| }, | ||
| '&.Mui-disabled': { | ||
| backgroundColor: theme.palette.action.disabledBackground | ||
| } | ||
| }, | ||
| underline: { | ||
| '&:before': { | ||
| borderBottomColor: theme.palette.grey[500_56] | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| MuiOutlinedInput: { | ||
| styleOverrides: { | ||
| root: { | ||
| '& .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: theme.palette.grey[500_32] | ||
| }, | ||
| '&.Mui-disabled': { | ||
| '& .MuiOutlinedInput-notchedOutline': { | ||
| borderColor: theme.palette.action.disabledBackground | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.