简体中文 | English

Introduction

The element-theme-darkplus is an Element component dark theme base on the latest version v2.15.14.

• Preview
• Look Around

Sample

• Simple Switch
• Progress
• StartViewTransition/Persistence/System Responsive

Install

npm i element-theme-darkplus -S

Import

// Webpack
import 'element-theme-darkplus/lib/index.css';

// CDN
<link rel="stylesheet" href="https://unpkg.com/element-theme-darkplus/lib/index.css">

Import on demand

// Webpack
import 'element-theme-darkplus/lib/input.css';

// CDN
<link rel="stylesheet" href="https://unpkg.com/element-theme-darkplus/lib/input.css">

Switch

If you have a chalk theme, a dark theme, two themes free to switch, then the following is best for you.

import 'element-ui/lib/theme-chalk/index.css';
import 'element-theme-darkplus/lib/index.color.css';

The official chalk theme theme-chalk includes component basic styles and chalk colors, while the dark theme element-theme-darkplus also includes component basic styles and dark colors. Importing both will result in redundant component basic styles. Therefore, we have provided an additional theme pack that only includes dark colors. The import method is very simple, just add a color suffix to the style file with the same name.

import `element-theme-darkplus/lib/index.color.css`;
import `element-theme-darkplus/lib/input.color.css`;

Advanced

The rating component Rate is special, with default values defined for color related props within the Element, and inline styles used in the template, resulting in external theme styles that cannot be overwritten.

| Props | Default | | --- | --- | | void-color | #c6d1de | | disabled-void-color | #eff2f7 | | text-color | #1f2d3d |

The transitive null value reset the corresponding props value for the subject to take effect.

<el-rate :value="3" show-text void-color="" text-color="" />

The progress bar component Progress is similar, only line progress bar are supported, and circle and dashboard shapes are not supported.

| Props | Default | | --- | --- | | define-back-color | #ebeef5 | | text-color | #606266 |

<el-progress :percentage="20" define-back-color="" text-color="" />

Although the two components can pass null values to reset properties to support dark themes, for students who are not concerned about this feature, it is unclear why properties such as text-color="" are passed in, which undoubtedly adds mental burden at the development level.

Um The style cannot solve the fundamental problem of Rate and Progress.

Can you redefine the Rate and Progress components? Without breaking the extensibility and uniqueness of the original component, adopted the method of inheriting the original component and make a middle layer in javascript to help the user initially empty the related colors props.

Import

import ElementUI from 'element-ui'
import Darken from 'element-theme-darkplus/utils/darken'

Vue.use(ElementUI)
Vue.use(Darken(ElementUI))

Import on demand

import { Progress, Rate } from 'element-ui'
import Darken from 'element-theme-darkplus/utils/darken'

Vue.component(Progress.name, Darken(Progress))// or Vue.use(Darken(Progress))
Vue.component(Rate.name, Darken(Rate))

CDN

<script src="https://unpkg.com/element-theme-darkplus/utils/darken.js"></script>

Problem

How to persist themes, update themes responsive to the system?

The theme switch in The preview page has added common dark theme functions, such as browser caching to permanently save the user's frequently used theme status, dynamically switching theme styles according to operating system presets, and media query style transition. You can refer to the component ThemeToggle or Sample.

Persistent loading for the first time in dark mode with white screen?

The reason is that the page has already been loaded, and the instance component only starts adding the dark class name to the DOM root element during the Vue lifecycle. However, before the loading time, it still defaults to the initial style, which will cause the page to white screen.

The solution is very simple. Add a script to the head in the html, which reads cache or operating system theme keywords before loading the page, and considers whether to add a dark class name to the root element of the DOM.

<script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js"></script>

Support custom browser cache word key name.

<script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js" storage-key="custom-theme-appearance"></script>