Skip to content

Commit 64bde70

Browse files
ArgoZhangArgoZhang
authored
feat(Layout): add default theme support dark mode (#4636)
* refactor: 微调默认样式 * style: 增加内置样式 * feat: 增加 dark 主题样式 * style: Layout 组件支持 dark 模式 * chore: bump version 9.0.0-rc.2.11.10.0 * chore: 更新 pack 配置项
1 parent 6aa8f4d commit 64bde70

File tree

5 files changed

+67
-15
lines changed

5 files changed

+67
-15
lines changed

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.0.0-rc.2.11.6.0</Version>
4+
<Version>9.0.0-rc.2.11.10.0</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

‎src/BootstrapBlazor/Components/Layout/Layout.razor.scss‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
1+
[data-bs-theme='dark'] .layout {
2+
--bb-layout-header-background: #{$bb-layout-header-background-dark};
3+
--bb-layout-header-border-color: #{$bb-layout-header-border-color-dark};
4+
--bb-layout-banner-border-color: #{$bb-layout-banner-border-color-dark};
5+
--bb-layout-sidebar-banner-background: #{$bb-layout-sidebar-banner-background-dark};
6+
--bb-layout-headerbar-background: #{$bb-layout-headerbar-background-dark};
7+
--bb-layout-menu-item-hover-bg: #{$bb-layout-menu-item-hover-bg-dark};
8+
--bb-layout-menu-user-banner-background: #{$bb-layout-menu-user-banner-background-dark};
9+
--bb-layout-menu-user-border-color: #{$bb-layout-menu-user-border-color-dark};
10+
--bb-layout-logo-border-color: #{$bb-layout-logo-border-color-dark};
11+
--bb-layout-logo-bg: #{$bb-layout-logo-bg-dark};
12+
}
13+
114
.layout {
215
--bb-layout-header-height: #{$bb-layout-header-height};
316
--bb-layout-header-background: #{$bb-layout-header-background};
417
--bb-layout-header-color: #{$bb-layout-header-color};
18+
--bb-layout-header-border-color: #{$bb-layout-header-border-color};
519
--bb-layout-headerbar-color: #{$bb-layout-header-color};
620
--bb-layout-headerbar-background: #{$bb-layout-headerbar-background};
721
--bb-layout-headerbar-border-color: #{$bb-layout-headerbar-border-color};
@@ -18,6 +32,9 @@
1832
--bb-layout-title-margin-left: #{$bb-layout-title-margin-left};
1933
--bb-layout-banner-font-size: #{$bb-layout-banner-font-size};
2034
--bb-layout-banner-logo-width: #{$bb-layout-banner-logo-width};
35+
--bb-layout-logo-border-color: #{$bb-layout-logo-border-color};
36+
--bb-layout-logo-bg: #{$bb-layout-logo-bg};
37+
--bb-layout-banner-border-color: #{$bb-layout-banner-border-color};
2138
--bb-layout-menu-user-banner-background: #{$bb-layout-menu-user-banner-background};
2239
--bb-layout-menu-user-border-color: #{$bb-layout-menu-user-border-color};
2340
--bb-layout-menu-item-hover-bg: #{$bb-layout-menu-item-hover-bg};
@@ -55,10 +72,13 @@
5572
background-color: var(--bb-layout-sidebar-banner-background);
5673
height: var(--bb-layout-header-height);
5774
font-size: var(--bb-layout-banner-font-size);
75+
border-bottom: 1px solid var(--bb-layout-banner-border-color);
5876

5977
.layout-logo {
6078
width: var(--bb-layout-banner-logo-width);
6179
border-radius: var(--bs-border-radius);
80+
background-color: var(--bb-layout-logo-bg);
81+
border: 1px solid var(--bb-layout-logo-border-color);
6282

6383
+ .layout-title {
6484
margin-left: var(--bb-layout-title-margin-left);
@@ -74,6 +94,10 @@
7494
overflow-x: hidden;
7595
padding: 0.5rem 0;
7696
height: calc(100vh - var(--bb-layout-header-height));
97+
98+
.menu {
99+
--bb-menu-item-hover-color: var(--bb-layout-header-color);
100+
}
77101
}
78102
}
79103

@@ -114,26 +138,32 @@
114138
display: flex;
115139
align-items: center;
116140
padding: 0 1rem;
117-
z-index: 1035;
118141
position: sticky;
142+
z-index: 1035;
143+
border-bottom: 1px solid var(--bb-layout-header-border-color);
119144

120145
&.is-fixed {
121146
top: 0;
122147
}
123148

124-
.layout-avatar-right {
125-
width: calc(var(--bb-layout-header-height) - 6px);
126-
height: calc(var(--bb-layout-header-height) - 6px);
149+
.logout-avatar {
150+
border-radius: 50%;
127151
}
128152

129153
.dropdown-logout {
130154
--bb-logout-text-color: var(--bb-layout-header-color);
131155
--bb-logout-user-bg: var(--bb-layout-menu-user-banner-background);
132156
--bb-logout-menu-border-color: var(--bb-layout-menu-user-border-color);
157+
158+
.dropdown-user img {
159+
border-radius: 50%;
160+
}
133161
}
134162
}
135163

136164
.layout-menu {
165+
border-right: 1px solid var(--bs-border-color);
166+
137167
.menu {
138168
--bb-menu-item-hover-bg: var(--bb-layout-menu-item-hover-bg);
139169
}
@@ -158,6 +188,7 @@
158188
display: flex;
159189
align-items: center;
160190
padding: 0 1rem;
191+
border-top: 1px solid var(--bs-border-color);
161192

162193
&.is-fixed {
163194
z-index: 1020;
@@ -166,6 +197,10 @@
166197
}
167198
}
168199
}
200+
201+
&:not(.has-footer) {
202+
--bb-layout-footer-height: 0px;
203+
}
169204
}
170205

171206
.has-sidebar {

‎src/BootstrapBlazor/Directory.Build.props‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
<TargetFramework>$(RunTargetFramework)</TargetFramework>
2222
</PropertyGroup>
2323

24-
<PropertyGroup Condition="'$(Configuration)' != 'Debug'">
24+
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
25+
<TargetFramework></TargetFramework>
2526
<TargetFrameworks>net6.0;net7.0;net8.0;net9.0</TargetFrameworks>
2627
</PropertyGroup>
2728

‎src/BootstrapBlazor/wwwroot/scss/bootstrapblazor-dark.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
// Layout
2+
$bb-layout-header-background-dark: var(--bs-body-bg);
3+
$bb-layout-header-border-color-dark: var(--bs-border-color);
4+
$bb-layout-banner-border-color-dark: var(--bs-border-color);
5+
$bb-layout-sidebar-banner-background-dark: var(--bs-body-bg);
6+
$bb-layout-headerbar-background-dark: #606266;
7+
$bb-layout-menu-item-hover-bg-dark: #606266;
8+
$bb-layout-menu-user-banner-background-dark: #2c3034;
9+
$bb-layout-menu-user-border-color-dark: #2c3034;
10+
$bb-layout-logo-border-color-dark: var(--bs-border-color);
11+
$bb-layout-logo-bg-dark: #606266;
12+
113
// Dial-Button
214
$bb-dial-item-hover-bg-dark: #313131;
315

‎src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -321,26 +321,30 @@ $bb-ip-cell-max-width: 30px;
321321

322322
// Layout
323323
$bb-layout-header-height: 50px;
324-
$bb-layout-header-background: #2c67be;
325-
$bb-layout-header-color: rgb(200, 210, 228);;
326-
$bb-layout-headerbar-background: var(--bb-header-bg);
324+
$bb-layout-header-background: #0078d4;
325+
$bb-layout-header-color: #fff;
326+
$bb-layout-header-border-color: #0078d4;
327+
$bb-layout-headerbar-background: #0078d4;
327328
$bb-layout-headerbar-border-color: var(--bs-border-color);
328329
$bb-layout-headerbar-padding: 4px 12px;
329330
$bb-layout-footer-background: var(--bs-body-bg);
330331
$bb-layout-footer-color: var(--bs-body-color);
331332
$bb-layout-footer-height: 40px;
332333
$bb-layout-sidebar-width: 214px;
333334
$bb-layout-sidebar-collapse-width: 70px;
334-
$bb-layout-sidebar-banner-background: #2c67be;
335-
$bb-layout-sidebar-background: #edf6ff;
335+
$bb-layout-sidebar-banner-background: #0078d4;
336+
$bb-layout-sidebar-background: var(--bs-body-bg);
336337
$bb-layout-sidebar-color: var(--bs-body-color);
337-
$bb-layout-title-color: rgb(200, 210, 228);
338+
$bb-layout-title-color: #fff;
338339
$bb-layout-title-margin-left: .5rem;
339340
$bb-layout-banner-font-size: 1.5rem;
340341
$bb-layout-banner-logo-width: 42px;
341-
$bb-layout-menu-user-banner-background: #1b55aa;
342-
$bb-layout-menu-user-border-color: #1b55aa;
343-
$bb-layout-menu-item-hover-bg: #9bc8f5;
342+
$bb-layout-banner-border-color: #0078d4;
343+
$bb-layout-menu-user-banner-background: #0078d4;
344+
$bb-layout-menu-user-border-color: #0069b9;
345+
$bb-layout-menu-item-hover-bg: #409eff;
346+
$bb-layout-logo-border-color: #d5d5d5;
347+
$bb-layout-logo-bg: #0e77e3;
344348

345349
// Light
346350
$bb-light-bg: radial-gradient(circle, #fff, #aaa, #333);

0 commit comments

Comments
 (0)