ThemeProvider
Before using any Dapper UI components, you need to wrap your app in the
ThemeProvider component. This component is responsible for providing the theme to
all child components and loading the default CSS styles.
1
2
3<ThemeProvider>
<Button>Example</Button>
</ThemeProvider>Dapper UI comes with a default theme but can be customized by passing a custom theme object to
the
theme prop.
1
2
3
4
5
6
7
8
9
10
11
12
13<script lang="ts">
import { ThemeProvider, Button, defaultTheme } from '@dapper-ui/core';
import type { DapperUiTheme } from '@dapper-ui/core';
const myTheme: DapperUiTheme = {
...defaultTheme,
/* Override default theme */
}
</script>
<ThemeProvider theme={myTheme}>
<Button>Example</Button>
</ThemeProvider>The theme object has the following structure:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/**
* 10 shades of colors, from 50 to 900 (50 is the lightest, 900 is the darkest).
*
* Colors are in the format of #RRGGBB.
*/
type ColorPalette = [
string, // 50
string, // 100
string, // 200
string, // 300
string, // 400
string, // 500
string, // 600
string, // 700
string, // 800
string // 900
];
type Shades = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
type Radius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
interface DapperUiTheme {
font?: {
/**
* That default font family for text.
*/
default?: string;
/**
* The default font family for code.
*/
code?: string;
};
colors: {
/**
* The primary color palette used by default.
*/
primary: ColorPalette;
/**
* A neutral color shade, usually some kind of gray.
*/
neutral: ColorPalette;
/**
* The dark color palette used in the dark mode.
*/
dark: ColorPalette;
/**
* Other colors that can be referenced by name in components.
*/
[other: string]: ColorPalette;
};
radiuses: {
/**
* The default radius for buttons.
*/
button: Radius;
/**
* The default radius for input fields (TextField, Select, etc.)
*/
input: Radius;
/**
* The default radius for checkboxes.
*/
checkbox: Radius;
/**
* The default radiuses for the slider.
*/
slider: {
/**
* The default radius for the slider thumb.
*/
thumb: Radius;
/**
* The default radius for the slider track.
*/
track: Radius;
};
/**
* The default radius for dialogs.
*/
dialog: Radius;
/**
* The default radius for progress bars.
*/
progressBar: Radius;
/**
* The default radius for meters.
*/
meter: Radius;
};
}