ColorMode

🎨 Add color theme systme to your page with ColorMode!

Install

npm install color-mode

OR Add to <script>
Download

Usage

<div class="wrap" colormode="bg:bgPrimary">
  <div class="panel" colormode="bg:bgSecondary">
    <h2 class="title" colormode="fg:labelPrimary">ColorMode</h2>
    <a id="dark" class="button" colormode="secondaryBtn">Dark</a>
    <a id="default" class="button" colormode="primaryBtn">Default</a>
  </div>
</div>

<script>

  // Bind button event
  window.onload = function () {
    document.getElementById('dark').addEventListener('click', function () {
      colorMode.set('dark')
    })

    document.getElementById('default').addEventListener('click', function () {
      colorMode.set('default')
    })
  }

  var option = {
    initialTheme: 'dark', // Init with dark
    fallbackTheme: 'default',
    animation: 200, // Transform effect duration(ms)
    tags: {
      fg: 'color',
      bg: 'background-color',
      primaryBtn: {
        backgroundColor: '@tint',
        color: '@onTint'
      },
      secondaryBtn: {
        backgroundColor: '@bgTertiary',
        color: '@tint'
      }
    },
    themes: {
      default: { // required!
        tint: '#007aff',
        onTint: '#ffffff',
        bgPrimary: '#e5e9f2',
        bgSecondary: '#ffffff',
        bgTertiary: '#eef3fc',
        labelPrimary: '#1d212b',
        labelSecondary: '#45566f'
      },
      dark: {
        tint: '#6db3ff',
        onTint: '#ffffff',
        bgPrimary: '#262b3a',
        bgSecondary: '#484d5d',
        bgTertiary: '#353a4b',
        labelPrimary: '#ffffff',
        labelSecondary: '#cfd3e0'
      },
      // You can add more custom themes
    }
  }

  // Create ColorMode instance
  var colorMode = new ColorMode(option)

</script>

• DEMO
• DEMO with Docs

Document

Import ColorMode

// NPM
import colorMode from 'color-mode'

<!-- HTML Script -->
<script src="color-mode.min.js">

Create ColorMode instance

var colorMode = new ColorMode(option)

ColorMode

ColorMode Class

ColorMode instance must be create once.

| Parameter | Type | Required | |:--|:--:|:--:| | option | object | O |

option

| Property | Type | Required | Default | Description | |:--|:--:|:--:|:--|:--| | initialTheme | string | X | default | Initial theme name | | fallbackTheme | string | X | default | Fallback theme name | | animation | number | X | 0 | Theme transform effect duration | | tags | object | O | none | Theme tags | | themes | object | O | none | Themes |

option.tags

| Key | Value | Type | Required | |:--|:--:|:--:|:--:| | custom tag name | CSS Property or Style object | string | object | O |

• (string) CSS Property: 'color', 'background-color', 'box-shadow', ...
• (object) Style object: { color: 'dodgerblue', backgroundColor: '#e0e0e0', ... }
  • Property name must be CamelCase (background-color > backgroundColor)
  • You can using theme's color with @ (ex: @NAME find 'NAME' color from theme)

/**
 * tags: {
 *   TAG_NAME: 'CSS Property',
 *   TAG_NAME: {
 *      boxShadow: '0 0 0 5px @primary' // Using theme's 'primary' named color
 *   }
 * }
 */

const option = {
  // ...
  tags: {
    myTag: ...,
    fg: 'color', // string (CSS Property)
    bg: 'background-color',
    detail: { // object (Style object)
      backgroundColor: '#2f2f2f',
      color: '@primary' // Find 'primary' color from 'option.themes.*'
    }
  }
}

option.themes

| Key | Value | Type | Required | |:--|:--:|:--:|:--:| | default | CSS Style (color code, etc..) | string | O | | custom theme name | CSS Style (color code, etc..) | string | X |

• default theme required
• Define custom theme name if you want to add theme
  • Each theme has style name(s)

/**
 * themes: {
 *   THEME_NAME: {
 *     STYLE_NAME: 'VALUE'
 *   }
 * }
 */

const option = {
  // ...
  themes: {
    default: { // required!
      tint: '#007aff',
      tint10: '#d8e7f9',
      onTint: '#ffffff',
      bgPrimary: '#e5e9f2',
      bgSecondary: '#ffffff',
      bgTertiary: '#eef3fc',
      panelBorder: '1px solid #007aff'
    },
    dark: {
      tint: '#6db3ff',
      tint10: '#e4ecf9',
      onTint: '#ffffff',
      bgPrimary: '#262b3a',
      bgSecondary: '#484d5d',
      bgTertiary: '#353a4b',
      panelBorder: '1px solid #6db3ff'
    },
    myTheme: { ... }
  }
}

(Property) ColorMode.currentTheme

| Type | Description | |:--:|:--| | string | Current theme name |

if (colorMode.currentTheme === 'default') {
  // If current theme is default..
}

(Method) ColorMode.getThemeList

Return all of theme names list

const colorMode = new ColorMode({
  //...
  themes: {
    default: { /*...*/ },
    dark: { /*...*/ },
    rainbow: { /*...*/ }
  }
})

colorMode.getThemeList() // ['default', 'dark', 'rainbow']

(Method) ColorMode.set

Change theme to target theme

| Parameter | Type | Required | |:--|:--:|:--:| | themeName | string | O |

// Set to 'dark' theme
colorMode.set('dark')

License

MIT Licensed