theme-toggle is a simple component that can help you add different themes to your web app.
it uses css invert() and hue-rotate() functions to change the look of your entire html document so It may gives unexpected changes .. in the next version there will be some more customization
The theme switcher icon is used from Adam Argyle's Article
- Demo of icon
This is a simple custom component, you only need to import it (or bu using external link), and add <theme-toggle></theme-toggle> custom element where you want to see the toggle button
you can Install it via npm
npm install theme-togglethen import it
import "theme-toggle";now you can use the <theme-toggle></theme-toggle> custom element wherever you want
<theme-toggle></theme-toggle>doesn't have any children element's
themeattribute is required, you can see attributes table below
you can also use a cdn link to use theme-toggle in your project
<script type="module" src="https://unpkg.com/theme-toggle@0.1.5/dist/theme-toggle.js" crossorigin="anonymous"></script>you can use some custom changes to change the default behavior of theme-toggle, we are working on adding more customization later
| Attribute | Values | Required | default | example |
|---|---|---|---|---|
| theme | sets the initial theme of your page, and the correct theme icon, there are 2 available values - dark: sets the initial theme to dark, and theme-icon to light - light: sets the initial theme to light, and theme-icon to dark |
YES |
- | <theme-toggle theme="light"></theme-toggle> |
| width | you con control the square container's width using this attribute, it takes number string, do not add units .. by default it uses px |
NO |
2rem |
<theme-toggle theme="light" width="25"></theme-toggle> |
| storable | this attributes controls if the current theme is stored so when you refresh the page it loads the last used theme, the theme is storable by default and it accepts 2 different values, true or false |
NO |
true |
<theme-toggle theme="light" storable="false"></theme-toggle> |
This tools needs a lot of contribution, and it's open for contributing :)
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Add your changes:
git add . - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request 😎