diff --git a/packages/icons/brands/MiniMask.tsx b/packages/icons/brands/MiniMask.tsx index 0ea5f45921d5..aeee3c5260b0 100644 --- a/packages/icons/brands/MiniMask.tsx +++ b/packages/icons/brands/MiniMask.tsx @@ -45,5 +45,6 @@ export const MiniMaskIcon: typeof SvgIcon = createPaletteAwareIcon( , + undefined, '0 0 48 48', ) diff --git a/packages/icons/general/Eye.tsx b/packages/icons/general/Eye.tsx index 10ee37a1f4a5..9bc23f7ae8c1 100644 --- a/packages/icons/general/Eye.tsx +++ b/packages/icons/general/Eye.tsx @@ -34,5 +34,6 @@ export const EyeIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 20 20', ) diff --git a/packages/icons/general/EyeOff.tsx b/packages/icons/general/EyeOff.tsx index 3682c90cc3cd..8ad8888f0b90 100644 --- a/packages/icons/general/EyeOff.tsx +++ b/packages/icons/general/EyeOff.tsx @@ -20,5 +20,6 @@ export const EyeOffIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 20 20', ) diff --git a/packages/icons/general/LinkOut.tsx b/packages/icons/general/LinkOut.tsx index 56ea11197f18..5fa992219d78 100644 --- a/packages/icons/general/LinkOut.tsx +++ b/packages/icons/general/LinkOut.tsx @@ -37,5 +37,6 @@ export const LinkOutIcon: typeof SvgIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 20 20', ) diff --git a/packages/icons/general/PublicKey.tsx b/packages/icons/general/PublicKey.tsx index 4344d91da09b..6d153f302306 100644 --- a/packages/icons/general/PublicKey.tsx +++ b/packages/icons/general/PublicKey.tsx @@ -20,5 +20,6 @@ export const PublicKeyIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 20 20', ) diff --git a/packages/icons/general/Retweet.tsx b/packages/icons/general/Retweet.tsx index 9d29a8d03bc5..c822893b3ba1 100644 --- a/packages/icons/general/Retweet.tsx +++ b/packages/icons/general/Retweet.tsx @@ -14,5 +14,6 @@ export const RetweetIcon = createPaletteAwareIcon( fill="#D9D9D9" /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/index.ts b/packages/icons/index.ts index 9f9bb5772baa..902aa31f743b 100644 --- a/packages/icons/index.ts +++ b/packages/icons/index.ts @@ -1,4 +1,5 @@ export { createIcon } from './utils' +export * from './utils/MaskIconPaletteContext' export * from './general' export * from './brands' export * from './plugins' diff --git a/packages/icons/plugins/GoodGhosting.tsx b/packages/icons/plugins/GoodGhosting.tsx index 98aa38a205bd..cf0ee878da90 100644 --- a/packages/icons/plugins/GoodGhosting.tsx +++ b/packages/icons/plugins/GoodGhosting.tsx @@ -15,5 +15,6 @@ export const GoogGhostingIcon: typeof SvgIcon = createPaletteAwareIcon( fill="#fff" /> , + undefined, '0 0 28 28', ) diff --git a/packages/icons/plugins/Valuables.tsx b/packages/icons/plugins/Valuables.tsx index 063a3c421a09..4052ede662bf 100644 --- a/packages/icons/plugins/Valuables.tsx +++ b/packages/icons/plugins/Valuables.tsx @@ -19,5 +19,6 @@ export const ValuablesIcon: typeof SvgIcon = createPaletteAwareIcon( fill="#fff" /> , + undefined, '0 0 28 28', ) diff --git a/packages/icons/settings/SettingsAppearance.tsx b/packages/icons/settings/SettingsAppearance.tsx index a04fba614897..63c102d6d29a 100644 --- a/packages/icons/settings/SettingsAppearance.tsx +++ b/packages/icons/settings/SettingsAppearance.tsx @@ -25,5 +25,6 @@ export const SettingsAppearanceIcon: typeof SvgIcon = createPaletteAwareIcon( , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsBackup.tsx b/packages/icons/settings/SettingsBackup.tsx index bed49f36aebf..4d9cb5589384 100644 --- a/packages/icons/settings/SettingsBackup.tsx +++ b/packages/icons/settings/SettingsBackup.tsx @@ -29,5 +29,6 @@ export const SettingsBackupIcon: typeof SvgIcon = createPaletteAwareIcon( /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsEmail.tsx b/packages/icons/settings/SettingsEmail.tsx index ce547527bd63..6646ff27dc83 100644 --- a/packages/icons/settings/SettingsEmail.tsx +++ b/packages/icons/settings/SettingsEmail.tsx @@ -23,5 +23,6 @@ export const SettingsEmailIcon: typeof SvgIcon = createPaletteAwareIcon( /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsLanguage.tsx b/packages/icons/settings/SettingsLanguage.tsx index 868fbae8114f..5957de1e5a4a 100644 --- a/packages/icons/settings/SettingsLanguage.tsx +++ b/packages/icons/settings/SettingsLanguage.tsx @@ -71,5 +71,6 @@ export const SettingsLanguageIcon: typeof SvgIcon = createPaletteAwareIcon( , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsPassword.tsx b/packages/icons/settings/SettingsPassword.tsx index 72f7bbb09327..a39f08886cbe 100644 --- a/packages/icons/settings/SettingsPassword.tsx +++ b/packages/icons/settings/SettingsPassword.tsx @@ -21,5 +21,6 @@ export const SettingsPasswordIcon: typeof SvgIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsPhone.tsx b/packages/icons/settings/SettingsPhone.tsx index 38f8a38979a7..46ea51b8ff5b 100644 --- a/packages/icons/settings/SettingsPhone.tsx +++ b/packages/icons/settings/SettingsPhone.tsx @@ -23,5 +23,6 @@ export const SettingsPhoneIcon: typeof SvgIcon = createPaletteAwareIcon( /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsRestore.tsx b/packages/icons/settings/SettingsRestore.tsx index 7b381314e084..3ec5b3586d35 100644 --- a/packages/icons/settings/SettingsRestore.tsx +++ b/packages/icons/settings/SettingsRestore.tsx @@ -21,5 +21,6 @@ export const SettingsRestoreIcon: typeof SvgIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsSync.tsx b/packages/icons/settings/SettingsSync.tsx index 504295924756..5a66ae6b2d84 100644 --- a/packages/icons/settings/SettingsSync.tsx +++ b/packages/icons/settings/SettingsSync.tsx @@ -31,5 +31,6 @@ export const SettingsSyncIcon: typeof SvgIcon = createPaletteAwareIcon( fill="#fff" /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/utils/MaskIconPaletteContext.ts b/packages/icons/utils/MaskIconPaletteContext.ts new file mode 100644 index 000000000000..e4507360a637 --- /dev/null +++ b/packages/icons/utils/MaskIconPaletteContext.ts @@ -0,0 +1,4 @@ +import { createContext } from 'react' + +export type MaskIconPalette = 'light' | 'dark' | 'dim' +export const MaskIconPaletteContext = createContext('dark') diff --git a/packages/icons/utils/index.tsx b/packages/icons/utils/index.tsx index 6a72e2bbcf6c..92d78089bb60 100644 --- a/packages/icons/utils/index.tsx +++ b/packages/icons/utils/index.tsx @@ -1,5 +1,6 @@ import { useTheme, SvgIcon, SvgIconProps, Theme } from '@mui/material' -import { forwardRef, memo, ForwardedRef } from 'react' +import { forwardRef, memo, ForwardedRef, useContext } from 'react' +import { MaskIconPaletteContext } from './MaskIconPaletteContext' /** @internal */ export type Size = [width: number | undefined, height: number | undefined] @@ -41,6 +42,7 @@ export function createIcon(name: string, svg: SvgIconRaw, viewBox?: string, defa * @param name Name of the Icon * @param light SVG content when the theme is light theme. Do not include tag * @param dark SVG content when the theme is light theme. Do not include tag + * @param dim SVG content when the theme is dark, and the MaskIconPaletteContext is "dim". Do not include tag * @param viewBox The viewbox * @param defaultSize Only use this when the icon is not square. Unit: px * @returns A component that same type as icons from @mui/icons-material @@ -49,8 +51,22 @@ export function createPaletteAwareIcon( name: string, light: JSX.Element, dark: JSX.Element, + dim: JSX.Element | undefined, viewBox?: string, defaultSize?: Size, ) { - return createIcon(name, (theme) => (theme.palette.mode === 'light' ? light : dark), viewBox, defaultSize) + return createIcon( + name, + (theme) => { + const palette = useContext(MaskIconPaletteContext) + const isDim = palette === 'dim' + if (theme.palette.mode === 'dark') { + if (isDim && dim) return dim + return dark + } + return light + }, + viewBox, + defaultSize, + ) } diff --git a/packages/icons/utils/previewer.tsx b/packages/icons/utils/previewer.tsx index 700dd5bc07a9..a1018d21bcc7 100644 --- a/packages/icons/utils/previewer.tsx +++ b/packages/icons/utils/previewer.tsx @@ -1,3 +1,4 @@ +import { MaskIconPaletteContext } from './MaskIconPaletteContext' /** @internal */ export interface IconPreviewProps { icons: Record> @@ -14,6 +15,13 @@ export function IconPreview(props: IconPreviewProps) { {name} } /> } /> + + + + } + /> ))} diff --git a/packages/mask/src/UIRoot.tsx b/packages/mask/src/UIRoot.tsx index f2fb7cfeeb7d..f24b44a7b9fe 100644 --- a/packages/mask/src/UIRoot.tsx +++ b/packages/mask/src/UIRoot.tsx @@ -11,7 +11,9 @@ import { activatedSocialNetworkUI } from './social-network' import { isFacebook } from './social-network-adaptor/facebook.com/base' import { pluginIDSettings } from './settings/settings' import { fixWeb3State } from './plugins/EVM/UI/Web3State' - +import { getBackgroundColor } from './utils' +import { MaskIconPaletteContext } from '@masknet/icons' +import { isTwitter } from './social-network-adaptor/twitter.com/base' const identity = (jsx: React.ReactNode) => jsx as JSX.Element function compose(init: React.ReactNode, ...f: ((children: React.ReactNode) => JSX.Element)[]) { return f.reduceRight((prev, curr) => curr(prev), <>{init}) @@ -24,8 +26,18 @@ type MaskThemeProvider = React.PropsWithChildren<{ function MaskThemeProvider({ children, baseline, useTheme }: MaskThemeProvider) { const theme = useTheme() + const backgroundColor = getBackgroundColor(document.body) + const isDark = theme.palette.mode === 'dark' + const isDarker = backgroundColor === 'rgb(0,0,0)' + return compose( children, + (jsx) => ( + + {jsx} + + ), (jsx) => , (jsx) => (