ameol / mini-dynamic-antd-theme Goto Github PK

import { changeAntdTheme } from 'mini-dynamic-antd-theme';

<div className={styles.themeContainer}>
  Change theme：
  <span 
    className={styles.theme_color_pink}
    onClick={
      () => changeAntdTheme('pink')
    }
  />
  <span 
    className={styles.theme_color_green}
    onClick={
      () => changeAntdTheme('green')
    }
  />
</div>

<template>
 <div class="theme-container">
    Change Theme:
    <span @click="changeThemeColor('pink')" class="theme-color-pink" />
    <span @click="changeThemeColor('green')" class="theme-color-green" />
  </div>
</template>

<script>
import { changeAntdTheme } from 'mini-dynamic-antd-theme';

...

export default {
  name: 'App',
  methods: {
    changeThemeColor (color) {
      changeAntdTheme(color)
    }
  }
};

</script>

// When the theme color has changed， we can change the dom that id = 'header_bar' bg color.

document.getElementById('header_bar').style.backgroundColor
  = window.localStorage.getItem('mini-dynamic-antd-theme-color');