150 lines
4.4 KiB
TypeScript
150 lines
4.4 KiB
TypeScript
import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
|
|
import { theme as saasTheme } from '@saas-ui/react'
|
|
|
|
const config: ThemeConfig = {
|
|
initialColorMode: 'system',
|
|
useSystemColorMode: false,
|
|
}
|
|
|
|
// Thème Omnex Ultra-Sombre : étend Saas UI avec un dark mode extrêmement sombre
|
|
// Fond noir pur, surfaces très sombres, texte très contrasté
|
|
export const theme = extendTheme(
|
|
{
|
|
config,
|
|
colors: {
|
|
// Override des couleurs de base pour un look ultra-sombre
|
|
black: '#000000',
|
|
gray: {
|
|
50: '#f7f7f8',
|
|
100: '#e8e8ea',
|
|
200: '#c5c5c9',
|
|
300: '#a2a2a9',
|
|
400: '#7f7f88',
|
|
500: '#5c5c66',
|
|
600: '#43434c',
|
|
700: '#2a2a33',
|
|
800: '#15151b',
|
|
900: '#0a0a0f',
|
|
},
|
|
// Bleu nuit : remplace le violet (colors.purple, palette "primary" de
|
|
// Saas UI) en dark mode uniquement — voir semanticTokens ci-dessous.
|
|
midnight: {
|
|
50: '#e9ebf5',
|
|
100: '#c7cce6',
|
|
200: '#a3abd6',
|
|
300: '#7f8ac6',
|
|
400: '#5b69b6',
|
|
500: '#2d3a7d',
|
|
600: '#232e63',
|
|
700: '#1a2249',
|
|
800: '#11172f',
|
|
900: '#080b16',
|
|
},
|
|
},
|
|
semanticTokens: {
|
|
colors: {
|
|
// Fond principal (body) : noir pur
|
|
'chakra-body-bg': { _light: 'white', _dark: '#000000' },
|
|
// Fond secondaire (layouts, footer) : presque noir
|
|
'chakra-subtle-bg': { _light: 'gray.50', _dark: '#050508' },
|
|
// Surface élevée (cartes) : très sombre mais distinct
|
|
'bg-surface': { _light: 'white', _dark: '#08080c' },
|
|
// Texte principal : blanc très clair pour contraste maximal
|
|
'chakra-body-text': { _light: 'gray.800', _dark: '#f5f5f7' },
|
|
// Bordures : très discrètes, presque invisibles
|
|
'chakra-border-color': { _light: 'gray.200', _dark: 'whiteAlpha.100' },
|
|
|
|
// "primary" (colorScheme des boutons/badges principaux du site) est
|
|
// violet (purple) par défaut via Saas UI — en dark mode, on le
|
|
// remplace par le bleu nuit défini ci-dessus. Chaque nuance est
|
|
// interceptée individuellement : tout ce qui utilise colorScheme=
|
|
// "primary" (Button, Badge...) ou une couleur littérale "primary.500"
|
|
// bascule automatiquement, sans toucher au reste du code.
|
|
'primary.50': { default: 'purple.50', _dark: 'midnight.50' },
|
|
'primary.100': { default: 'purple.100', _dark: 'midnight.100' },
|
|
'primary.200': { default: 'purple.200', _dark: 'midnight.200' },
|
|
'primary.300': { default: 'purple.300', _dark: 'midnight.300' },
|
|
'primary.400': { default: 'purple.400', _dark: 'midnight.400' },
|
|
'primary.500': { default: 'purple.500', _dark: 'midnight.500' },
|
|
'primary.600': { default: 'purple.600', _dark: 'midnight.600' },
|
|
'primary.700': { default: 'purple.700', _dark: 'midnight.700' },
|
|
'primary.800': { default: 'purple.800', _dark: 'midnight.800' },
|
|
'primary.900': { default: 'purple.900', _dark: 'midnight.900' },
|
|
},
|
|
},
|
|
styles: {
|
|
global: {
|
|
body: {
|
|
bg: 'chakra-body-bg',
|
|
color: 'chakra-body-text',
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
// Assombrir les composants Saas UI
|
|
Card: {
|
|
baseStyle: {
|
|
container: {
|
|
bg: 'bg-surface',
|
|
borderColor: 'whiteAlpha.50',
|
|
},
|
|
},
|
|
},
|
|
Button: {
|
|
baseStyle: {
|
|
_dark: {
|
|
bg: 'gray.800',
|
|
_hover: { bg: 'gray.700' },
|
|
},
|
|
},
|
|
},
|
|
Input: {
|
|
baseStyle: {
|
|
field: {
|
|
_dark: {
|
|
bg: 'gray.900',
|
|
borderColor: 'whiteAlpha.200',
|
|
_focus: {
|
|
borderColor: 'whiteAlpha.400',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
Select: {
|
|
baseStyle: {
|
|
field: {
|
|
_dark: {
|
|
bg: 'gray.900',
|
|
borderColor: 'whiteAlpha.200',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
Textarea: {
|
|
baseStyle: {
|
|
_dark: {
|
|
bg: 'gray.900',
|
|
borderColor: 'whiteAlpha.200',
|
|
},
|
|
},
|
|
},
|
|
Modal: {
|
|
baseStyle: {
|
|
overlay: {
|
|
_dark: {
|
|
bg: 'blackAlpha.800',
|
|
},
|
|
},
|
|
content: {
|
|
_dark: {
|
|
bg: '#08080c',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
saasTheme,
|
|
)
|