您好，请教个问题，vue项目中夜间模式是怎么实现的啊 about gank HOT 3 OPEN

zgh0711 commented on June 19, 2024

您好，请教个问题，vue项目中夜间模式是怎么实现的啊

from gank.

Comments (3)

xandeer commented on June 19, 2024

用 vue-store 的 getter

from gank.

zgh0711 commented on June 19, 2024

能说具体点吗，我是准备写两个样式表，一个day.css，一个night.css，现在不知道怎么能够动态的更换这二个样式表，
比如说，我有个切换按钮，在点击的时候，怎么去切换这二个样式表呢？

from gank.

xandeer commented on June 19, 2024

你打算写两个样式表的话，切换某个顶层元素上的类名即可，

const $ele = document.findElementById('wrap')
const $btn = document.findElementById('toggleMode')

$btn.addEventListener('click', e => {
  const cl = $ele.classList
  if (cl.contains('day')) {
    cl.replace('day', 'night')
  } else {
    cl.replace('night', 'day')
  }
}, false)

我当初是定义了一个对象，然后根据对象里的数据更改某些元素的 style，config/index.js

const modes = {
  day: {
    background: '#f4f4f4',
    backgroundColor: '#f4f4f4',
    color: '#000',
    cellBg: '#fff',
  },
  night: {
    background: '#303030',
    backgroundColor: '#303030',
    color: '#ccc',
    cellBg: '#282c34',
  },
};

exports.modes = modes;