Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Typescript]: Theme values are not updated after modifying them in custom-theme.js, in a Vue TS project. #296

Closed
jessaleks opened this issue Sep 7, 2020 · 7 comments · Fixed by #380
Labels
help wanted 🆘 Extra attention is needed status: needs reproduction ♺ Issue needs a simple reproduction type: contributions welcome 💚 Contributions are welcome! typescript To do with using Typescript

Comments

@jessaleks
Copy link

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:

  1. Start a new Vue project with TS
  2. Set up Chakra as you usually would (via @vue/cli)
  • My implementation
...
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');
  1. 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
@codebender828 codebender828 added the status: needs reproduction ♺ Issue needs a simple reproduction label Sep 7, 2020
@codebender828
Copy link
Collaborator

Hey, @jessaleks !

I'm not sure I understood the exact cause of the problem that you are facing. Could you provide a codesandbox reproducing the problem or a GitHub repo reproducing issue?

This will help determine how to best debug it.

@jessaleks
Copy link
Author

jessaleks commented Sep 7, 2020

@codebender828 sure!

Repo
Here you go

@codebender828
Copy link
Collaborator

Hey @jessaleks.

Thank you. I just checked the repo you shared. It doesn't look like it has the code you want to reproduce. Could you double check to make sure?

@jessaleks
Copy link
Author

@codebender828 sorry, it should have everything right now.
It's a minimal app, however the problem still persists.

@codebender828 codebender828 added the typescript To do with using Typescript label Sep 10, 2020
@codebender828
Copy link
Collaborator

Thanks for the repo link, @jessaleks . Unfortunately I haven't been able to reproduce this issue here in a JS environment. (Deployed here) However I was able to reproduce it when I cloned your project. I'm not really sure why.

I currently have a limited knowledge of typescript to be able to give you a direct path to resolve this issue.

I'll open this up for contribution. I hope you're able to find a solution soon.

@codebender828 codebender828 added help wanted 🆘 Extra attention is needed type: contributions welcome 💚 Contributions are welcome! labels Sep 10, 2020
@codebender828 codebender828 changed the title Theme values are not updated after modifying them in custom-theme.js, in a Vue TS project. [Typescript]: Theme values are not updated after modifying them in custom-theme.js, in a Vue TS project. Sep 10, 2020
@jessaleks
Copy link
Author

Thanks a lot @codebender828! I'll look for a solution on my end, as I am.

@jessaleks
Copy link
Author

jessaleks commented Sep 10, 2020

@codebender828 in the meanwhile, I'd say it would make sense to further discourage the usage of Chakra in Vue TS projects.

Edit: fixing a minor grammar mistake

@codebender828 codebender828 linked a pull request Jan 23, 2021 that will close this issue
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted 🆘 Extra attention is needed status: needs reproduction ♺ Issue needs a simple reproduction type: contributions welcome 💚 Contributions are welcome! typescript To do with using Typescript
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants