theme-switch 1.3.0
Install from the command line:
Learn more about npm packages
$ npm install @mahozad/theme-switch@1.3.0
Install via package.json:
"@mahozad/theme-switch": "1.3.0"
About this version
A simple custom HTML element
called <theme-switch>.
This widget toggles between light theme, dark theme, and automatic theme (OS theme).
It works by adding a custom attribute named 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 below for an example.
See the demo.
It was inspired by this YouTube video and this library.
Download the theme-switch.min.js file and reference it at the top of your HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page title</title>
<!-- Do not use defer or async attributes -->
<script src="theme-switch.min.js"></script>
<!-- Rest of the styles, scripts, etc. -->
</head>
<body>
<theme-switch></theme-switch>
</body>You can also use CDNs instead of downloading the script manually and hosting it yourself:
- Using the latest version:
<script src="https://unpkg.com/@mahozad/theme-switch"></script> <!-- OR --> <script src="https://cdn.jsdelivr.net/npm/@mahozad/theme-switch"></script>
- Using a specific version:
<script src="https://unpkg.com/@mahozad/[email protected]"></script> <!-- OR --> <script src="https://cdn.jsdelivr.net/npm/@mahozad/[email protected]"></script>
A custom element is no different from HTML built-in elements.
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 switch */
--theme-switch-icon-color: #aabbcc;
}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 dark theme:
/* These are applied for the default (light) theme */
/* (or when the toggle is auto, and the OS theme is light) */
:root {
--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 */
[data-theme="dark"] {
--my-page-background-color: #112233;
--my-icons-color: #efefef;
}
body {
background: var(--my-page-background-color);
}Click to expand
From command line, install the library:
npm install --save @mahozad/theme-switchIn your angular.json file at the root of your project update the scripts property like this:
"scripts": [
{
"input": "node_modules/@mahozad/theme-switch/dist/theme-switch.min.js",
"inject": false,
"bundleName": "theme-switch"
}
]Add the following to your app.module.ts file to enable HTML custom elements:
@NgModule({
// ...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})In <head> of your index.html file add the script just as described above:
<script src="theme-switch.js"></script>Finally, use the element anywhere you want:
<theme-switch></theme-switch>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...
});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.
TODO:
- See this comprehensive GitHub repo about custom elements
- Try to publish the library in https://www.webcomponents.org/
- Try to add the library to rufus site
- Try to add the library to jest site (probably its
docs/directory. see this PR) - Try to add the library to MDN site
- Try to add the library to docusaurus
- Try to add the library to dokka
- Try to add the library to mkdocs-material
- See chrome auto dark feature for android
