JSFiddle - React, Tailwind, and code Playground

by Slava Fomin II

HTML

<button class="dc-button dc-button--primary">
  Primary Button
</button>

<button class="dc-button dc-button--secondary">
  Secondary Button
</button>  

<span class="dc-badge dc-badge--success">
  Badge Component
</span>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt consequuntur dolorem cum totam, vitae saepe pariatur quis vel nobis assumenda provident nemo unde sequi aut doloribus, natus incidunt, maiores. Ipsa.</p>





























<div id="night-mode-switch" title="Переключить дневной/ночной режим">

  <svg class="icon" id="moon-icon" aria-hidden="true" focusable="false" data-prefix="far" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"></path></svg>
  
  <svg class="icon" id="solid-moon-icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
  
</div>

CSS

/**
 * ОСНОВНАЯ ПАЛИТРА ЦВЕТОВ ИЗ ДИЗАЙН СИСТЕМЫ
 *
 * Эти цвета — константы, всегда используются как есть
 * и никогда не переопределяются.
 */

:root {
  --dc-color-white: #ffffff;
  --dc-color-afro: #242629;
  --dc-color-green: #53b374;
  --dc-color-dark-green-200: #4a9765;
}


/**
 * ТЕМИЗИРУЕМЫЕ ЦВЕТА
 *
 * Данные цвета задают основную тему оформления по-умолчанию.
 * Каждая переменная является всего лишь указателем на цвет и может
 * быть переопределена. Компоненты, которые хотят поддерживать темизацию
 * должны использовать в качестве цветов данные переменные, там,
 * где это имеет смысл.
 */

:root {
  
  /** Primary */
  --dc-color-primary: var(--dc-color-afro);
  --dc-color-primary-hover: var(--dc-color-green);
  --dc-color-text-over-primary: var(--dc-color-white);
  
  /** Secondary */
  --dc-color-secondary: var(--dc-color-green);
  --dc-color-secondary-hover: var(--dc-color-dark-green-200);
  --dc-color-text-over-secondary: var(--dc-color-white);
  
  /** Text */
  --dc-color-text: var(--dc-color-afro);
}


/** 
 * НОЧНОЙ РЕЖИМ (ТЕМА ОФОРМЛЕНИЯ)
 * 
 * Переопределяем некоторые тематические переменные.
 */

body.night-mode {
  
  /** Primary */
  --dc-color-primary: #55006A;
  --dc-color-primary-hover: #470059;
  
  /** Secondary */
  --dc-color-secondary: #ddd;
  --dc-color-secondary-hover: #aaa;
  --dc-color-text-over-secondary: #333;
  
  /** Text */
  --dc-color-text: #ccc;
  
  background-color: #000;
  
}


/** ТЕКСТ (ТЕМИЗИРУЕТСЯ) */

p {
  color: var(--dc-color-text);
}

/** КНОПКА (ТЕМИЗИРУЕТСЯ) */

.dc-button--primary {
  background-color: var(--dc-color-primary);
  color: var(--dc-color-text-over-primary);  
}

.dc-button--primary:hover {
  background-color: var(--dc-color-primary-hover);
}

.dc-button--secondary {
  background-color: var(--dc-color-secondary);
  color: var(--dc-color-text-over-secondary);  
}

.dc-button--secondary:hover {
  background-color: var(--dc-color-secondary-hover);
}


/**
 * БЕЙДЖ (НЕ ТЕМИЗИРУЕТСЯ)
 * 
 *...

JavaScript

const bodyClasses = document.body.classList;
document
  .getElementById('night-mode-switch')
  .addEventListener('click', () => {
    if (bodyClasses.contains('night-mode')) {
      bodyClasses.remove('night-mode');
    } else {
      bodyClasses.add('night-mode');
    }
  })
;

// bodyClasses.add('night-mode');