@anmiles/theme-switcher

Theme switcher for websites

Installation

For React+TS project

1. Install package:

   npm install @anmiles/theme-switcher

2. Import component:

   import { ThemeSwitcher } from '@anmiles/theme-switcher';

3. Use component:

   <ThemeSwitcher float="right" />

   where

   • float (optional) - position of icon and dropdown box

For static HTML website

1. Install package:

   npm install @anmiles/theme-switcher

2. Copy all files from dist into the target website.

3. Create HTML container for theme switcher:

   <div class="my-selector"></div>

4. Include React library and theme switcher:

   Development

   <script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
   <script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
   <script type="text/javascript" src="./theme-switcher-1.0.2.js"></script>

   Production

   <script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
   <script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
   <script type="text/javascript" src="./theme-switcher-1.0.2.min.js"></script>

5. Place theme switcher into container:

   <script type="text/javascript">
       new ThemeSwitcher({ float: 'right' })
           .render(document.querySelector('.my-selector'));
   </script>

   where

   • float (optional) - position of icon and dropdown box

Usage

Use selectors to write theme-specific styles:

    body[data-theme="light"] .selector {
        /* css rules */
    }

    body[data-theme="dark"] .selector {
        /* css rules */
    }

Or you can just write default styles for light theme and override them for dark theme using body[data-theme="dark"].