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.

Sign up for GitHub

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

Jump to bottom

feat: Custom Themes #83

Merged
merged 2 commits into from
Jul 14, 2024
Merged

feat: Custom Themes #83

merged 2 commits into from
Jul 14, 2024

Conversation

huntabyte
Copy link
Member

This PR introduces the ability for Mode Watcher to track custom themes, which are persisted to local storage alongside the mode and are applied to the root element via the data-theme attribute.

You can set a default theme like so:

<ModeWatcher defaultTheme="dracula" />

and the rendered html will look like this:

<html data-theme="dracula">

You can programatically set a theme using the setTheme function:

<script>
	import { setTheme } from 'mode-watcher'
</script>

<span>Select a theme</span>
<button on:click={() => setTheme('retro')}>Retro</button>
<button on:click={() => setTheme('dracula')}>Dracula</button>
<button on:click={() => setTheme('usa')}>Red, White, and Blue</button>

Closes: #66

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jul 14, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 86a9f92

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
mode-watcher Patch
mode-watcher-docs Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@huntabyte huntabyte requested a review from ollema July 14, 2024 20:53
@huntabyte
Copy link
Member Author

I would appreciate a review here, @ollema 😃 Once this is merged, planning to add the ability for users to define custom local storage keys, and then we'll release 1.0 before Svelte 5 so that 2.0 is full Svelte 5 support.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 14, 2024 •
edited
Loading

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
mode-watcher ✅ Ready (View Log) Visit Preview 86a9f92

@huntabyte huntabyte merged commit 9c2d9e3 into main Jul 14, 2024
4 checks passed
@huntabyte huntabyte deleted the feat/themes branch July 14, 2024 21:32
@github-actions github-actions bot mentioned this pull request Jul 14, 2024
Merged
@ahamedislam ahamedislam mentioned this pull request Aug 5, 2024
Open
@bartvdbraak bartvdbraak mentioned this pull request Aug 5, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ollema ollema Awaiting requested review from ollema

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add support for additional theme values
1 participant
@huntabyte