Skip to content

theme-switch 1.5.1

Install from the command line:
Learn more about npm packages
$ npm install @mahozad/theme-switch@1.5.1
Install via package.json:
"@mahozad/theme-switch": "1.5.1"

About this version

Tests workflow Codecov Minified size Published on webcomponents.org

Animated icon

HTML light/dark/system theme switch button

This is an animated custom HTML element which toggles between light theme, dark theme, and automatic theme (OS theme). It adds a custom attribute (data-theme) to the html element of your page. You can style your page the way you like based on the value of that attribute.

See the demo page and scroll below for an example.

Installing and using the library

  • Regular HTML pages

    <script src="https://unpkg.com/@mahozad/theme-switch"></script>
  • Node.js and npm

    npm install --save @mahozad/theme-switch
    <script src="node_modules/@mahozad/theme-switch/dist/theme-switch.min.js"></script>
  • Angular and more

    For Angular framework and more details about each of the above installation methods see the wiki.

After installing the library, use the element like this (make sure to include the end tag):

<theme-switch></theme-switch>

Styling the switch element

A custom element is no different from the built-in elements of HTML.
Use and style it however you want just like you would use and style a regular element (e.g. a div):

theme-switch {
  width: 64px;
  padding: 8px;
  background: #888;
  
  /* There is a special property called --theme-switch-icon-color
   * which you can set, to change the color of the icon in the switch */
  --theme-switch-icon-color: #aabbcc;
}

Styling a page based on the theme

In your CSS stylesheet, specify your desired styles for light and dark themes. One way is to define custom CSS properties for your colors, sizes, etc. and redefine them (if needed) with new values for the other theme:

/* These are applied for the default (light) theme */
/* (or when the toggle is auto, and the OS theme is light) */
html {
  --my-page-background-color: #fff;
  --my-icons-color: #000;
  --my-primary-color: red;
}

/* These are applied for the dark theme */
/* (or when the toggle is auto, and the OS theme is dark) */
/* If a property has the same value for both light and dark themes, no need to redeclare it here */
html[data-theme="dark"] {
  --my-page-background-color: #112233;
  --my-icons-color: #efefef;
}

body {
  background: var(--my-page-background-color);
}

Misc

Click here to expand

The switch element fires (triggers) a custom event called themeToggle every time it is toggled (clicked). You can listen and react to it if you want:

document.addEventListener("themeToggle", event => {
  console.log(`Old theme: ${ event.detail.oldState }`);
  console.log(`New theme: ${ event.detail.newState }`);
  // More operations...
});

This widget was inspired by this YouTube video and this library.


See this article which is about creating HTML custom elements.

See the icon for switching themes (located in the top right corner) on Google Fonts site. Also see this site.

See this article for implementing dark/light theme on sites.

See this post for how to override dark/light theme for a site.


Similar libraries


TODO:

Details


Assets

  • theme-switch-1.5.1-npm.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0