runa-theme v1.0.8

theme import

• esm

npm i runa-theme -S;

import { changeTheme } from 'runa-theme';
changeTheme(localStorage.getItem('theme'));

• umd

<script src="http://unpkg.com/runa-theme/lib/index.umd.js"></script>
runaTheme.changeTheme(localStorage.getItem('theme'));

css vars

// 浅色模式配置
export const lightConfig = {
  '--c-brand': '#4194FC', // 主题色
  '--c-bg': '#EEF2F5', // 背景色
  '--c-bg-content': '#ffffff', // 内容背景色
  '--c-bg-sidebar': '#252d39', // 侧边栏背景
  '--c-bg-nav': '#252d39', // 导航栏背景
  '--c-bg-hover': '#d9eafe', // hover背景
  '--c-bg-stripe': '#f5f6f8', // 斑马行背景
  '--c-text-1': '#121933', // 主要文字
  '--c-text-2': '#304265', // 常规文字
  '--c-text-3': '#778299', // 次要文字
  '--c-text-4': '#8b98b2', // 占位文字
  '--c-border-1': '#dee0ea', // 一级边框
};
// 深色模式配置
export const darkConfig = {
  '--c-brand': '#4194FC', // 主题色
  '--c-bg': '#000000', // 背景色
  '--c-bg-content': '#0F1A38', // 内容背景色
  '--c-bg-sidebar': '#05315E', // 侧边栏背景
  '--c-bg-nav': '#0B2548', // 导航栏背景
  '--c-bg-hover': '#152652', // hover背景
  '--c-bg-stripe': '#1D2643', // 斑马行背景
  '--c-text-1': '#ffffff', // 主要文字
  '--c-text-2': '#ffffff', // 常规文字
  '--c-text-3': '#ffffff', // 次要文字
  '--c-text-4': '#ffffff', // 占位文字
  '--c-border-1': '#213B59', // 一级边框
};

navBar use

• dom

<el-switch
    v-model="themeValue"
    active-value="dark"
    inactive-value="light"
    @change="handleChangeTheme">
</el-switch>

• js

import { changeTheme } from 'runa-theme';

export default {
  data() {
    return {
      themeValue: localStorage.getItem('theme') || 'light'
    }
  },
  methods: {
    handleChangeTheme(value) {
      localStorage.setItem('theme', value);
      changeTheme(value);
    }
  }
}

组件使用css主题变量

• 本着最小改动原则，每个项目需新建dark.scss文件(src/styles/dark.scss)，用于写入黑色模式下的样式，完成样式覆盖，并在main.js引入

import '@/styles/dark.scss'

• 在新页面的组件中完成主题适配，需使用css变量， 如

<style lang="scss" scoped>
    div {
        background: var(--c-bg-content);
        color: var(--c-text-1);
    }
</style>