import { ValueRef } from '@dimensiondev/holoflows-kit' ; import { useValueRef } from '@masknet/shared' ; import { SubscriptionFromValueRef } from '@masknet/shared-base' ; import { Appearance , or , makeStyles } from '@masknet/theme' ; import { LanguageOptions , SupportedLanguages } from '@masknet/public-api' ; import { PaletteMode , unstable_createMuiStrictModeTheme } from '@mui/material' ; import { blue , green , grey , orange , red } from '@mui/material/colors' ; import { jaJP , koKR , zhTW , zhCN , enUS , Localization } from '@mui/material/locale/index' ; import type { Theme , ThemeOptions } from '@mui/material/styles/createTheme' ; import { cloneDeep , merge } from 'lodash-unified' ; import { useRef } from 'react' ; import { appearanceSettings , languageSettings } from '../settings/settings' ; import { activatedSocialNetworkUI } from '../social-network' ; import './theme-global.d' ; import { Subscription , useSubscription } from 'use-subscription' ; function getFontFamily ( monospace ? ) { const monofont = navigator . platform . startsWith ( 'Win' ) ? 'Consolas, monospace' : 'monospace' ; return ! monospace ? '-apple-system, system-ui, sans-serif' : monofont ; } const base = { palette : { primary : { main : '#1c68f3' } , secondary : orange , text : { hint : 'rgba(0, 0, 0, 0.38)' } , } , typography : { fontFamily : getFontFamily ( ) , } , breakpoints : { values : { xs : 0 , sm : 600 , md : 1112 , lg : 1280 , xl : 1920 , } , } , components : { MuiLink : { defaultProps : { underline : 'hover' } } , MuiButton : { styleOverrides : { root : { textTransform : 'unset' , minWidth : '100px' , } , } , defaultProps : { size : 'small' , disableElevation : true , } , } , MuiTab : { styleOverrides : { root : { textTransform : 'unset' , padding : '0' , '@media screen and (min-width: 600px)' : { minWidth : 160 , } , } , } , } , MuiDialog : { styleOverrides : { paper : { borderRadius : '12px' , } , } , } , } , } ; const lightThemePatch = { palette : { mode : 'light' , } , } ; const darkThemePatch = { palette : { mode : 'dark' , background : { paper : grey [ 900 ] , } , } , components : { MuiPaper : { styleOverrides : { root : { backgroundImage : 'unset' } } , } , } , } ; const baseTheme = ( theme ) => { if ( theme === 'light' ) return merge ( cloneDeep ( base ) , lightThemePatch ) ; return merge ( cloneDeep ( base ) , darkThemePatch ) ; } ; const MaskLightTheme = unstable_createMuiStrictModeTheme ( baseTheme ( 'light' ) ) ; const MaskDarkTheme = unstable_createMuiStrictModeTheme ( baseTheme ( 'dark' ) ) ; const staticSubscription = SubscriptionFromValueRef ( new ValueRef ( 'light' ) ) ; export function useClassicMaskSNSTheme ( ) { const { current : provider } = useRef ( activatedSocialNetworkUI . customization . paletteMode ?. current || staticSubscription ) ; const { current : usePostTheme = ( t ) => t } = useRef ( activatedSocialNetworkUI . customization . useTheme ) ; const palette = useSubscription ( provider ) ; const baseTheme = palette === 'dark' ? MaskDarkTheme : MaskLightTheme ; const [ localization , isRTL ] = useThemeLanguage ( ) ; const theme = unstable_createMuiStrictModeTheme ( baseTheme , localization ) ; return usePostTheme ( theme ) ; } deprecated export function useClassicMaskFullPageTheme ( overwrite ? ) { const userPreference = or ( overwrite ?. forcePalette , useValueRef ( appearanceSettings ) ) ; const systemPreference = matchMedia ( '(prefers-color-scheme: dark)' ) . matches ? 'dark' : 'light' ; const finalPalette = userPreference === Appearance . default ? systemPreference : userPreference ; const baseTheme = finalPalette === 'dark' ? MaskDarkTheme : MaskLightTheme ; const [ localization , isRTL ] = useThemeLanguage ( ) ; return unstable_createMuiStrictModeTheme ( baseTheme , localization ) ; } function useThemeLanguage ( ) { let language = useValueRef ( languageSettings ) ; if ( language === LanguageOptions . __auto__ ) language = LanguageOptions . enUS ; const displayLanguage = language as any as SupportedLanguages ; const langs = { [ SupportedLanguages . enUS ] : enUS , [ SupportedLanguages . jaJP ] : jaJP , [ SupportedLanguages . koKR ] : koKR , [ SupportedLanguages . zhTW ] : zhTW , [ SupportedLanguages . zhCN ] : zhCN , } ; return [ langs [ displayLanguage ] || enUS , false ] ; } export interface ClassicMaskFullPageThemeOptions { forcePalette ? : Appearance ; } export const useColorStyles = makeStyles ( ) ( ( theme ) => { const dark = theme . palette . mode === 'dark' ; return { error : { color : dark ? red [ 500 ] : red [ 900 ] , } , success : { color : dark ? green [ 500 ] : green [ 800 ] , } , info : { color : dark ? blue [ 500 ] : blue [ 800 ] , } , } ; } ) ; export const useErrorStyles = makeStyles ( ) ( ( theme ) => { const dark = theme . palette . mode === 'dark' ; return { containedPrimary : { backgroundColor : dark ? red [ 500 ] : red [ 900 ] , '&:hover' : { backgroundColor : dark ? red [ 900 ] : red [ 700 ] , } , } , outlinedPrimary : { borderColor : dark ? red [ 500 ] : red [ 900 ] , color : dark ? red [ 500 ] : red [ 900 ] , '&:hover' : { borderColor : dark ? red [ 900 ] : red [ 700 ] , } , } , } ; } ) ; export function extendsTheme ( extend ) { return ( theme ) => merge ( cloneDeep ( theme ) , extend ( theme ) ) ; }