gerbil/src/theme.ts

74 lines
1.5 KiB
TypeScript

import { createTheme, CSSVariablesResolver } from '@mantine/core';
export const theme = createTheme({
fontFamily: 'Inter, sans-serif',
headings: {
fontFamily: 'Inter, sans-serif',
},
white: '#fafafa',
black: '#101113',
colors: {
gray: [
'#f8f9fa',
'#f1f3f4',
'#e9ecef',
'#dee2e6',
'#ced4da',
'#adb5bd',
'#6c757d',
'#495057',
'#343a40',
'#212529',
],
dark: [
'#c1c2c5',
'#a6a7ab',
'#909296',
'#5c5f66',
'#373a40',
'#2c2e33',
'#25262b',
'#1a1b1e',
'#141517',
'#101113',
],
},
components: {
Tooltip: {
styles: {
tooltip: {
backgroundColor: 'var(--mantine-color-dark-6)',
color: 'var(--mantine-color-white)',
},
arrow: {
backgroundColor: 'var(--mantine-color-dark-6)',
},
},
},
Modal: {
styles: {
content: {
backgroundColor:
'light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7))',
},
header: {
backgroundColor:
'light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7))',
},
},
},
},
});
export const cssVariablesResolver: CSSVariablesResolver = () => ({
variables: {},
light: {
'--mantine-color-body': '#fafafa',
'--mantine-color-white': '#fafafa',
'--mantine-color-default-border': '#dee2e6',
},
dark: {
'--mantine-color-body': '#0f0f0f',
'--mantine-color-default-border': '#2a2a2a',
},
});