Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zgh0711 opened this issue Apr 23, 2018 · 3 comments
Open

Comments

@zgh0711
Copy link

zgh0711 commented Apr 23, 2018

No description provided.

@xandeer
Copy link
Owner

xandeer commented Apr 27, 2018

vue-storegetter

@zgh0711
Copy link
Author

zgh0711 commented Apr 27, 2018

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

@xandeer
Copy link
Owner

xandeer commented Apr 27, 2018

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

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)

我当初是定义了一个对象,然后根据对象里的数据更改某些元素的 styleconfig/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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants