每日一题：通过css变量来控制主题
1、定义不同主题颜色
:root{
--theme-color: blue;
--font-size: 18px;;
}
html[theme="dark"]{
--theme-color: #000;
2、通过切换html自定义属性来控制主题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="theme">
</div>
<button>改变主题</button>
</body>
<script>
document.getElementsByTagName('button')[0].addEventListener('click',changeTheme,false);
function changeTheme(){
console.log('changeTheme')
if(document.documentElement.getAttribute('theme') === 'dark'){
document.documentElement.setAttribute('theme','light');
}else{
document.documentElement.setAttribute('theme','dark');
}
}
</script>
</html>
<style>
:root{
--theme-color: blue;
--font-size: 18px;;
}
html[theme="dark"]{
--theme-color: #000;
--font-size: 13px;
}
.theme{
width: 700px;
height: 700px;
background: var(--theme-color);
}
</style>
长风破浪会有时，直挂云帆济沧海
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
2022-10-10 手动实现一个call bind