Skip to content

Commit 2679527

Browse files
0xJacky0xJacky
committed
fix(style): dark mode style
1 parent 4e85d72 commit 2679527

File tree

14 files changed

+305
-298
lines changed

14 files changed

+305
-298
lines changed

‎app/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
height: auto !important;
1010
min-height: 100%;
1111
}
12+
body.dark {
13+
background-color: #141414;
14+
color: #fff;
15+
}
1216
#app {
1317
height: 100%;
1418
}

‎app/src/App.vue‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
// This starter template is using Vue 3 <script setup> SFCs
44
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
55
import { computed, provide } from 'vue'
6+
import { theme } from 'ant-design-vue'
7+
import zh_CN from 'ant-design-vue/es/locale/zh_CN'
8+
import zh_TW from 'ant-design-vue/es/locale/zh_TW'
9+
import en_US from 'ant-design-vue/es/locale/en_US'
10+
import gettext from '@/gettext'
611
import { useSettingsStore } from '@/pinia'
712
813
const media = window.matchMedia('(prefers-color-scheme: dark)')
@@ -29,14 +34,72 @@ const devicePrefersTheme = computed(() => {
2934
provide('devicePrefersTheme', devicePrefersTheme)
3035
3136
media.addEventListener('change', callback)
37+
38+
const lang = computed(() => {
39+
switch (gettext.current) {
40+
case 'zh_CN':
41+
return zh_CN
42+
case 'zh_TW':
43+
return zh_TW
44+
default:
45+
return en_US
46+
}
47+
})
48+
49+
const settings = useSettingsStore()
50+
const is_theme_dark = computed(() => settings.theme === 'dark')
3251
</script>
3352

3453
<template>
35-
<RouterView />
54+
<AConfigProvider
55+
:theme="{
56+
algorithm: is_theme_dark ? theme.darkAlgorithm : theme.defaultAlgorithm,
57+
}"
58+
:locale="lang"
59+
:auto-insert-space-in-button="false"
60+
>
61+
<RouterView />
62+
</AConfigProvider>
3663
</template>
3764

3865
<style lang="less">
3966
@import "ant-design-vue/dist/reset.css";
67+
68+
.dark {
69+
h1, h2, h3, h4, h5, h6, p, div {
70+
color: #fafafa;
71+
}
72+
73+
.ant-checkbox-indeterminate {
74+
.ant-checkbox-inner {
75+
background-color: transparent !important;
76+
}
77+
}
78+
79+
.ant-layout-header {
80+
background-color: #141414 !important;
81+
}
82+
83+
.ant-layout-sider {
84+
.ant-menu {
85+
border-right: 0 !important;
86+
}
87+
&.ant-layout-sider-has-trigger {
88+
padding-bottom: 0;
89+
}
90+
}
91+
}
92+
93+
.ant-layout-header {
94+
padding: 0 !important;
95+
background-color: #fff !important;
96+
}
97+
98+
.ant-layout-sider {
99+
.ant-menu {
100+
border-inline-end: none !important;
101+
}
102+
}
40103
</style>
41104

42105
<style lang="less" scoped>

‎app/src/components/PageHeader/PageHeader.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const name = computed(() => {
3939
<style lang="less" scoped>
4040
.dark {
4141
.page-header {
42-
background: #28292c !important;
42+
background: #090909 !important;
4343
border-bottom: unset;
4444
4545
h1 {

‎app/src/components/StdDesign/StdDataEntry/components/StdSelector.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,10 +138,8 @@ const _selectedKey = computed({
138138
font-feature-settings: 'tnum';
139139
height: 32px;
140140
padding: 4px 11px;
141-
color: rgba(0, 0, 0, 0.85);
142141
font-size: 14px;
143142
line-height: 1.5;
144-
background-color: #fff;
145143
background-image: none;
146144
border: 1px solid #d9d9d9;
147145
border-radius: 4px;

‎app/src/layouts/BaseLayout.vue‎

Lines changed: 44 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
<script setup lang="ts">
2-
import zh_CN from 'ant-design-vue/es/locale/zh_CN'
3-
import zh_TW from 'ant-design-vue/es/locale/zh_TW'
4-
import en_US from 'ant-design-vue/es/locale/en_US'
5-
import { computed, ref } from 'vue'
6-
import { theme } from 'ant-design-vue'
72
import _ from 'lodash'
83
import FooterLayout from './FooterLayout.vue'
94
import SideBar from './SideBar.vue'
105
import HeaderLayout from './HeaderLayout.vue'
116
import PageHeader from '@/components/PageHeader/PageHeader.vue'
127
13-
import gettext from '@/gettext'
14-
import { useSettingsStore } from '@/pinia'
15-
168
const drawer_visible = ref(false)
179
const collapsed = ref(collapse())
1810
@@ -27,78 +19,56 @@ function getClientWidth() {
2719
function collapse() {
2820
return getClientWidth() < 1280
2921
}
30-
31-
const lang = computed(() => {
32-
switch (gettext.current) {
33-
case 'zh_CN':
34-
return zh_CN
35-
case 'zh_TW':
36-
return zh_TW
37-
default:
38-
return en_US
39-
}
40-
})
41-
42-
const settings = useSettingsStore()
43-
const is_theme_dark = computed(() => settings.theme === 'dark')
4422
</script>
4523

4624
<template>
47-
<AConfigProvider
48-
:theme="{
49-
algorithm: is_theme_dark ? theme.darkAlgorithm : theme.defaultAlgorithm,
50-
}"
51-
:locale="lang"
52-
:auto-insert-space-in-button="false"
53-
>
54-
<ALayout style="min-height: 100vh">
55-
<div class="drawer-sidebar">
56-
<ADrawer
57-
v-model:open="drawer_visible"
58-
:closable="false"
59-
placement="left"
60-
width="256"
61-
@close="drawer_visible = false"
62-
>
63-
<SideBar />
64-
</ADrawer>
65-
</div>
66-
67-
<ALayoutSider
68-
v-model:collapsed="collapsed"
69-
collapsible
70-
:style="{ zIndex: 11 }"
71-
theme="light"
72-
class="layout-sider"
25+
<ALayout class="min-h-screen">
26+
<div class="drawer-sidebar">
27+
<ADrawer
28+
v-model:open="drawer_visible"
29+
:closable="false"
30+
placement="left"
31+
width="256"
32+
@close="drawer_visible = false"
7333
>
7434
<SideBar />
75-
</ALayoutSider>
76-
77-
<ALayout>
78-
<ALayoutHeader :style="{ position: 'sticky', top: '0', zIndex: 10, width: '100%' }">
79-
<HeaderLayout @click-un-fold="drawer_visible = true" />
80-
</ALayoutHeader>
81-
82-
<ALayoutContent>
83-
<PageHeader />
84-
<div class="router-view">
85-
<RouterView v-slot="{ Component, route }">
86-
<Transition name="slide-fade">
87-
<component
88-
:is="Component"
89-
:key="route.path"
90-
/>
91-
</Transition>
92-
</RouterView>
93-
</div>
94-
</ALayoutContent>
95-
96-
<ALayoutFooter>
97-
<FooterLayout />
98-
</ALayoutFooter>
99-
</ALayout>
35+
</ADrawer>
36+
</div>
37+
38+
<ALayoutSider
39+
v-model:collapsed="collapsed"
40+
collapsible
41+
:style="{ zIndex: 11 }"
42+
theme="light"
43+
class="layout-sider"
44+
>
45+
<SideBar />
46+
</ALayoutSider>
47+
48+
<ALayout>
49+
<ALayoutHeader :style="{ position: 'sticky', top: '0', zIndex: 10, width: '100%' }">
50+
<HeaderLayout @click-un-fold="drawer_visible = true" />
51+
</ALayoutHeader>
52+
53+
<ALayoutContent>
54+
<PageHeader />
55+
<div class="router-view">
56+
<RouterView v-slot="{ Component, route }">
57+
<Transition name="slide-fade">
58+
<component
59+
:is="Component"
60+
:key="route.path"
61+
/>
62+
</Transition>
63+
</RouterView>
64+
</div>
65+
</ALayoutContent>
66+
67+
<ALayoutFooter>
68+
<FooterLayout />
69+
</ALayoutFooter>
10070
</ALayout>
101-
</AConfigProvider>
71+
</ALayout>
10272
</template>
10373

10474
<style lang="less" scoped>
@@ -154,57 +124,11 @@ body {
154124
overflow: unset !important;
155125
}
156126
157-
.dark {
158-
h1, h2, h3, h4, h5, h6, p {
159-
color: #fafafa !important;
160-
}
161-
162-
.ant-checkbox-indeterminate {
163-
.ant-checkbox-inner {
164-
background-color: transparent !important;
165-
}
166-
}
167-
168-
.ant-menu {
169-
background: unset !important;
170-
}
171-
172-
.ant-layout-header {
173-
background-color: #1f1f1f !important;
174-
}
175-
176-
.ant-card {
177-
background-color: #1f1f1f !important;
178-
}
179-
180-
.ant-layout-sider {
181-
background-color: rgb(20, 20, 20) !important;
182-
183-
.ant-layout-sider-trigger {
184-
background-color: rgb(20, 20, 20) !important;
185-
}
186-
187-
.ant-menu {
188-
border-right: 0 !important;
189-
}
190-
191-
&.ant-layout-sider-has-trigger {
192-
padding-bottom: 0;
193-
}
194-
195-
box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
196-
}
197-
198-
}
199-
200127
.ant-layout-header {
201128
padding: 0 !important;
202-
background-color: #fff !important;
203129
}
204130
205131
.ant-layout-sider {
206-
background-color: #ffffff;
207-
208132
&.ant-layout-sider-has-trigger {
209133
padding-bottom: 0;
210134
}

‎app/src/routes/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ export const routes: Route[] = [
5050
component: () => import('@/views/dashboard/DashBoard.vue'),
5151
name: () => $gettext('Dashboard'),
5252
meta: {
53-
// hiddenHeaderContent: true,
5453
icon: HomeOutlined,
5554
},
5655
},

‎app/src/views/config/InspectConfig.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { useGettext } from 'vue3-gettext'
3-
import { ref } from 'vue'
43
import ngx from '@/api/ngx'
54
import { logLevel } from '@/views/config/constants'
65

‎app/src/views/domain/cert/IssueCert.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@ async function onchange() {
6868
</template>
6969

7070
<style lang="less">
71+
.dark {
72+
.issue-cert-log-container {
73+
background-color: rgba(0, 0, 0, 0.84);
74+
}
75+
}
7176
.issue-cert-log-container {
7277
height: 320px;
7378
overflow: scroll;

0 commit comments

Comments
 (0)