Skip to content

Home

Jump to bottom
Mahdi Hosseinzadeh edited this page Mar 27, 2022 · 5 revisions

Installation and usage guide

Regular HTML pages

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>
<!-- OR -->
<script src="https://cdn.skypack.dev/@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>
<!-- OR -->
<script src="https://cdn.skypack.dev/@mahozad/[email protected]"></script>

Node.js and npm

Install the library from a command line with this command:

npm install --save @mahozad/theme-switch

Use the script in your page like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My page title</title>
  <!-- Do not use defer or async attributes -->
  <script src="node_modules/@mahozad/theme-switch/dist/theme-switch.min.js"></script>
  <!-- Rest of the styles, scripts, etc. -->
</head>
<body>

  <theme-switch></theme-switch>

</body>

Angular framework

From command line, install the library:

npm install --save @mahozad/theme-switch

In your angular.json file at the root of your project update the scripts property like follows (Angular automatically minifies the script so do not use the minified version of the library —.min.js file— or the script may run with errors in production):

"scripts": [
  {
    "input": "node_modules/@mahozad/theme-switch/dist/theme-switch.js",
    "inject": false,
    "bundleName": "theme-switch"
  }
]

Add the following to your app.module.ts file to enable HTML custom elements:

import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@NgModule({
    /* ... */
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

In <head> of your index.html file add the script just as described for other methods:

<script src="theme-switch.js"></script>

Finally, use the element anywhere you want:

<theme-switch></theme-switch>
Clone this wiki locally