feat: support dim color

packages/icons/brands/MiniMask.tsx

@@ -45,5 +45,6 @@ export const MiniMaskIcon: typeof SvgIcon = createPaletteAwareIcon(
             </clipPath>
         </defs>
     </g>,
+    undefined,
     '0 0 48 48',
 )

packages/icons/general/Eye.tsx

@@ -34,5 +34,6 @@ export const EyeIcon = createPaletteAwareIcon(
             strokeLinejoin="round"
         />
     </g>,
+    undefined,
     '0 0 20 20',
 )

packages/icons/general/EyeOff.tsx

@@ -20,5 +20,6 @@ export const EyeOffIcon = createPaletteAwareIcon(
             strokeLinejoin="round"
         />
     </g>,
+    undefined,
     '0 0 20 20',
 )

packages/icons/general/LinkOut.tsx

@@ -37,5 +37,6 @@ export const LinkOutIcon: typeof SvgIcon = createPaletteAwareIcon(
             strokeLinejoin="round"
         />
     </g>,
+    undefined,
     '0 0 20 20',
 )

packages/icons/general/PublicKey.tsx

@@ -20,5 +20,6 @@ export const PublicKeyIcon = createPaletteAwareIcon(
             strokeLinejoin="round"
         />
     </g>,
+    undefined,
     '0 0 20 20',
 )

packages/icons/general/Retweet.tsx

@@ -14,5 +14,6 @@ export const RetweetIcon = createPaletteAwareIcon(
             fill="#D9D9D9"
         />
     </g>,
+    undefined,
     '0 0 24 24',
 )

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'

packages/icons/plugins/GoodGhosting.tsx

@@ -15,5 +15,6 @@ export const GoogGhostingIcon: typeof SvgIcon = createPaletteAwareIcon(
             fill="#fff"
         />
     </g>,
+    undefined,
     '0 0 28 28',
 )

packages/icons/plugins/Valuables.tsx

@@ -19,5 +19,6 @@ export const ValuablesIcon: typeof SvgIcon = createPaletteAwareIcon(
             fill="#fff"
         />
     </g>,
+    undefined,
     '0 0 28 28',
 )

packages/icons/settings/SettingsAppearance.tsx

@@ -25,5 +25,6 @@ export const SettingsAppearanceIcon: typeof SvgIcon = createPaletteAwareIcon(
         <circle cx="14.212" cy="7.754" r=".531" fill="#fff" stroke="#fff" />
         <circle cx="16.575" cy="9.367" r=".531" fill="#fff" stroke="#fff" />
     </g>,
+    undefined,
     '0 0 24 24',
 )

packages/icons/settings/SettingsBackup.tsx

@@ -29,5 +29,6 @@ export const SettingsBackupIcon: typeof SvgIcon = createPaletteAwareIcon(
         />
         <path d="M17 21v-8H7v8M7 3v5h8" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
     </g>,
+    undefined,
     '0 0 24 24',
 )

packages/icons/settings/SettingsEmail.tsx

@@ -23,5 +23,6 @@ export const SettingsEmailIcon: typeof SvgIcon = createPaletteAwareIcon(
         />
         <path d="m22 6-10 7L2 6" stroke="#fff" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
     </g>,
+    undefined,
     '0 0 24 24',
 )

packages/icons/settings/SettingsLanguage.tsx

@@ -71,5 +71,6 @@ export const SettingsLanguageIcon: typeof SvgIcon = createPaletteAwareIcon(
             </clipPath>
         </defs>
     </g>,
+    undefined,
     '0 0 24 24',
 )

packages/icons/settings/SettingsPassword.tsx

@@ -21,5 +21,6 @@ export const SettingsPasswordIcon: typeof SvgIcon = createPaletteAwareIcon(
             strokeLinejoin="round"
         />
     </g>,
+    undefined,
     '0 0 24 24',
 )

packages/icons/settings/SettingsPhone.tsx

@@ -23,5 +23,6 @@ export const SettingsPhoneIcon: typeof SvgIcon = createPaletteAwareIcon(
         />
         <path d="M12 18h.01" stroke="#fff" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
     </g>,
+    undefined,
     '0 0 24 24',
 )

packages/icons/settings/SettingsRestore.tsx

@@ -21,5 +21,6 @@ export const SettingsRestoreIcon: typeof SvgIcon = createPaletteAwareIcon(
             strokeLinejoin="round"
         />
     </g>,
+    undefined,
     '0 0 24 24',
 )

packages/icons/settings/SettingsSync.tsx

@@ -31,5 +31,6 @@ export const SettingsSyncIcon: typeof SvgIcon = createPaletteAwareIcon(
             fill="#fff"
         />
     </g>,
+    undefined,
     '0 0 24 24',
 )

packages/icons/utils/MaskIconPaletteContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+
+export type MaskIconPalette = 'light' | 'dark' | 'dim'
+export const MaskIconPaletteContext = createContext<MaskIconPalette>('dark')

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 <svg> tag
  * @param dark SVG content when the theme is light theme. Do not include <svg> tag
+ * @param dim SVG content when the theme is dark, and the MaskIconPaletteContext is "dim". Do not include <svg> 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,
+    )
 }

packages/icons/utils/previewer.tsx

@@ -1,3 +1,4 @@
+import { MaskIconPaletteContext } from './MaskIconPaletteContext'
 /** @internal */
 export interface IconPreviewProps {
     icons: Record<string, React.ComponentType<any>>
@@ -14,6 +15,13 @@ export function IconPreview(props: IconPreviewProps) {
                         <td>{name}</td>
                         <td children={<C />} />
                         <td children={<C className="black" />} />
+                        <td
+                            children={
+                                <MaskIconPaletteContext.Provider value="dim">
+                                    <C className="black" />
+                                </MaskIconPaletteContext.Provider>
+                            }
+                        />
                     </tr>
                 ))}
             </table>

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) => (
+            <MaskIconPaletteContext.Provider
+                value={isDark ? (!isDarker && isTwitter(activatedSocialNetworkUI) ? 'dim' : 'dark') : 'light'}>
+                {jsx}
+            </MaskIconPaletteContext.Provider>
+        ),
         (jsx) => <ThemeProvider theme={theme} children={jsx} />,
         (jsx) => (
             <CustomSnackbarProvider