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

Custom theme #5

Open
hyojin opened this issue Oct 27, 2020 · 2 comments
Open

Custom theme #5

hyojin opened this issue Oct 27, 2020 · 2 comments

Comments

@hyojin
Copy link

hyojin commented Oct 27, 2020

Hi, thank you for sharing this cool project!

I'm considering using this framework for my project, and definitely customization is required.
Is there any update on custom themes?

If there is no plan yet, I'd like to suggest making the sass variables customizable until then.
hyojin@e118c83

@erictherobot
Copy link
Owner

@hyojin great question and thanks for using Svelteit. There's a new update coming in a few weeks that will allow custom theming like this:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    brand: {
      900: "#1a365d",
      800: "#153e75",
      700: "#2a69ac",
    },
  },
};

Then in the main app entry you could do something like this:

<ThemeProvider theme={customTheme}>{props.children}</ThemeProvider>;

This way, the theme will get passed down to the child components and will add more flexibility. Overall it will be much easier to swap out themes (dark & light mode, etc).

Also there's some new and exciting updates coming from Svelte https://www.youtube.com/watch?v=qSfdtmcZ4d0 which will influence this project's future.

Please let me know if you have any questions. Thanks again!

@hyojin
Copy link
Author

hyojin commented Oct 27, 2020

Hi @erictherobot
Looks great and thank you for sharing the update!
Looking forward to it 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants