Skip to content

Home

Jump to bottom
Mahdi Hosseinzadeh edited this page Mar 26, 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 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:

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