LiuShen/Friend-Circle-Lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🌛添加亮暗切换按钮，添加暗色背景

Browse Source
This commit is contained in:
柳神
2024-09-28 23:42:29 +08:00
parent 93cbe5af74
commit df1d4a6e70
3 changed files with 57 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/friend_circle_lite.yml vendored
View File

@@ -64,7 +64,7 @@ jobs:
- name: Commit changes - name: Commit changes
run: | run: |
mkdir pages mkdir pages
cp -r main ./static/index.html ./static/readme.md ./static/favicon.ico ./static/bg-light.webp all.json errors.json pages/ cp -r main ./static/index.html ./static/readme.md ./static/favicon.ico ./static/bg-light.webp ./static/bg-dark.webp all.json errors.json pages/
cd pages cd pages
git init git init
git add . git add .

BIN
static/bg-dark.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 KiB

56
static/index.html
View File

@@ -27,6 +27,24 @@
overflow-x: hidden; overflow-x: hidden;
height: fit-content; height: fit-content;
} }
#theme-toggle {
z-index: 1000;
position: fixed;
bottom: 20px;
right: 20px;
width: 90px;
height: 30px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 20px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.container { .container {
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
display: flex; display: flex;
@@ -122,6 +140,35 @@
opacity: 1; opacity: 1;
} }
} }
/* 暗色模式样式 */
[data-theme="dark"] body {
background-image: url('./bg-dark.webp');
color: #ffffff;
}
[data-theme="dark"] .container {
background: rgba(30, 30, 30, 0.8);
}
[data-theme="dark"] p {
color: #cccccc;
}
[data-theme="dark"] .button {
background-color: #333333;
border: 2px solid #007BFF;
color: #007BFF;
}
[data-theme="dark"] .button:hover {
background-color: #007BFF;
color: white;
}
[data-theme="dark"] .scroll-down-icon {
color: #007BFF;
}
</style> </style>
<body> <body>
@@ -137,6 +184,7 @@
<div class="root-container"> <div class="root-container">
<div id="friend-circle-lite-root"></div> <div id="friend-circle-lite-root"></div>
</div> </div>
<button id="theme-toggle">暗色模式</button>
<script> <script>
if (typeof UserConfig === 'undefined') { if (typeof UserConfig === 'undefined') {
var UserConfig = { var UserConfig = {
@@ -156,6 +204,14 @@
event.preventDefault(); event.preventDefault();
targetElement.scrollIntoView({ behavior: 'smooth' }); targetElement.scrollIntoView({ behavior: 'smooth' });
}); });
const button = document.getElementById('theme-toggle');
button.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
button.textContent = newTheme === 'light' ? '暗色模式' : '亮色模式';
});
</script> </script>
<link rel="stylesheet" href="./main/fclite.css"> <link rel="stylesheet" href="./main/fclite.css">
<script src="./main/fclite.js"></script> <script src="./main/fclite.js"></script>