Package Exports

color-mode

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color-mode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

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