JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="wrap">
<input  type="checkbox" id="s1">
<label id="toggle" class="slider-v1" for="s1"></label>
</div>

<script>
  var options = {
    light: 'light.css',
    dark: 'dark.css',
    startAt: '23:00',
    endAt: '06:00'
  };
  var DarkMode = new DarkMode(options);
</script>

CSS

.slider-v1 {
    position: relative;
    display: block;
    width: 5.5em;
    height: 3em;
    cursor: pointer;
    border-radius: 1.5em;
    transition: 350ms;
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
    box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
}
.slider-v1::before {
    position: absolute;
    content: '';
    width: 2em;
    height: 2em;
    top: 0.5em;
    left: 0.5em;
    border-radius: 50%;
    transition: 250ms ease-in-out;
    background: linear-gradient(#f5f5f5 10%, #eeeeee);
    box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.5em 0.3em -0.1em rgba(0, 0, 0, 0.25);
}
input:checked + .slider-v1::after {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #4c6;
    box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.12);
}
input:checked + .slider-v1::before {
    left: 3em;
}
.slider-v1::after {
    position: absolute;
    content: '';
    width: 1em;
    height: 1em;
    top: 1em;
    left: 6em;
    border-radius: 50%;
    transition: 250ms ease-in;
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ddd;
    box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.3);
}
input {
    position: absolute;
    left: -9999px;
}

JavaScript

var head = document.getElementsByTagName('head')[0],
    body = document.getElementsByTagName('body')[0];

(function( root, factory ) {
  var pluginName = 'DarkMode';
  if (typeof define === 'function' && define.amd)
    define([], factory(pluginName));
  else if ( typeof exports === 'object' )
    module.exports = factory(pluginName);
  else
    root[pluginName] = factory(pluginName);
}(this, function(pluginName) {
  'use strict';
  // Default values
  var defaults = {
    light: false,
    dark: false,
    startAt: '21:00',
    endAt: '06:00',
    theme: false
  };

  /**
   * Merge defaults with user options
   * @param {Object} defaults Default settings
   * @param {Object} options User options
   */
  var extend = function(target, options) {
    var prop, extended = {};
    for(prop in defaults) {
      if(Object.prototype.hasOwnProperty.call(defaults, prop))
        extended[prop] = defaults[prop];
    }
    for (prop in options) {
      if(Object.prototype.hasOwnProperty.call(options, prop))
        extended[prop] = options[prop];
    }
    return extended;
  };

  /**
   * Normalize Time
   * @private
   * @param {String} time Time on NN:NN format
   * @return {Date}
   */
  var normalizeTime = function(time) {
    var date = new Date(),
        normalized = time.split(':');

    return date.setHours(normalized[0], normalized[1], 0, 0);
  }
  
  /**
   * Include Stylesheet to document
   * @private
   * @param {String} type Type of theme
   * @param {String} url URL of stylesheet
   * @return {Void}
   */
  var includeStyles = function(type, url) {
    var stylesheet = document.createElement('link');
    stylesheet.id = type;
    stylesheet.rel = 'stylesheet';
    stylesheet.type = 'text/css';
    stylesheet.href = url;
    if(head.getElementsByTagName('link')[0])
      head.insertBefore(stylesheet, head.getElementsByTagName('link')[0]);
    else
      head.appendChild(stylesheet);
  }

  /**
   * Plugin Object
   * @param {Object} options User options
  ...