Skip to content

Commit 8449e1d

Browse files
TextlodingTextloding
committed
修改模板样式，增加全局主题
1 parent f828bf6 commit 8449e1d

File tree

4 files changed

+128
-93
lines changed

4 files changed

+128
-93
lines changed

‎resources/views/documents/articles/show.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,7 @@
317317
</style>
318318
</head>
319319
<body>
320+
@include('includes.theme-switch') <!-- 引入主题开关 -->
320321

321322
<div class="sidebar">
322323
<h5>目录</h5>

‎resources/views/documents/index.blade.php‎

Lines changed: 3 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
}
7878
.search-bar {
7979
position: absolute;
80-
right: 20px;
80+
left: 20px;
8181
top: 20px;
8282
width: 250px;
8383
}
@@ -92,73 +92,7 @@
9292
margin-top: 10px;
9393
width: 100%;
9494
}
95-
.toggle-theme {
96-
position: absolute;
97-
left: 20px;
98-
top: 20px;
99-
}
100-
.switch {
101-
position: relative;
102-
display: inline-block;
103-
width: 60px;
104-
height: 34px;
105-
}
106-
.switch input {
107-
opacity: 0;
108-
width: 0;
109-
height: 0;
110-
}
111-
.slider {
112-
position: absolute;
113-
cursor: pointer;
114-
top: 0;
115-
left: 0;
116-
right: 0;
117-
bottom: 0;
118-
background-color: #ccc;
119-
transition: .4s;
120-
border-radius: 34px;
121-
}
122-
.slider:before {
123-
position: absolute;
124-
content: "";
125-
height: 26px;
126-
width: 26px;
127-
left: 4px;
128-
bottom: 4px;
129-
background-color: white;
130-
transition: .4s;
131-
border-radius: 50%;
132-
}
133-
input:checked + .slider {
134-
background-color: #2196F3;
135-
}
136-
input:checked + .slider:before {
137-
transform: translateX(26px);
138-
}
139-
.dark-mode {
140-
background-color: #121212;
141-
color: #e0e0e0;
142-
}
143-
.dark-mode .document-card {
144-
background-color: #1e1e1e;
145-
border-color: #444;
146-
}
147-
.dark-mode .divider {
148-
background-color: #444;
149-
}
150-
.dark-mode .divider-light {
151-
background-color: rgba(255, 255, 255, 0.8);
152-
}
153-
.dark-mode .search-bar input {
154-
background-color: #333;
155-
color: #e0e0e0;
156-
border-color: #555;
157-
}
158-
.dark-mode .search-bar button {
159-
background-color: #333;
160-
border-color: #555;
161-
}
95+
16296
.secret-btn {
16397
position: fixed;
16498
bottom: 20px;
@@ -178,16 +112,11 @@
178112
</style>
179113
</head>
180114
<body>
115+
@include('includes.theme-switch') <!-- 引入主题开关 -->
181116
<div class="container">
182117
<div class="header">
183118
<h1>文档列表</h1>
184119
</div>
185-
<div class="toggle-theme">
186-
<label class="switch">
187-
<input type="checkbox" id="toggle-theme">
188-
<span class="slider"></span>
189-
</label>
190-
</div>
191120
<div class="search-bar">
192121
<form action="{{ route('documents.index') }}" method="GET">
193122
<input type="text" name="search" placeholder="模糊搜索文档名..." value="{{ request('search') }}">
@@ -233,25 +162,6 @@
233162

234163
<script>
235164
document.addEventListener("DOMContentLoaded", function() {
236-
const toggleSwitch = document.getElementById("toggle-theme");
237-
const body = document.body;
238-
239-
// 检查本地存储中的主题设置
240-
if (localStorage.getItem("theme") === "dark") {
241-
body.classList.add("dark-mode");
242-
toggleSwitch.checked = true;
243-
}
244-
245-
toggleSwitch.addEventListener("change", function() {
246-
body.classList.toggle("dark-mode");
247-
248-
// 保存用户的主题设置到本地存储
249-
if (body.classList.contains("dark-mode")) {
250-
localStorage.setItem("theme", "dark");
251-
} else {
252-
localStorage.removeItem("theme");
253-
}
254-
});
255165
256166
// 隐秘按钮的触发键盘组合
257167
document.addEventListener('keydown', function(e) {

‎resources/views/documents/show.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@
131131
</style>
132132
</head>
133133
<body>
134+
@include('includes.theme-switch') <!-- 引入主题开关 -->
134135
<div class="container">
135136
<div class="document-info">
136137
@if($document->cover_image_url)

‎resources/views/includes/theme-switch.blade.php‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<div class="toggle-theme">
2+
<label class="switch">
3+
<input type="checkbox" id="toggle-theme">
4+
<span class="slider"></span>
5+
</label>
6+
</div>
7+
8+
<script>
9+
document.addEventListener("DOMContentLoaded", function() {
10+
const toggleSwitch = document.getElementById("toggle-theme");
11+
const body = document.body;
12+
13+
// 检查本地存储中的主题设置
14+
if (localStorage.getItem("theme") === "dark") {
15+
body.classList.add("dark-mode");
16+
toggleSwitch.checked = true;
17+
}
18+
19+
toggleSwitch.addEventListener("change", function() {
20+
body.classList.toggle("dark-mode");
21+
22+
// 保存用户的主题设置到本地存储
23+
if (body.classList.contains("dark-mode")) {
24+
localStorage.setItem("theme", "dark");
25+
} else {
26+
localStorage.removeItem("theme");
27+
}
28+
});
29+
30+
// 初始状态透明
31+
const themeSwitchDiv = document.querySelector('.toggle-theme');
32+
themeSwitchDiv.style.opacity = 0.5;
33+
themeSwitchDiv.style.transition = 'opacity 0.3s';
34+
35+
// 鼠标悬停时不透明
36+
themeSwitchDiv.addEventListener('mouseenter', function() {
37+
themeSwitchDiv.style.opacity = 1;
38+
});
39+
40+
// 鼠标离开时透明
41+
themeSwitchDiv.addEventListener('mouseleave', function() {
42+
themeSwitchDiv.style.opacity = 0.5;
43+
});
44+
});
45+
</script>
46+
47+
<style>
48+
.toggle-theme {
49+
position: fixed;
50+
right: 20px;
51+
top: 1%;
52+
z-index: 1000;
53+
background: rgba(255, 255, 255, 0.5); /* 半透明背景 */
54+
padding: 10px;
55+
border-radius: 50px;
56+
}
57+
.switch {
58+
position: relative;
59+
display: inline-block;
60+
width: 60px;
61+
height: 34px;
62+
}
63+
.switch input {
64+
opacity: 0;
65+
width: 0;
66+
height: 0;
67+
}
68+
.slider {
69+
position: absolute;
70+
cursor: pointer;
71+
top: 0;
72+
left: 0;
73+
right: 0;
74+
bottom: 0;
75+
background-color: #ccc;
76+
transition: .4s;
77+
border-radius: 34px;
78+
}
79+
.slider:before {
80+
position: absolute;
81+
content: "";
82+
height: 26px;
83+
width: 26px;
84+
left: 4px;
85+
bottom: 4px;
86+
background-color: white;
87+
transition: .4s;
88+
border-radius: 50%;
89+
}
90+
input:checked + .slider {
91+
background-color: #2196F3;
92+
}
93+
input:checked + .slider:before {
94+
transform: translateX(26px);
95+
}
96+
.dark-mode {
97+
background-color: #121212;
98+
color: #e0e0e0;
99+
}
100+
.dark-mode .container {
101+
background-color: #1e1e1e;
102+
color: #e0e0e0;
103+
}
104+
.dark-mode .document-card {
105+
background-color: #1e1e1e;
106+
border-color: #444;
107+
}
108+
.dark-mode .divider {
109+
background-color: #444;
110+
}
111+
.dark-mode .divider-light {
112+
background-color: rgba(255, 255, 255, 0.8);
113+
}
114+
.dark-mode .search-bar input {
115+
background-color: #333;
116+
color: #e0e0e0;
117+
border-color: #555;
118+
}
119+
.dark-mode .search-bar button {
120+
background-color: #333;
121+
border-color: #555;
122+
}
123+
</style>

0 commit comments

Comments
 (0)