Keldos commited on
Commit
afdec9a
·
1 Parent(s): 41ff8f3

refractor: 调整亮暗色切换写法,适配gradio本意

Browse files
Files changed (3) hide show
  1. README.md +3 -3
  2. assets/custom.css +25 -27
  3. assets/custom.js +2 -1
README.md CHANGED
@@ -17,9 +17,9 @@
17
  <img alt="GitHub pull requests" src="https://img.shields.io/badge/Telegram-Group-blue.svg?logo=telegram" />
18
  </a>
19
  <p>
20
- 实时回复 / 无限对话 / 保存对话记录 / 预设Prompt集 / 联网搜索 / 根据文件回答 <br />
21
- 渲染LaTeX / 渲染表格 / 代码高亮 / 自动亮暗色切换 / 自适应输入框位置 / “小而美”的体验 <br />
22
- 自定义api-Host / 多API Key均衡负载 / 多用户显示 / 适配GPT-4
23
  </p>
24
  <a href="https://www.bilibili.com/video/BV1mo4y1r7eE"><strong>视频教程</strong></a>
25
  ·
 
17
  <img alt="GitHub pull requests" src="https://img.shields.io/badge/Telegram-Group-blue.svg?logo=telegram" />
18
  </a>
19
  <p>
20
+ 实时回复 / 无限对话 / 保存对话记录 / 预设Prompt集 / 联网搜索 / 根据文件回答 <br />
21
+ 渲染LaTeX / 渲染表格 / 代码高亮 / 自动亮暗色切换 / 自适应输入框位置 / “小而美”的体验 <br />
22
+ 自定义api-Host / 多API Key均衡负载 / 多用户显示 / 适配GPT-4
23
  </p>
24
  <a href="https://www.bilibili.com/video/BV1mo4y1r7eE"><strong>视频教程</strong></a>
25
  ·
assets/custom.css CHANGED
@@ -65,9 +65,12 @@ footer {
65
  color: var(--body-text-color-subdued);
66
  }
67
 
68
- #chuanhu_chatbot, #status_display {
69
  transition: all 0.6s;
70
  }
 
 
 
71
 
72
  /* usage_display */
73
  #usage_display {
@@ -127,36 +130,31 @@ ol:not(.options), ul:not(.options) {
127
  padding-inline-start: 2em !important;
128
  }
129
 
130
- /* 亮色 */
131
- @media (prefers-color-scheme: light) {
132
- #chuanhu_chatbot {
133
- background-color: var(--chatbot-color-light) !important;
134
- color: #000000 !important;
135
- }
136
- [data-testid = "bot"] {
137
- background-color: #FFFFFF !important;
138
- }
139
- [data-testid = "user"] {
140
- background-color: #95EC69 !important;
141
- }
142
  }
143
  /* 暗色 */
144
- @media (prefers-color-scheme: dark) {
145
- #chuanhu_chatbot {
146
- background-color: var(--chatbot-color-dark) !important;
147
- color: #FFFFFF !important;
148
- }
149
- [data-testid = "bot"] {
150
- background-color: #2C2C2C !important;
151
- }
152
- [data-testid = "user"] {
153
- background-color: #26B561 !important;
154
- }
155
- body {
156
- background-color: var(--neutral-950) !important;
157
- }
158
  }
 
 
 
 
159
  /* 屏幕宽度大于等于500px的设备 */
 
160
  @media screen and (min-width: 500px) {
161
  #chuanhu_chatbot {
162
  height: calc(100vh - 200px);
 
65
  color: var(--body-text-color-subdued);
66
  }
67
 
68
+ #status_display {
69
  transition: all 0.6s;
70
  }
71
+ #chuanhu_chatbot {
72
+ transition: height 0.3s ease;
73
+ }
74
 
75
  /* usage_display */
76
  #usage_display {
 
130
  padding-inline-start: 2em !important;
131
  }
132
 
133
+ /* 亮色(默认) */
134
+ #chuanhu_chatbot {
135
+ background-color: var(--chatbot-color-light) !important;
136
+ color: #000000 !important;
137
+ }
138
+ [data-testid = "bot"] {
139
+ background-color: #FFFFFF !important;
140
+ }
141
+ [data-testid = "user"] {
142
+ background-color: #95EC69 !important;
 
 
143
  }
144
  /* 暗色 */
145
+ .dark #chuanhu_chatbot {
146
+ background-color: var(--chatbot-color-dark) !important;
147
+ color: #FFFFFF !important;
148
+ }
149
+ .dark [data-testid = "bot"] {
150
+ background-color: #2C2C2C !important;
 
 
 
 
 
 
 
 
151
  }
152
+ .dark [data-testid = "user"] {
153
+ background-color: #26B561 !important;
154
+ }
155
+
156
  /* 屏幕宽度大于等于500px的设备 */
157
+ /* update on 2023.4.8: 高度的细致调整已写入JavaScript */
158
  @media screen and (min-width: 500px) {
159
  #chuanhu_chatbot {
160
  height: calc(100vh - 200px);
assets/custom.js CHANGED
@@ -161,9 +161,10 @@ function toggleDarkMode(isEnabled) {
161
  gradioContainer = document.querySelector(".gradio-container");
162
  if (isEnabled) {
163
  gradioContainer.classList.add("dark");
164
- document.body.style.backgroundColor = "";
165
  } else {
166
  gradioContainer.classList.remove("dark");
 
167
  }
168
  }
169
  function adjustDarkMode() {
 
161
  gradioContainer = document.querySelector(".gradio-container");
162
  if (isEnabled) {
163
  gradioContainer.classList.add("dark");
164
+ document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
165
  } else {
166
  gradioContainer.classList.remove("dark");
167
+ document.body.style.backgroundColor = "";
168
  }
169
  }
170
  function adjustDarkMode() {