<div style="position: relative; height: 100px;">

<div class="container" style="font-size: 1px">

<div class="components" data-value="light"> <!-- 主容器，包含所有切換主題的元素 -->
<div class="main-button"> <!-- 主按鈕，用於觸發主題切換 -->
<div class="moon"></div>
<div class="moon"></div>
<div class="moon"></div>
</div>
<div class="daytime-background"></div>
<div class="daytime-background"></div>
<div class="daytime-background"></div>
<div class="cloud"> <!-- 雲的容器 -->
<div class="cloud-son"></div>
<div class="cloud-son"></div>
<div class="cloud-son"></div>
<div class="cloud-son"></div>
<div class="cloud-son"></div>
<div class="cloud-son"></div>
</div>
<div class="cloud-light"> <!-- 發光的雲的容器 -->
<div class="cloud-son"></div>
<div class="cloud-son"></div>
<div class="cloud-son"></div>
<div class="cloud-son"></div>
<div class="cloud-son"></div>
<div class="cloud-son"></div>
</div>
<div class="stars"> <!-- 星星的容器 -->
<div class="star big">
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
</div>
<div class="star big">
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
</div>
<div class="star medium">
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
</div>
<div class="star medium">
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
</div>
<div class="star small">
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
</div>
<div class="star small">
 <div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
<div class="star-son"></div>
</div>
</div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
transition: 0.7s;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.container {
position: fixed;
bottom: 0px;
right: 0px;
width: 120px;
height: 48px;
display: inline-block;
vertical-align: bottom;
transform: translate3d(0, 0, 0);
z-index: 999;
}
.components {
position: fixed;
width: 120px;
height: 48px;
background-color: rgba(70, 133, 192, 1) !important;
border-radius: 50px;
box-shadow: inset 0 0 3px 1.5px rgba(0, 0, 0, 0.5) !important;
overflow: hidden;
transition: 0.7s;
transition-timing-function: cubic-bezier(0, 0.5, 1, 1);
cursor: pointer;
}
.main-button {
margin: 5px 0 0 5px;
width: 38px;
height: 38px;
background-color: rgba(255, 195, 35, 1) !important;
border-radius: 50%;
box-shadow: 1.8px 1.8px 3px rgba(0, 0, 0, 0.5), inset -1.8px -2.8px
1.8px -1.8px rgba(0, 0, 0, 0.5), inset 2.3px 2.8px 1.2px -1.2px rgba(255, 230, 80,
1) !important;
transition: 1.0s;
transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00);
}
.moon {
position: absolute;
background-color: rgba(150, 160, 180, 1);
box-shadow: inset 0em 0em 0.6em 0.6em rgba(0, 0, 0, 0.3);
border-radius: 50%;
transition: 0.5s;
opacity: 0;
}
.moon:nth-child(1) {
 top: 5px;
left: 16px;
width: 8px;
height: 8px;
}
.moon:nth-child(2) {
top: 14px;
left: 5px;
width: 13px;
height: 13px;
}
.moon:nth-child(3) {
top: 23px;
left: 23px;
width: 8px;
height: 8px;
}
.daytime-background {
position: absolute;
border-radius: 50%;
transition: 1.0s;
transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00);
}
.daytime-background:nth-child(2) {
top: -15px;
left: -15px;
width: 70px;
height: 70px;
background-color: rgba(255, 255, 255, 0.2);
z-index: -2;
}
.daytime-background:nth-child(3) {
top: -22px;
left: -12px;
width: 90px;
height: 90px;
background-color: rgba(255, 255, 255, 0.1);
z-index: -3;
}
.daytime-background:nth-child(4) {
top: -30px;
left: -10px;
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.05);
z-index: -4;
}
.cloud,
.cloud-light {
transform: translateY(7px);
transition: 1.0s;
transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00);
}
.cloud-son {
position: absolute;
background-color: #fff;
border-radius: 50%;
z-index: -1;
transition: transform 6s, right 1s, bottom 1s;
}
.cloud-son:nth-child(6n + 1) {
right: -14px;
bottom: 7px;
width: 32px;
height: 32px;
}
.cloud-son:nth-child(6n + 2) {
right: -7px;
bottom: -18px;
width: 38px;
height: 38px;
}
.cloud-son:nth-child(6n + 3) {
right: 14px;
bottom: -26px;
width: 38px;
height: 38px;
}
.cloud-son:nth-child(6n + 4) {
right: 32px;
bottom: -24px;
width: 38px;
height: 38px;
}
.cloud-son:nth-child(6n + 5) {
right: 46px;
bottom: -40px;
width: 45px;
height: 45px;
}
.cloud-son:nth-child(6n + 6) {
right: 68px;
bottom: -32px;
width: 38px;
height: 38px;
}
.cloud {
z-index: -2;
}
.cloud-light {
position: absolute;
right: 0px;
bottom: 16px;
opacity: 0.5;
z-index: -3;
}
.stars {
transform: translateY(-80px);
z-index: -2;
transition: 1.0s;
transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00);
}
.big {
--size: 4.6px;
}
.medium {
--size: 3.2px;
}
.small {
--size: 2px;
}
.star {
position: absolute;
width: calc(2*var(--size));
height: calc(2*var(--size));
}
.star:nth-child(1) {
top: 7px;
left: 24px;
animation-name: star;
animation-duration: 3.5s;
}
.star:nth-child(2) {
top: 24px;
left: 58px;
animation-name: star;
animation-duration: 4.1s;
}
.star:nth-child(3) {
top: 16px;
left: 12px;
animation-name: star;
animation-duration: 4.9s;
}
.star:nth-child(4) {
top: 23px;
left: 40px;
animation-name: star;
animation-duration: 5.3s;
}
.star:nth-child(5) {
top: 12px;
left: 46px;
animation-name: star;
animation-duration: 3s;
}
.star:nth-child(6) {
top: 31px;
left: 23px;
animation-name: star;
animation-duration: 2.2s;
}
@keyframes star {
0%,
20% {
transform: scale(0);
}
20%,
100% {
transform: scale(1);
}
}
.star-son {
float: left;
}
.star-son:nth-child(1) {
--pos: left 0;
 }
.star-son:nth-child(2) {
--pos: right 0;
}
.star-son:nth-child(3) {
--pos: 0 bottom;
}
.star-son:nth-child(4) {
--pos: right bottom;
}
.star-son {
width: var(--size);
height: var(--size);
background-image: radial-gradient(circle var(--size) at var(--pos),
transparent var(--size), #fff);
}
.star {
transform: scale(1);
transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00);
transition: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.twinkle {
transform: scale(0);
}

/* 主要的覆蓋開始 */
body.dark-mode .components {
background-color: rgba(25, 30, 50, 1) !important; /* 暗黑模式背景 */
}

/* 排除按鈕相關元素不受 dark-mode 影響 */
body.dark-mode .components .main-button,
body.dark-mode .components .moon,
body.dark-mode .components .daytime-background,
body.dark-mode .components .cloud,
body.dark-mode .components .cloud-light,
body.dark-mode .components .stars,
body.dark-mode .components .star,
body.dark-mode .components .cloud-son,
body.dark-mode .components .star-son {
background-color: inherit !important;
color: inherit !important;
}

/* 保持原有的按鈕樣式 */
body.dark-mode .components .main-button {
background-color: rgba(195, 200, 210, 1) !important;
box-shadow: 1.8px 1.8px 3px rgba(0, 0, 0, 0.5),
inset -1.8px -2.8px 1.8px -1.8px rgba(0, 0, 0, 0.5),
inset 2.3px 2.8px 1.2px -1.2px rgba(255, 255, 210, 1) !
important;
}

/* 保持月亮的顏色 */
body.dark-mode .components .moon {
background-color: rgba(150, 160, 180, 1) !important;
 }

/* 保持雲朵的顏色 */
body.dark-mode .components .cloud-son,
body.dark-mode .components .cloud-light .cloud-son {
background-color: #fff !important;
}

/* 保持星星的顏色 */
body.dark-mode .components .star-son {
background-image: radial-gradient(circle var(--size) at var(--pos),
transparent var(--size), #fff) !important;
}

/* 保持日間背景的透明效果 */
body.dark-mode .components .daytime-background:nth-child(2) {
background-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .components .daytime-background:nth-child(3) {

background-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .components .daytime-background:nth-child(4) {

background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 其他 dark mode 樣式保持不變 */

body.dark-mode {
background-color: #222 !important;
color: #eee !important;
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
color: #eee !important;
}
body.dark-mode a {
color: #aaa !important;
}
body.dark-mode a:hover {
color: #fff !important;
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
background-color: #333 !important;
color: #eee !important;
border: 1px solid #555 !important;
}
body.dark-mode button,
body.dark-mode .wp-block-button__link,
body.dark-mode .wp-block-search .wp-block-search__button {
background-color: #444 !important;
color: #eee !important;
border: 1px solid #555 !important;
 }
body.dark-mode .wp-block-search .wp-block-search__input{
background-color: #333 !important;
color: #eee !important;
border: 1px solid #555 !important;
}
body.dark-mode .wp-block-quote {
border-left: 3px solid #555 !important;
color: #ddd !important;
}
body.dark-mode table {
border: 1px solid #555 !important;
color: #ddd !important;
}
body.dark-mode th,
body.dark-mode td{
border: 1px solid #555 !important;
}
body.dark-mode hr {
border-color: #ddd !important;
background-color: #ddd !important;
}
body.dark-mode .widget {
background-color: #2a2a2a !important;
color: #ddd !important;
}
body.dark-mode .widget a{
color: #aaa !important;
}
body.dark-mode .widget a:hover{
color: #fff !important;
}
body.dark-mode .widget_nav_menu ul li a{
color: #aaa !important;
}
body.dark-mode .widget_nav_menu ul li a:hover{
color: #fff !important;
}
body.dark-mode .wp-site-blocks > * {
background-color: #222 !important;
}
body.dark-mode .wp-block-cover__inner-container {
background-color: rgba(0, 0, 0, 0.7) !important;
}
body.dark-mode .wp-block-group {
background-color: #222 !important;
}
body.dark-mode .wp-block-column {
background-color: #222 !important;
}
body.dark-mode .wp-block-media-text {
background-color: #222 !important;
}
body.dark-mode .wp-block-button a{
background-color: #444 !important;
color: #eee !important;
border: 1px solid #555 !important;
}
body.dark-mode .wp-block-buttons{
 background-color: #222 !important;
}
/* 自訂 HTML 的字體顏色不要變化 */
body.dark-mode .custom-html,
body.dark-mode .custom-html * {
color: inherit !important;
}
body.dark-mode * {
color: #eee !important;
}

/* 新增部分 */
body.dark-mode #wpadminbar,
body.dark-mode #wpadminbar * {
background-color: #222 !important;
color: #eee !important;
}
body.dark-mode .wp-block-navigation *,
body.dark-mode .wp-block-navigation {
background-color: #222 !important;
}
body.dark-mode .wp-block-buttons .wp-block-button a,
body.dark-mode .wp-block-buttons .wp-block-button__link {
background-color: #444 !important;
color: #eee !important;
border: 1px solid #555 !important;
}
/* 加強覆蓋 */
body.dark-mode div,
body.dark-mode section,
body.dark-mode article,
body.dark-mode header,
body.dark-mode footer,
body.dark-mode main,
body.dark-mode aside {
background-color: #222 !important;
}
body.dark-mode #wpcontent {
background-color: #222 !important;
}
body.dark-mode .wp-block-separator{
border-color: #ddd !important;
background-color: #ddd !important;
}

/* 主要的覆蓋結束 */
</style>
<script>
(() => {
const func = (root, initTheme, changeTheme) => {
const $ = (s) => {
let dom = root.querySelectorAll(s);
return dom.length == 1 ? dom[0] : dom;
};
let mainButton = $(".main-button");
let daytimeBackground = $(".daytime-background");
let cloud = $(".cloud");
let cloudList = $(".cloud-son");
let cloudLight = $(".cloud-light");
 let components = $(".components");
let moon = $(".moon");
let stars = $(".stars");
let star = $(".star");
let isMoved = false; // 追蹤是否切換主題
let isClicked = false; // 避免快速連續點擊
let body = document.body;

window.matchMedia("(prefers-color-scheme:
dark)").addEventListener("change", () => {
toggleThemeBasedOnSystem();
});
const toggleThemeBasedOnSystem = () => {
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
{
if (!isMoved) {
components.onclick();
}
} else {
if (isMoved) {
components.onclick();
}
}
};
components.onclick = () => { // 點擊容器切換主題
if (isMoved) { // 當前為暗黑模式，切換為白天模式
body.classList.remove('dark-mode');
mainButton.style.transform = "translateX(0)";
mainButton.style.backgroundColor = "rgba(255, 195, 35,1)";

mainButton.style.boxShadow =
"1.8px 1.8px 3px rgba(0, 0, 0, 0.5), inset -1.8px -
2.8px 1.8px -1.8px rgba(0, 0, 0, 0.5), inset 2.3px 2.8px 1.2px -1.2px rgba(255,
230, 80, 1)";

daytimeBackground[0].style.transform = "translateX(0)";
daytimeBackground[1].style.transform = "translateX(0)";
daytimeBackground[2].style.transform = "translateX(0)";
cloud.style.transform = "translateY(7px)";
cloudLight.style.transform = "translateY(7px)";
components.style.backgroundColor = "rgba(70, 133, 192,1)";

moon[0].style.opacity = "0";
moon[1].style.opacity = "0";
moon[2].style.opacity = "0";

stars.style.transform = "translateY(-80px)";
stars.style.opacity = "0";

changeTheme("light");
} else { // 當前為白天模式，切換為暗黑模式
body.classList.add('dark-mode');
mainButton.style.transform = "translateX(72px)";
mainButton.style.backgroundColor = "rgba(195, 200,210,1)";

mainButton.style.boxShadow =
"1.8px 1.8px 3px rgba(0, 0, 0, 0.5), inset -1.8px -
2.8px 1.8px -1.8px rgba(0, 0, 0, 0.5), inset 2.3px 2.8px 1.2px -1.2px rgba(255,
255, 210, 1)";

daytimeBackground[0].style.transform = "translateX(72px)";
daytimeBackground[1].style.transform = "translateX(55px)";
daytimeBackground[2].style.transform = "translateX(35px)";
cloud.style.transform = "translateY(50px)";
cloudLight.style.transform = "translateY(50px)";
components.style.backgroundColor = "rgba(25,30,50,1)";

moon[0].style.opacity = "1";
moon[1].style.opacity = "1";
moon[2].style.opacity = "1";

stars.style.transform = "translateY(-40px)";
stars.style.opacity = "1";

changeTheme("dark");
}

isClicked = true;

setTimeout(function () {
isClicked = false;
}, 500);
isMoved = !isMoved;
};

mainButton.addEventListener("mousemove", function () { // 滑鼠移動到按鈕上時

的動畫
if (isClicked) return;

if (isMoved) {
mainButton.style.transform = "translateX(67px)";
daytimeBackground[0].style.transform = "translateX(67px)";
daytimeBackground[1].style.transform = "translateX(50px)";
daytimeBackground[2].style.transform = "translateX(30px)";

star[0].style.top = "7px";
star[0].style.left = "24px";
star[1].style.top = "24px";
star[1].style.left = "58px";
star[2].style.top = "16px";
star[2].style.left = "12px";
star[3].style.top = "23px";
star[3].style.left = "40px";
star[4].style.top = "12px";
star[4].style.left = "46px";
star[5].style.top = "31px";
star[5].style.left = "23px";

} else {
mainButton.style.transform = "translateX(5px)";
daytimeBackground[0].style.transform = "translateX(5px)";
daytimeBackground[1].style.transform = "translateX(3px)";
daytimeBackground[2].style.transform = "translateX(2px)";
 cloudList[0].style.right = "-15px";
cloudList[0].style.bottom = "7px";
cloudList[1].style.right = "-8px";
cloudList[1].style.bottom = "-19px";
cloudList[2].style.right = "13px";
cloudList[2].style.bottom = "-27px";
cloudList[3].style.right = "30px";
cloudList[3].style.bottom = "-25px";
cloudList[4].style.right = "44px";
cloudList[4].style.bottom = "-42px";
cloudList[5].style.right = "66px";
cloudList[5].style.bottom = "-34px";

cloudList[6].style.right = "-15px";
cloudList[6].style.bottom = "7px";
cloudList[7].style.right = "-8px";
cloudList[7].style.bottom = "-19px";
cloudList[8].style.right = "13px";
cloudList[8].style.bottom = "-27px";
cloudList[9].style.right = "30px";
cloudList[9].style.bottom = "-25px";
cloudList[10].style.right = "44px";
cloudList[10].style.bottom = "-42px";
cloudList[11].style.right = "66px";
cloudList[11].style.bottom = "-34px";

}
});

mainButton.addEventListener("mouseout", function () { // 滑鼠離開按鈕時恢復

原位
if (isClicked) {
return;
}
if (isMoved) {
mainButton.style.transform = "translateX(72px)";
daytimeBackground[0].style.transform = "translateX(72px)";
daytimeBackground[1].style.transform = "translateX(55px)";
daytimeBackground[2].style.transform = "translateX(35px)";

star[0].style.top = "7px";
star[0].style.left = "24px";
star[1].style.top = "24px";
star[1].style.left = "58px";
star[2].style.top = "16px";
star[2].style.left = "12px";
star[3].style.top = "23px";
star[3].style.left = "40px";
star[4].style.top = "12px";
star[4].style.left = "46px";
star[5].style.top = "31px";
star[5].style.left = "23px";

} else {
mainButton.style.transform = "translateX(0px)";
daytimeBackground[0].style.transform = "translateX(0px)";
daytimeBackground[1].style.transform = "translateX(0px)";
 daytimeBackground[2].style.transform = "translateX(0px)";

cloudList[0].style.right = "-14px";
cloudList[0].style.bottom = "7px";
cloudList[1].style.right = "-7px";
cloudList[1].style.bottom = "-18px";
cloudList[2].style.right = "14px";
cloudList[2].style.bottom = "-26px";
cloudList[3].style.right = "32px";
cloudList[3].style.bottom = "-24px";
cloudList[4].style.right = "46px";
cloudList[4].style.bottom = "-40px";
cloudList[5].style.right = "68px";
cloudList[5].style.bottom = "-32px";
cloudList[6].style.right = "-14px";
cloudList[6].style.bottom = "7px";
cloudList[7].style.right = "-7px";
cloudList[7].style.bottom = "-18px";
cloudList[8].style.right = "14px";
cloudList[8].style.bottom = "-26px";
cloudList[9].style.right = "32px";
cloudList[9].style.bottom = "-24px";
cloudList[10].style.right = "46px";
cloudList[10].style.bottom = "-40px";
cloudList[11].style.right = "68px";
cloudList[11].style.bottom = "-32px";

}
});

const getRandomDirection = () => {

const directions = ["1px", "-1px"];
return directions[Math.floor(Math.random() *
directions.length)];
};

const moveElementRandomly = (element) => {

const randomDirectionX = getRandomDirection();
const randomDirectionY = getRandomDirection();
element.style.transform = `translate(${randomDirectionX}, $
{randomDirectionY})`;
};

const cloudSons = root.querySelectorAll(".cloud-son");

setInterval(() => { // 雲朵隨機移動效果
cloudSons.forEach(moveElementRandomly);
}, 1000);

if (initTheme === "dark") { // 初始化主題

components.onclick();
}
};

const initTheme =
document.querySelector('.components').getAttribute('data-value') || 'light';
const changeTheme = (detail) => {
// 你可以在这里添加你想在主题更改时执行的代码
// 默认什么都不做
console.log("Theme changed to:", detail)
 }
const root = document.querySelector('.container')
func(root, initTheme, changeTheme);
})();
</script>
</div>