Scribd
Upload
7 views14 pages

Theme Switcher Animation Design

The document describes a user interface component for a theme switcher, featuring elements like a main button, clouds, stars, and backgrounds that change appearance based on the selected theme (light or dark mode). It includes detailed CSS styles for animations, transitions, and responsive design to enhance user experience. The dark mode styles ensure that the interface remains visually appealing and functional under different lighting conditions.

Uploaded by

cerwlum
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views14 pages

Theme Switcher Animation Design

The document describes a user interface component for a theme switcher, featuring elements like a main button, clouds, stars, and backgrounds that change appearance based on the selected theme (light or dark mode). It includes detailed CSS styles for animations, transitions, and responsive design to enhance user experience. The dark mode styles ensure that the interface remains visually appealing and functional under different lighting conditions.

Uploaded by

cerwlum
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<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);
}

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

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

/* 保持原有的按鈕樣式 */
[Link]-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;
}

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

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

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

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

[Link]-mode .components .daytime-background:nth-child(3) {


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

[Link]-mode .components .daytime-background:nth-child(4) {


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

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


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

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

/* 主要的覆蓋結束 */
</style>
<script>
(() => {
const func = (root, initTheme, changeTheme) => {
const $ = (s) => {
let dom = [Link](s);
return [Link] == 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 = [Link];

[Link]("(prefers-color-scheme:
dark)").addEventListener("change", () => {
toggleThemeBasedOnSystem();
});
const toggleThemeBasedOnSystem = () => {
if ([Link]("(prefers-color-scheme: dark)").matches)
{
if (!isMoved) {
[Link]();
}
} else {
if (isMoved) {
[Link]();
}
}
};
[Link] = () => { // 點擊容器切換主題
if (isMoved) { // 當前為暗黑模式，切換為白天模式
[Link]('dark-mode');
[Link] = "translateX(0)";
[Link] = "rgba(255, 195, 35,1)";

[Link] =
"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].[Link] = "translateX(0)";
daytimeBackground[1].[Link] = "translateX(0)";
daytimeBackground[2].[Link] = "translateX(0)";
[Link] = "translateY(7px)";
[Link] = "translateY(7px)";
[Link] = "rgba(70, 133, 192,1)";

moon[0].[Link] = "0";
moon[1].[Link] = "0";
moon[2].[Link] = "0";

[Link] = "translateY(-80px)";
[Link] = "0";

changeTheme("light");
} else { // 當前為白天模式，切換為暗黑模式
[Link]('dark-mode');
[Link] = "translateX(72px)";
[Link] = "rgba(195, 200,210,1)";

[Link] =
"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].[Link] = "translateX(72px)";
daytimeBackground[1].[Link] = "translateX(55px)";
daytimeBackground[2].[Link] = "translateX(35px)";
[Link] = "translateY(50px)";
[Link] = "translateY(50px)";
[Link] = "rgba(25,30,50,1)";

moon[0].[Link] = "1";
moon[1].[Link] = "1";
moon[2].[Link] = "1";

[Link] = "translateY(-40px)";
[Link] = "1";

changeTheme("dark");
}

isClicked = true;

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

[Link]("mousemove", function () { // 滑鼠移動到按鈕上時


的動畫
if (isClicked) return;

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

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

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

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

}
});

[Link]("mouseout", function () { // 滑鼠離開按鈕時恢復


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

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

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

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

}
});

const getRandomDirection = () => {


const directions = ["1px", "-1px"];
return directions[[Link]([Link]() *
[Link])];
};

const moveElementRandomly = (element) => {


const randomDirectionX = getRandomDirection();
const randomDirectionY = getRandomDirection();
[Link] = `translate(${randomDirectionX}, $
{randomDirectionY})`;
};

const cloudSons = [Link](".cloud-son");


setInterval(() => { // 雲朵隨機移動效果
[Link](moveElementRandomly);
}, 1000);

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


[Link]();
}
};

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

You might also like