Add support for adding custom themes for specific paratimes

Author: csillag

src/config.ts

@@ -4,6 +4,7 @@ import { Layer } from './oasis-nexus/generated/api'
 import { NativeToken, NativeTokenInfo } from './types/ticker'
 import { SearchScope } from './types/searchScope'
 import { Network } from './types/network'
+import type { Theme } from '@mui/material/styles/createTheme'
 
 export const consensusDecimals = 9
 /**
@@ -213,3 +214,8 @@ export const specialScopePaths: Partial<Record<Network, Partial<Record<Layer, [s
   [Network.mainnet]: {},
   [Network.testnet]: {},
 }
+
+export const specialScopeThemes: Partial<Record<Network, Partial<Record<Layer, Theme>>>> = {
+  [Network.mainnet]: {},
+  [Network.testnet]: {},
+}

src/styles/theme/index.ts

@@ -3,6 +3,7 @@ import { defaultTheme } from './defaultTheme'
 import { testnetTheme } from './testnet/theme'
 import type { Theme } from '@mui/material/styles/createTheme'
 import { Layer } from '../../oasis-nexus/api'
+import { specialScopeThemes } from '../../config'
 
 export { defaultTheme } from './defaultTheme'
 export { testnetTheme } from './testnet/theme'
@@ -11,6 +12,9 @@ export const tooltipDelay = 500
 export const typingDelay = 1000
 
 export const getThemeForScope = (network: Network, layer?: Layer): Theme => {
+  const specialTheme = layer ? specialScopeThemes[network]?.[layer] : undefined
+  if (specialTheme) return specialTheme
+
   switch (network) {
     case Network.mainnet:
       return defaultTheme