Describe the bug
After specifying some custom values in custom-theme.js, and after using red.500, the color that shows up is different from what I specified
To Reproduce
Steps to reproduce the behavior:
- Start a new Vue project with TS
- Set up Chakra as you usually would (via @vue/cli)
...
import Chakra, { CThemeProvider, CReset } from '@chakra-ui/vue';
import * as customTheme from './custom-theme.js';
// tried import {customTheme} from './custom-theme'; as I changed this file to .ts one
// tried exporting a variable as well, and doing import customTheme
...
Vue.use(Chakra, {
extendTheme: customTheme,
});
...
new Vue({
router,
store,
i18n,
render: (h) => h(CThemeProvider, [h(CReset), h(App)]),
}).$mount('#app');
- Specify custom values in
custom-theme.js such as
export default {
...
colors: {
// this is essentially blue
blue: {
50: '#e9f0f7',
100: '#d4e0ef',
200: '#a9c1df',
300: '#7da2ce',
400: '#5283be',
500: '#2764ae', // the actual blue color
600: '#1f508b',
700: '#173c68',
800: '#102846',
900: '#081423',
950: '#040a11'
},
Expected behavior
I expect to see my specified value for the blue, not the default chakra one
Desktop (please complete the following information):
- OS: Windows 10
- Browser: Firefox, Brave
- Version: 80.0.1, 1.13.82 Chromium: 85.0.4183.83