Uimini

# Dark mode

Dark mode is a theme where all UI elements are darkened. Recommended when you are in a dark environment as it prevents eye strain.

# Demo

Check demo with dark-mode switcher https://uimini.github.io/example-dark-mode/dist/ (opens new window)

# Usage

For change colors use helper class: isDark with ui-body.

For example:

<!-- Required class `ui-body` -->
<body class="ui-body isDark">
  <div class="ui-switch">
    <input type="checkbox" id="switch-dark-mode" checked />
    <label for="switch-dark-mode">Switch dark-mode</label>
  </div>
</body>

And pure JavaScript for handle switcher:

var theme_toggler = document.querySelector('#switch-dark-mode')

theme_toggler.addEventListener('click', function() {
  document.body.classList.toggle('isDark')
})

Check this demo (opens new window) to show all components with dark-mode or download demo source (opens new window) from github

# Main colors

Main colors for buttons; alerts etc

Primary

#1469b9

Success

#419c13

Warning

#af7b12

Danger

#b21820

# Neutral Color

Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.

Primary

#efefef

Regular

#c6c6c6

Secondary

#7a7979

Placeholder

#5d5d5d

Base Border

#484848

Light Border

#363636

# Scss

Default theme palette from /src/theme/dark-theme.scss.

.ui-body {
  &.isDark {
    /* Main Colors */
    --ui-primary-color: #4081bf;
    --ui-success-color: #419c13;
    --ui-warning-color: #af7b12;
    --ui-mark-color: #ffe58f;
    --ui-danger-color: #b21820;

    /* Helpers */
    --ui-inverse-color: white;
    --ui-reverse-color: black;

    /* Neutral Colors */
    --ui-g-0: #141414;
    --ui-g-10: #1e2844;
    --ui-g-100: #363636;
    --ui-g-200: #484848;
    --ui-g-400: #5d5d5d;
    --ui-g-500: #7a7979;
    --ui-g-900: #c6c6c6;
    --ui-g-950: #efefef;
    --ui-g-999: #fdfdfd;
  }
}

← Typography →