<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header">
        <a
          class="link-type link-title"
          target="_blank"
          href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html"
        >
          Theme documentation
        </a>
      </div>
      <div class="box-item">
        <span class="field-label">Change Theme : </span>
        <el-switch v-model="theme" />
        <aside style="margin-top:15px;">
          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
        </aside>
      </div>
    </el-card>
  </div>
</template>

<script>
import '@/assets/custom-theme-dark/index.css'; // the theme changed version element-ui css
import { toggleClass } from '@/utils';

export default {
  name: 'Theme',
  data() {
    return {
      theme: false,
      tags: [
        { name: 'Tag One', type: '' },
        { name: 'Tag Two', type: 'info' },
        { name: 'Tag Three', type: 'success' },
        { name: 'Tag Four', type: 'warning' },
        { name: 'Tag Five', type: 'danger' },
      ],
      slideValue: 50,
      radio: 3,
    };
  },
  watch: {
    theme() {
      toggleClass(document.body, 'custom-theme');
    },
  },
};
</script>
