hkuglldocnbodn
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

178 lines
3.8 KiB

import React from 'react';
import * as allThemes from '@theme-ui/presets';
import { Select, Theme, ThemeProviderProps } from 'theme-ui';
import { darken, lighten } from '@theme-ui/color';
import { i18n } from './i18next';
import { useThemeSystem } from './components/ThemeSystemProvider';
const { dark, bulma, tailwind, ...remainingThemes } = allThemes;
export const variants: any = {
buttons: {
primary: {
color: 'background',
bg: 'primary',
cursor: 'pointer',
'&:hover': {
textDecoration: 'none',
cursor: 'pointer',
color: 'background',
},
'&:disabled': {
opacity: 0.5,
cursor: 'not-allowed',
},
},
secondary: {
color: 'background',
bg: 'secondary',
},
muted: {
bg: 'muted',
color: 'text',
},
highlight: {
bg: 'highlight',
color: 'text',
'&:hover': {
backgroundColor: 'muted',
},
},
danger: {
backgroundColor: 'danger',
},
outline: {
color: 'text',
borderColor: 'muted',
borderWidth: '2px',
borderStyle: 'solid',
backgroundColor: 'transparent',
},
},
forms: {
select: {
// borderColor: lighten('muted', 0.4),
backgroundColor: 'background',
color: 'text',
},
},
alerts: {
primary: {
color: 'background',
bg: 'primary',
},
muted: {
color: 'text',
bg: 'muted',
},
},
};
const defaultTheme: ThemeProviderProps<Theme> = {
...dark,
fonts: {
body:
'Lato, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading: 'inherit',
monospace: 'Menlo, monospace',
},
colors: {
...dark.colors,
background: '#222',
// primary: '#DA1B9A',
primary: '#A4288B',
secondary: '#2030DF',
text: '#DEDEDE',
accent: '#F3B90C',
danger: '#dc3545',
muted: '#303030',
highlight: '#00BC8C',
},
buttons: {
...variants.buttons,
primary: {
...variants.buttons.primary,
color: 'text',
bg: 'primary',
'&:hover': {
bg: 'primary',
},
},
secondary: {
...variants.buttons.secondary,
color: 'text',
bg: 'secondary',
},
highlight: {
...variants.buttons.highlight,
color: 'text',
bg: lighten('muted', 0.1),
},
},
alerts: {
...variants.alerts,
primary: {
...variants.alerts.primary,
color: 'text',
bg: 'primary',
},
secondary: {
...variants.alerts.secondary,
color: 'text',
bg: 'secondary',
},
highlight: {
...variants.alerts.highlight,
color: 'text',
bg: lighten('muted', 0.1),
},
},
};
export const themes = {
chapo: { ...defaultTheme },
dark,
...remainingThemes,
};
// console.log({ themes })
interface ThemeSelectorProps {
value: string;
onChange: (name: string) => void;
}
export function ThemeSelector({ value, onChange }: ThemeSelectorProps) {
const { setCurrentTheme } = useThemeSystem();
// console.log({ context });
function handleThemeChange(e: React.ChangeEvent<HTMLSelectElement>) {
setCurrentTheme(e.target.value);
onChange(e.target.value);
}
return (
<Select
value={value}
onChange={handleThemeChange}
// ml={2}
// className="ml-2 custom-select custom-select-sm w-auto"
>
<option disabled>{i18n.t('theme')}</option>
{Object.keys(themes).map(theme => (
<option key={theme} value={theme}>
{theme}
</option>
))}
</Select>
);
}
// create custom event to allow theme to be changed from anywhere
export function changeTheme(themeName = 'chapo') {
const event = new CustomEvent('change-theme', { detail: themeName });
document.dispatchEvent(event);
}
export default defaultTheme;