如何添加白天与黑夜的按钮样式切换网页主题
<p><!doctype html></p>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGpT VIP版 - 无涯工作室</title>
<link rel="icon" href="img/mask-icon.svg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="static/js/jquery.min.js"></script>
<script src="static/js/wi2023.icu.js"></script>
<style>
body {
background-color: #f7f7f7;
background-image: linear-gradient(to bottom right, #f7f7f7, #e6e6e6);
}
.ui.form .field:last-child {
text-align: center;
}
.centered {
display: flex;
justify-content: center;
}
/* 添加样式 */
.toggle-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.night-mode {
background-color: #333;
color: #fff;
}
.night-mode body {
background-color: #333;
background-image: none;
}
.night-mode .ui.sticky.menu {
background-color: #222;
color: #fff;
}
.night-mode .ui.basic.segment {
background-color: #444;
color: #fff;
}
.night-mode .ui.call-to-action.gray-bg {
background-color: #555;
color: #fff;
}
.night-mode .ui.form .field input,
.night-mode .ui.form .field textarea {
background-color: #555;
color: #fff;
}
.night-mode .ui.primary.button {
background-color: #007bff;
color: #fff;
}
.night-mode .ui.button {
background-color: #555;
color: #fff;
}
</style>
</head>
<body>
<!-- 添加按钮 -->
<div class="toggle-btn" onclick="toggleNightMode()">夜间模式</div>
<header class="ui sticky menu" id="sticky-header">
<div class="ui container">
<a href="vip.html" class="header item">AI会员版 Chat GpT</a>
</div>
</header>
<div class="ui basic segment pt-10">
<div class="ui call-to-action gray-bg ptb-60">
<div class="ui container">
<div id="edit_grents">
<span style="color:red">SVip每天300次问答,开通代理+V:<a href="weixin://">ziyuan2319</a></span>
</div>
<div class="ui form">
<div class="field">
<input id="edit_openaikey" placeholder="sk-这里填写key" autocomplete="off" type="password">
</div>
<div class="field">
<textarea id="chat-gpt-input" placeholder="输入你的问题"></textarea>
</div>
<div class="field centered">
<button id="answer" onclick="callCHATGPT()" class="ui primary button">点击回答</button>
<button onclick="location.reload()" class="ui button">清空内容</button>
<button onclick="copyCode()" class="ui button">复制结果</button>
<button id="saveBtn" class="ui button">保存Key</button>
<button onclick="save()" autocomplete="off" class="ui button">保存内容</button>
<button id="btn_grants" onclick="viewGrants()" autocomplete="off" class="ui button">查看费用</button>
<button class="ui button" onclick="document.getElementById('result').innerHTML='请添加微信****'; document.getElementById('result').style.color='red'" >开通会员</button>
</div>
<div class="field">
<textarea id="chatgpt-response" placeholder="由于是长涂访问,如果遇到卡顿不回答,点击“清空内容”按钮即可"></textarea>
</div>
</div>
</div>
<footer class="ui basic segment gray-bg text-center ptb-20">
<div class="ui container">
<div class="ui menu mt-30">
<a class="item">无涯工作室 ChatGpT会员开通</a>
<div class="item" id="result"></div>
</div>
</div>
</footer>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script>
function toggleNightMode() {
// 切换夜间模式
document.body.classList.toggle('night-mode');
// 切换按钮文本
var btn = document.querySelector('.toggle-btn');
if (btn.innerText === '夜间模式') {
btn.innerText = '白天模式';
} else {
btn.innerText = '夜间模式';
}
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ktvD 著作权归作者所有。请勿转载和采集!