做php网站教程,wordpress去水印,网站权重查询,宁波行业网站建设目录 1.添加theme样式文件2.引入样式文件3.使用变量设置css样式4.设置主题样式5.切换方法 1.添加theme样式文件 文件内容如下#xff1a;
html[data-themelight]{--text-color: #000000;/* 写需要切换的样式 */
}
html[data-themedark]{--text-color… 目录 1.添加theme样式文件2.引入样式文件3.使用变量设置css样式4.设置主题样式5.切换方法 1.添加theme样式文件 文件内容如下
html[data-themelight]{--text-color: #000000;/* 写需要切换的样式 */
}
html[data-themedark]{--text-color: #ffffff;/* 写需要切换的样式 */
}
2.引入样式文件
在main.js中引入文件
import ./styles/theme.css3.使用变量设置css样式
使用var(自定义的变量名)来设置动态的css样式
.text {color: var(--text-color);}4.设置主题样式
在index.html文件里设置默认样式
5.切换方法
button clickchangeTheme切换/button
const theme ref(dark)
const changeTheme () {document.documentElement.setAttribute(data-theme, theme.value dark ? light : dark)theme.value theme.value dark ? light : dark
}
