Skip to content

Commit 6334a52

Browse files
BernardXiongBernardXiong
committed
feat: Implement theme variables and apply consistent styling across components
1 parent e953d62 commit 6334a52

File tree

11 files changed

+615
-113
lines changed

11 files changed

+615
-113
lines changed

‎src/vue/create-project/App.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -149,15 +149,17 @@ const createProject = () => {
149149
display: flex;
150150
flex-direction: column;
151151
padding: 0;
152+
background: var(--app-bg);
153+
color: var(--app-fg);
152154
}
153155
154156
.header_box {
155157
display: flex;
156158
align-items: center;
157159
justify-content: space-between;
158160
height: 60px;
159-
background-color: #fff;
160-
border-bottom: 1px solid #e6e6e6;
161+
background-color: var(--app-bg);
162+
border-bottom: 1px solid var(--app-border);
161163
padding: 0 20px;
162164
}
163165
@@ -166,7 +168,7 @@ const createProject = () => {
166168
align-items: center;
167169
column-gap: 12px;
168170
font-size: 18px;
169-
color: #333;
171+
color: var(--app-fg);
170172
height: 100%;
171173
}
172174
@@ -176,7 +178,7 @@ const createProject = () => {
176178
}
177179
178180
.logo_text {
179-
color: #333;
181+
color: var(--app-fg);
180182
padding-top: 15px;
181183
}
182184
@@ -193,6 +195,8 @@ const createProject = () => {
193195
.content_area {
194196
width: 100%;
195197
height: 100%;
198+
background: var(--app-bg);
199+
color: var(--app-fg);
196200
197201
.body-box {
198202
width: 80%;

‎src/vue/create-project/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
3+
import ElementPlus from 'element-plus'
4+
import 'element-plus/dist/index.css'
5+
import '../styles/theme.css'
36

47
const app = createApp(App)
8+
app.use(ElementPlus)
59
app.mount('#app')

‎src/vue/projects/App.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,13 @@ onMounted(() => {
9494
<style scoped>
9595
.container {
9696
padding: 0;
97+
background: var(--app-bg);
98+
color: var(--app-fg);
9799
}
98100
99101
.header_box {
100-
background-color: #fff;
101-
border-bottom: 1px solid #e6e6e6;
102+
background-color: var(--app-bg);
103+
border-bottom: 1px solid var(--app-border);
102104
padding: 0 20px;
103105
}
104106
@@ -107,7 +109,7 @@ onMounted(() => {
107109
align-items: center;
108110
column-gap: 12px;
109111
font-size: 18px;
110-
color: #333;
112+
color: var(--app-fg);
111113
height: 100%;
112114
113115
.logo_img {
@@ -116,7 +118,7 @@ onMounted(() => {
116118
}
117119
118120
.logo_text {
119-
color: #333;
121+
color: var(--app-fg);
120122
padding-top: 15px;
121123
122124
p {
@@ -132,11 +134,13 @@ onMounted(() => {
132134
133135
.content_area {
134136
padding: 20px;
137+
background: var(--app-bg);
138+
color: var(--app-fg);
135139
}
136140
137141
.page_title {
138142
font-size: 16px;
139-
color: #666;
143+
color: var(--app-fg-secondary);
140144
margin-bottom: 10px;
141145
font-weight: 500;
142146
}

‎src/vue/projects/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
3+
import ElementPlus from 'element-plus'
4+
import 'element-plus/dist/index.css'
5+
import '../styles/theme.css'
36

47
const app = createApp(App)
8+
app.use(ElementPlus)
59
app.mount('#app')

‎src/vue/setting/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import App from './App.vue'
33
import router from './router'
44
import ElementPlus from 'element-plus'
55
import 'element-plus/dist/index.css'
6+
import '../styles/theme.css'
67

78
const app = createApp(App)
89
app.use(router)

‎src/vue/setting/view/environment/index.less‎

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
.content {
22
width: 100%;
33
height: 100%;
4+
background-color: var(--app-bg);
5+
color: var(--app-fg);
46

57
.body-box {
68
width: 80%;
@@ -10,8 +12,8 @@
1012
margin-bottom: 20px;
1113

1214
.config-card {
13-
background-color: #f5f7fa;
14-
border: 1px solid #e4e7ed;
15+
background-color: var(--app-panel-bg);
16+
border: 1px solid var(--app-border);
1517
border-radius: 6px;
1618
padding: 20px;
1719

@@ -25,7 +27,7 @@
2527
margin: 0;
2628
font-size: 16px;
2729
font-weight: bold;
28-
color: #333;
30+
color: var(--app-fg);
2931
padding-top: 10px;
3032
}
3133

@@ -47,11 +49,11 @@
4749
label {
4850
width: 80px;
4951
font-weight: 500;
50-
color: #606266;
52+
color: var(--app-fg-secondary);
5153
}
5254

5355
span {
54-
color: #333;
56+
color: var(--app-fg);
5557
flex: 1;
5658
}
5759
}
@@ -60,8 +62,8 @@
6062
}
6163

6264
.env-status-box {
63-
background-color: #f5f7fa;
64-
border: 1px solid #e4e7ed;
65+
background-color: var(--app-panel-bg);
66+
border: 1px solid var(--app-border);
6567
border-radius: 6px;
6668
padding: 20px;
6769
margin-bottom: 20px;
@@ -71,7 +73,7 @@
7173
justify-content: space-between;
7274
align-items: flex-start;
7375
font-size: 14px;
74-
color: #333;
76+
color: var(--app-fg);
7577

7678
.info-content {
7779
flex: 1;
@@ -81,7 +83,7 @@
8183
width: 100%;
8284
margin-bottom: 8px;
8385
font-weight: bold;
84-
color: #333;
86+
color: var(--app-fg);
8587
}
8688

8789
.info-text {
@@ -90,6 +92,7 @@
9092
row-gap: 4px;
9193
list-style: none;
9294
margin-left: 16px;
95+
color: var(--app-fg);
9396
}
9497
}
9598

@@ -113,21 +116,21 @@
113116

114117
.progress-status {
115118
font-weight: bold;
116-
color: #409eff;
119+
color: var(--app-info);
117120
margin-bottom: 8px;
118121
}
119122

120123
.progress-log {
121-
background-color: #f8f9fa;
122-
border: 1px solid #e9ecef;
124+
background-color: var(--app-input-bg);
125+
border: 1px solid var(--app-border);
123126
border-radius: 4px;
124127
padding: 8px;
125128
font-family: monospace;
126129
font-size: 12px;
127130

128131
.log-title {
129132
font-weight: bold;
130-
color: #333;
133+
color: var(--app-fg);
131134
margin-bottom: 8px;
132135
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
133136
}
@@ -146,15 +149,15 @@
146149
.log-content {
147150
max-height: 200px;
148151
overflow-y: auto;
149-
border: 1px solid #ddd;
152+
border: 1px solid var(--app-border);
150153
border-radius: 3px;
151154
padding: 8px;
152-
background-color: #fff;
155+
background-color: var(--app-bg);
153156
}
154157

155158
.log-message {
156159
margin-bottom: 2px;
157-
color: #666;
160+
color: var(--app-fg-secondary);
158161
white-space: pre-wrap;
159162
line-height: 1.4;
160163

@@ -165,7 +168,7 @@
165168
}
166169

167170
:deep(.el-progress__text) {
168-
color: #333;
171+
color: var(--app-fg);
169172
}
170173
}
171174
}
@@ -176,6 +179,7 @@
176179
margin-bottom: 30px;
177180
padding: 24px 24px 0 0;
178181
box-sizing: border-box;
182+
background-color: var(--app-panel-bg);
179183

180184
.row-box {
181185
width: 100%;
@@ -192,8 +196,35 @@
192196
height: 40px;
193197
}
194198

199+
.el-input__wrapper {
200+
background-color: var(--app-input-bg) !important;
201+
border-color: var(--app-input-border) !important;
202+
box-shadow: none !important;
203+
204+
&:hover {
205+
border-color: var(--app-link) !important;
206+
}
207+
}
208+
209+
.el-input__inner {
210+
background-color: transparent !important;
211+
color: var(--app-fg) !important;
212+
}
213+
214+
.el-input.is-disabled .el-input__wrapper {
215+
background-color: var(--app-hover-bg) !important;
216+
cursor: not-allowed;
217+
}
218+
219+
.el-input.is-disabled .el-input__inner {
220+
color: var(--app-fg-disabled) !important;
221+
cursor: not-allowed;
222+
}
223+
195224
:deep(.el-form-item__label) {
196225
justify-content: flex-start;
226+
color: var(--app-fg) !important;
227+
font-weight: 500;
197228
}
198229
}
199230

0 commit comments

Comments
 (0)