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

✨feat(theme): adds theme prop to components, new store, and helper components #34

Merged
merged 56 commits into from
Jan 8, 2024

Conversation

dysfunc
Copy link
Contributor

@dysfunc dysfunc commented Dec 25, 2023

Why these changes?
This includes:

  • Adds theme prop to all container components for scoped theming
  • Adds a new theme store hook to control global theming
  • Adds a <Theme> and <ThemeToggler> as additional helper components to control theming (scoped + global)

Theme prop

<script>
  import { Alert } from '@sveltestrap/sveltestrap';
</script>

<Alert theme="dark" ... />

Theme Provider

<script>
  import { Theme } from '@sveltestrap/sveltestrap';
</script>

<Theme theme="dark">
  ...anything
</Theme>

Theme store

<script>
  import { colorMode, Button } from '@sveltestrap/sveltestrap';

  const onClick = () => {
    $colorMode = 'dark';
  };
</script>

<Button on:click={onClick}>Switch to dark mode</Button>

Theme Hook

<script>
  import { useColorMode, Button } from '@sveltestrap/sveltestrap';

  const onClick = () => {
    useColorMode('dark');
  };
</script>

<Button on:click={onClick}>Change global mode to dark</Button>

The theme hook will accept an element ref. If a valid ref has been provided, it will apply the theme change to that element only - not globally.

Closes #33

@dysfunc dysfunc added Type: Feature A new feature or functionality Priority: Low Bug, issue, or pull request is a P3 Status: WIP This pull request is in progress DO NOT MERGE Do not merge this pull request labels Dec 25, 2023
@dysfunc dysfunc self-assigned this Dec 25, 2023
@dysfunc dysfunc reopened this Dec 27, 2023
@dysfunc dysfunc added Status: Review Needed This pull request needs a review and removed Status: WIP This pull request is in progress DO NOT MERGE Do not merge this pull request labels Dec 28, 2023
@dysfunc dysfunc added this to the v6.2.0 milestone Dec 31, 2023
@dysfunc dysfunc changed the title feat(theme): adds theme prop to components, new store, and helper components ✨feat(theme): adds theme prop to components, new store, and helper components Jan 5, 2024
Copy link
Collaborator

@bestguy bestguy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome looks great, thanks for all the work with all these files.

@dysfunc dysfunc merged commit 2996342 into main Jan 8, 2024
4 checks passed
@dysfunc dysfunc deleted the theming branch January 8, 2024 15:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Priority: Low Bug, issue, or pull request is a P3 Status: Review Needed This pull request needs a review Type: Feature A new feature or functionality
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

✨ theme hook similar to useColorMode in bootstrap-vue-next
3 participants