72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { extendTheme, type ThemeConfig } from '@chakra-ui/react';
|
|
|
|
// Basic color mode config
|
|
const config: ThemeConfig = {
|
|
initialColorMode: 'system',
|
|
useSystemColorMode: true,
|
|
};
|
|
|
|
// Define some basic colors similar to Airflow's scheme
|
|
// This is a simplified version. For full consistency, you'd replicate more from Airflow's core theme.ts
|
|
const colors = {
|
|
airflow: {
|
|
50: '#EBF8FF', // Lightest blue
|
|
100: '#BEE3F8',
|
|
200: '#90CDF4',
|
|
300: '#63B3ED',
|
|
400: '#4299E1', // Primary blue
|
|
500: '#3182CE',
|
|
600: '#2B6CB0',
|
|
700: '#2C5282',
|
|
800: '#2A4365', // Darkest blue
|
|
900: '#1A365D',
|
|
},
|
|
success: {
|
|
500: '#38A169', // Green
|
|
},
|
|
error: {
|
|
500: '#E53E3E', // Red
|
|
},
|
|
};
|
|
|
|
const theme = extendTheme({
|
|
config,
|
|
colors,
|
|
styles: {
|
|
global: (props: any) => ({
|
|
body: {
|
|
bg: props.colorMode === 'dark' ? 'gray.800' : 'gray.50',
|
|
color: props.colorMode === 'dark' ? 'whiteAlpha.900' : 'gray.800',
|
|
height: '100%', // Ensure body takes full height
|
|
margin: 0,
|
|
},
|
|
html: {
|
|
height: '100%',
|
|
},
|
|
'#root': { // Ensure root div also takes full height
|
|
height: '100%',
|
|
}
|
|
}),
|
|
},
|
|
components: {
|
|
Button: {
|
|
baseStyle: {
|
|
// Example: fontWeight: 'bold',
|
|
},
|
|
variants: {
|
|
solid: (props: any) => ({
|
|
bg: props.colorMode === 'dark' ? 'airflow.300' : 'airflow.500',
|
|
color: props.colorMode === 'dark' ? 'gray.800' : 'white',
|
|
_hover: {
|
|
bg: props.colorMode === 'dark' ? 'airflow.400' : 'airflow.600',
|
|
}
|
|
}),
|
|
},
|
|
},
|
|
// You can add more component-specific style overrides here if needed
|
|
// For example, for Markdown components if View.tsx styling needs to be theme-aware
|
|
},
|
|
});
|
|
|
|
export default theme;
|