The
thememodule easily provides ability to makelightanddarktheme.
yarn add svelte-themeimport {ThemeProvider} from 'svelte-theme';const {theme} = getContext<ThemeStore>('svelte-theme');Note that
generictypeThemeStorehelp you see theme props with autocomplete when usingtypescript.
The theme props will be converted to kebab-case in global css variables. For mainDark prop, it will be converted to --main-dark css variable. Thereofre inside style tag, you can you it like below.
<style>
p {
color: var(--main-dark);
}
</style>If you want to add opacity to theme color, you should use color-rgb instead of color.
<style>
p {
color: rgba(var(--main-dark-rgb), 0.2);
}
</style>Note that rgb value is calculated based on hex value, such as #000 or #0DB293.
export const colors = {
primary: '#0DB293',
primaryLight: '#75D0B8',
secondary: '#00D9D5',
success: '#33FF2F',
danger: '#FF002E',
warning: '#F2DF0F',
info: '#3A74E7',
brand: '#28DB98',
dusk: '#414D6B',
red: '#FF728D',
orange: '#F6A623',
yellow: '#EED100',
green: '#24CD97',
blue: '#679EFF',
purple: '#B669F9',
light: '#EDEDED',
};
export type CommonColors = typeof colors;
export const light = {
...colors,
paper: '#F2F5F6',
disabled: '#C4C4C4',
background: '#FFF',
placeholder: '#6D6D6D',
text: '#000',
textLight: '#1B1B1B',
textContrast: '#FFF',
main: colors.primary,
mainDark: colors.primaryLight,
card: '#FFF',
link: '#8E9095',
border: '#D3D4D5',
};
export type Theme = typeof light;
export const dark: Theme = {
...colors,
paper: '#2A2A2A',
disabled: '#515151',
background: '#000',
placeholder: '#6D6D6D',
text: '#FFF',
textLight: '#D3D3D3',
textContrast: '#FFF',
main: colors.primaryLight,
mainDark: colors.primary,
card: '#1C1C1C',
link: '#B5B7BC',
border: '#343536',
};<ThemeProvider customTheme={{light, dark}}>
<App />
</ThemeProvider>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent