mantine: 主题配置
根据项目需要，配置相应的主题色
方案
- MaintineProvider + theme
import { Text, Button, MantineProvider } from '@mantine/core';
<MantineProvider theme={mantineTheme}>
<App />
</MantineProvider>Mantine 更加推荐的 colors
使用其自带的
MantineColorsTuple类型。
import { MantineColorsTuple } from '@mantine/core';
export default {
grape: [
'#f1f1f8',
'#dfdfea',
'#bebed7',
'#9999c3',
'#7b7ab3',
'#6866a9',
'#5d5ca5',
'#4e4d91',
'#3E3E7C', // The one
'#3a3a74',
],
red: [
'#ffe9ee',
'#ffd3d8',
'#f8a3b0',
'#f27184',
'#ed475f',
'#eb2d47',
'#ea1e3c',
'#d1102e',
'#EB2441', // The one
'#a40021',
],
} as Record<string, MantineColorsTuple>;theme 核心代码
- 特别提示: 配置组件的时候，有些是
color，有些是 c
import { Button, ActionIcon, Checkbox, Badge, Anchor, createTheme } from '@mantine/core';
export default createTheme({
primaryColor: 'grape',
primaryShade: 8,
colors: {
grape: [
'#f1f1f8',
'#dfdfea',
'#bebed7',
'#9999c3',
'#7b7ab3',
'#6866a9',
'#5d5ca5',
'#4e4d91',
'#3E3E7C', // The one
'#3a3a74',
],
red: [
'#ffe9ee',
'#ffd3d8',
'#f8a3b0',
'#f27184',
'#ed475f',
'#eb2d47',
'#ea1e3c',
'#d1102e',
'#EB2441', // The one
'#a40021',
],
},
components: {
Button: Button.extend({
defaultProps: {
radius: 'xl',
},
}),
Checkbox: Checkbox.extend({
defaultProps: {
size: 'md',
},
}),
ActionIcon: ActionIcon.extend({
defaultProps: {
variant: 'transparent',
color: 'dark',
},
}),
Anchor: Anchor.extend({
defaultProps: {
c: 'blue.6',
},
}),
Badge: Badge.extend({
defaultProps: {
// c: 'gray',
},
}),
},
});Tailwindcss 主题色同步
- 配置文件如下: tailwind.config.cjs
/** @type {import("tailwindcss").Config} */
module.exports = {
presets: [require("@jswork/presets-tailwind")],
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
spacing: {
18: "4.5rem",
20: "5rem",
22: "5.5rem",
},
colors: {
grape: {
50: "#f1f1f8",
100: "#dfdfea",
200: "#bebed7",
300: "#9999c3",
400: "#7b7ab3",
500: "#6866a9",
600: "#5d5ca5",
700: "#4e4d91",
800: "#3E3E7C", // The one
900: "#3a3a74"
},
red: {
50: "#ffe9ee",
100: "#ffd3d8",
200: "#f8a3b0",
300: "#f27184",
400: "#ed475f",
500: "#eb2d47",
600: "#ea1e3c",
700: "#d1102e",
800: "#EB2441", // The one
900: "#a40021"
},
}
}
},
plugins: []
};