diff --git a/.gitignore b/.gitignore index ec62ff64b2c..d5a4d14f46f 100644 --- a/.gitignore +++ b/.gitignore @@ -376,4 +376,4 @@ src/**/wwwroot/**/uploader # sass **/BootstrapBlazor/wwwroot/scss/theme/*.css **/BootstrapBlazor/wwwroot/scss/theme/*.css.map -**/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css +**/BootstrapBlazor/wwwroot/css/*.css diff --git a/src/BootstrapBlazor.Server/Components/App.razor b/src/BootstrapBlazor.Server/Components/App.razor index 7c9163efc6c..dbf0f809584 100644 --- a/src/BootstrapBlazor.Server/Components/App.razor +++ b/src/BootstrapBlazor.Server/Components/App.razor @@ -2,7 +2,7 @@ @inject IStringLocalizer Localizer - + @@ -22,9 +22,9 @@ - @Localizer["Title"] + diff --git a/src/BootstrapBlazor.Server/Components/Components/BBLogo.razor.css b/src/BootstrapBlazor.Server/Components/Components/BBLogo.razor.css index 13147bf8b21..5789ca6dbbc 100644 --- a/src/BootstrapBlazor.Server/Components/Components/BBLogo.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/BBLogo.razor.css @@ -2,7 +2,7 @@ width: 42px; height: auto; border-radius: var(--bs-border-radius); - background-color: var(--bs-info); + background-color: var(--bb-primary-color); border: solid 1px #fff; margin-right: 1rem; } diff --git a/src/BootstrapBlazor.Server/Components/Components/CultureChooser.razor.css b/src/BootstrapBlazor.Server/Components/Components/CultureChooser.razor.css index 764961680bd..13f9488daf8 100644 --- a/src/BootstrapBlazor.Server/Components/Components/CultureChooser.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/CultureChooser.razor.css @@ -1,18 +1,30 @@ .culture-selector { + --bs-border-color: rgba(255,255,255,.2); + --bb-border-hover-color: rgba(255,255,255,.8); + --bb-select-color: rgba(255,255,255,.85); display: flex; align-items: center; + color: var(--bb-select-color); } .culture-selector span { margin: 0; color: var(--bs-navbar-color); - opacity: 0.85; } .culture-selector ::deep .select { width: 210px; } - .culture-selector ::deep .dropdown-menu { - --bs-dropdown-link-active-bg: #7532f9; - } +::deep .form-control { + transition: border-color .3s linear; +} + +::deep .dropdown-toggle { + --bs-body-bg: transparent; +} + + +::deep .form-select { + color: var(--bb-select-color); +} diff --git a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css index 5f941279571..293f98bdd1c 100644 --- a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css @@ -19,6 +19,9 @@ opacity: 1; } +[data-bs-theme='dark'] .card:hover { + box-shadow: none; +} .card-footer { background-color: transparent; @@ -81,7 +84,7 @@ .demo-block > ::deep .anchor-link { font-weight: var(--bb-font-weight); - color: var(--bb-title-color); + color: var(--bs-body-color); font-size: var(--bb-sub-font-size); margin-top: 1rem; margin-bottom: .5rem; diff --git a/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor b/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor index 871e7a705fe..11a3d2b7fc7 100644 --- a/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor +++ b/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor @@ -1,3 +1,3 @@ 
- +
diff --git a/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor.css b/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor.css new file mode 100644 index 00000000000..24d6768c082 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor.css @@ -0,0 +1,26 @@ + +::deep .auto-complete { + --bb-complete-border-color: rgba(255,255,255,.2); + --bs-border-width: 0; + --bb-complete-color: rgba(255,255,255,.85); + border: 1px solid var(--bb-complete-border-color); + border-radius: var(--bs-border-radius); + transition: border-color .3s linear; +} + +::deep .form-control { + background-color: transparent; + color: var(--bb-complete-color); +} + + ::deep .form-control::placeholder { + color: rgba(255,255,255,.4); + } + +::deep .auto-complete:hover { + --bb-complete-border-color: rgba(255,255,255,.8); +} + +::deep .btn { + color: var(--bb-complete-color); +} diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor b/src/BootstrapBlazor.Server/Components/Components/Header.razor index 85cd2a8961c..c9f588bf699 100644 --- a/src/BootstrapBlazor.Server/Components/Components/Header.razor +++ b/src/BootstrapBlazor.Server/Components/Components/Header.razor @@ -40,5 +40,10 @@ @DownloadText +
v8.0.6-beta01
+
+ + +
diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor.css b/src/BootstrapBlazor.Server/Components/Components/Header.razor.css index f5db2941450..81d7d602c87 100644 --- a/src/BootstrapBlazor.Server/Components/Components/Header.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/Header.razor.css @@ -1,7 +1,7 @@ header { --bb-violet-rgb: 112.520718,44.062154,249.437846; background-color: transparent; - background-image: linear-gradient(to bottom, rgba(var(--bb-violet-rgb), 1), rgba(var(--bb-violet-rgb), 0.95)); + background-image: linear-gradient(to right, rgba(var(--bb-violet-rgb), 1), rgba(var(--bb-violet-rgb), 0.9)); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1); font-size: 1rem; transition: transform .3s ease; @@ -14,24 +14,6 @@ margin-right: 0; } -::deep .btn-search .btn { - --bs-btn-bg: #8759ff; - --bs-btn-color: #fff; - --bs-btn-hover-bg: #7d53eb; - --bs-btn-hover-color: var(--bs-btn-color); - --bs-btn-hover-border-color: var(--bs-btn-hover-bg); - --bs-btn-active-bg: var(--bs-btn-hover-bg); - --bs-btn-active-color: var(--bs-btn-hover-color); - --bs-btn-active-border-color: var(--bs-btn-hover-border-color); -} - -::deep .btn-search .form-control { - --bs-border-color: #fff; - --bb-border-focus-color: var(--bs-border-color); - --bb-border-hover-color: var(--bs-border-color); - z-index: 6; -} - ::deep .btn-fs { margin-top: 2px; } @@ -54,6 +36,31 @@ width: auto; } +.navbar-version { + color: var(--bs-navbar-color); +} + +.icon-theme { + border-left: 1px solid #dddddd40; + padding-left: 0.5rem; +} + + .icon-theme img { + cursor: pointer; + } + + .icon-theme .icon-dark { + display: none; + } + +[data-bs-theme='dark'] .icon-dark { + display: block; +} + +[data-bs-theme='dark'] .icon-light { + display: none; +} + @media (min-width: 768px) { .navbar-header { position: sticky; diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor.js b/src/BootstrapBlazor.Server/Components/Components/Header.razor.js index 27316e53125..b4dee27521c 100644 --- a/src/BootstrapBlazor.Server/Components/Components/Header.razor.js +++ b/src/BootstrapBlazor.Server/Components/Components/Header.razor.js @@ -1,4 +1,5 @@ -import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js?v=$version" +import { getPreferredTheme, setTheme } from "../../_content/BootstrapBlazor/modules/theme.js?v=$version" +import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js?v=$version" export function init() { const scrollTop = () => (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop @@ -13,6 +14,20 @@ export function init() { } prevScrollTop = currentScrollTop }) + + const themeElement = document.querySelector('.icon-theme'); + if (themeElement) { + EventHandler.on(themeElement, 'click', e => { + let theme = getPreferredTheme(); + if (theme === 'dark') { + theme = 'light'; + } + else { + theme = 'dark'; + } + setTheme(theme); + }); + } } export function dispose() { diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css index 6eea0ccf4ca..010520a28a2 100644 --- a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css @@ -13,17 +13,6 @@ display: none; } -::deep .btn-primary { - position: absolute; - top: .65rem; - right: 1.5rem; - font-size: 65%; - --bs-btn-color: var(--bs-primary); - --bs-btn-bg: #fff; - --bs-btn-padding-y: .25rem; - --bs-btn-padding-x: .5rem; -} - ::deep .btn-group { position: absolute; top: 0; diff --git a/src/BootstrapBlazor.Server/Components/Components/State.razor b/src/BootstrapBlazor.Server/Components/Components/State.razor index fb4154a2f4f..167e23440b2 100644 --- a/src/BootstrapBlazor.Server/Components/Components/State.razor +++ b/src/BootstrapBlazor.Server/Components/Components/State.razor @@ -12,7 +12,7 @@ } @if (Count > 0) { - + @Count } diff --git a/src/BootstrapBlazor.Server/Components/Components/Tips.razor b/src/BootstrapBlazor.Server/Components/Components/Tips.razor index f6996b6c171..c8801e43483 100644 --- a/src/BootstrapBlazor.Server/Components/Components/Tips.razor +++ b/src/BootstrapBlazor.Server/Components/Components/Tips.razor @@ -7,7 +7,6 @@ @code { - /// /// 获得/设置 图标 /// diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css index 6087c1fbe80..a6c2becedf1 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css +++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css @@ -47,3 +47,7 @@ margin-bottom: 0; max-height: 260px; } + +main { + min-height: calc(100vh - var(--bs-header-height)); +} diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css index def7eb42ee3..6cce0b234f6 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css +++ b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css @@ -22,18 +22,9 @@ margin-bottom: 0; } -::deep p code, -::deep li code { - display: inline-block; - padding: 0px 8px; - background-color: #e9ecef; - margin: 0; - border-radius: var(--bs-border-radius); -} - ::deep .code-label { font-weight: bold; - color: #333; + color: var(--bs-body-color); margin-bottom: 8px; } @@ -84,8 +75,7 @@ height: calc(100vh); position: sticky; top: 0; - border-right: solid 1px #c0c4cc; - background-color: #f0f0f0; + border-right: solid 1px var(--bs-border-color); margin-top: calc(var(--bs-header-height)*-1); } diff --git a/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.css b/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.css index 62a474e1549..98ddac6a569 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.css +++ b/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.css @@ -1,6 +1,6 @@ .sidebar-switch { display: flex; - border-bottom: solid 1px #c0c4cc; + border-bottom: solid 1px var(--bs-border-color); justify-content: center; align-items: center; } @@ -31,7 +31,7 @@ top: 0; right: 0; bottom: 0; - background-color: rgb(208, 215, 222); + background-color: var(--bs-border-color); } .sidebar-bar .sidebar-body { @@ -50,6 +50,14 @@ background-color: rgb(9, 105, 218); } +::deep .badge-menu { + background-color: var(--bb-primary-color); +} + +::deep .icon-summary { + color: var(--bb-primary-color); +} + @media (min-width: 768px) { .sidebar-content { height: calc(100vh - var(--bs-header-height)); diff --git a/src/BootstrapBlazor.Server/Components/Layout/PracticeLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/PracticeLayout.razor.css index 3c76b664662..2086d11a6e3 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/PracticeLayout.razor.css +++ b/src/BootstrapBlazor.Server/Components/Layout/PracticeLayout.razor.css @@ -10,7 +10,7 @@ height: 50px; align-items: center; padding: 1rem; - border-bottom: solid 1px #c0c4cc; + border-bottom: solid 1px var(--bs-border-color); display: none; } @@ -57,9 +57,8 @@ height: calc(100vh); position: sticky; top: 0; - border-right: solid 1px #c0c4cc; - background-color: #f0f0f0; - margin-top: calc(var(--bs-header-height)*-1); + border-right: solid 1px var(--bs-border-color); + margin-top: calc(var(--bs-header-height) * -1); } .main { diff --git a/src/BootstrapBlazor.Server/Components/Pages/Coms.razor.css b/src/BootstrapBlazor.Server/Components/Pages/Coms.razor.css index 1a82ec02ad3..9a0a5afba57 100644 --- a/src/BootstrapBlazor.Server/Components/Pages/Coms.razor.css +++ b/src/BootstrapBlazor.Server/Components/Pages/Coms.razor.css @@ -6,7 +6,7 @@ .coms-search .row { padding: 1rem 0; - background: #fff; + background: var(--bs-body-bg); } .coms-search-filter { @@ -15,6 +15,10 @@ background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.8),rgba(255,255,255,0)); } +[data-bs-theme='dark'] .coms-search-filter { + background: linear-gradient(rgba(33,37,41,1),rgba(33,37,41,0.8),rgba(33,37,41,0)); +} + @media (min-width: 768px) { .coms-search { top: 3rem; diff --git a/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css b/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css index 69e1b5c18d5..4cc1d3127a5 100644 --- a/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css +++ b/src/BootstrapBlazor.Server/Components/Pages/Index.razor.css @@ -9,7 +9,7 @@ display: flex; flex-direction: column; border-radius: var(--bs-border-radius); - border: 1px solid #dce3e8; + border: 1px solid var(--bs-border-color); padding: 1rem; } @@ -22,7 +22,7 @@ position: absolute; margin-top: 1rem; color: #607D8B; - border-top: solid 1px #dce3e8; + border-top: solid 1px var(--bs-border-color); height: 120px; bottom: 0; left: 0; @@ -48,12 +48,12 @@ } .welcome-body .typed { - color: #0073dc; + color: var(--bb-primary-color); font-weight: 500; } .welcome-body .typed-cursor { - color: #0073dc; + color: var(--bb-primary-color); } .welcome-body .typed-cursor { @@ -71,7 +71,7 @@ } .welcome-body-en .typed { - color: #0073dc; + color: var(--bb-primary-color); font-weight: 500; } @@ -104,14 +104,14 @@ .intro p { font-size: 15px; - color: #1a1a1a; + color: var(--bs-body-color); letter-spacing: .41px; text-align: left; line-height: 24px; } .intro h3 { - color: #1a1a1a; + color: var(--bs-body-color); letter-spacing: .1px; text-align: left; line-height: 25px; @@ -125,7 +125,7 @@ margin-bottom: 2rem; padding-top: 2rem; text-align: center; - border-top: solid 1px #ddd; + border-top: solid 1px var(--bs-border-color); position: relative; } @@ -145,7 +145,7 @@ @media (min-width: 576px) { .intro .card { - border-color: #dce3e8; + border-color: var(--bs-border-color); height: 263px; width: 100%; padding: 1rem; diff --git a/src/BootstrapBlazor.Server/Components/Pages/Install.razor.css b/src/BootstrapBlazor.Server/Components/Pages/Install.razor.css index c303e38416d..1f28f0983bc 100644 --- a/src/BootstrapBlazor.Server/Components/Pages/Install.razor.css +++ b/src/BootstrapBlazor.Server/Components/Pages/Install.razor.css @@ -11,7 +11,7 @@ } .git a { - border: solid 1px #ddd; + border: var(--bs-border-width) solid var(--bs-border-color); display: block; padding: 6px 10px; border-radius: var(--bs-border-radius); @@ -26,3 +26,7 @@ color: #1c3949; margin-left: 38px; } + +[data-bs-theme='dark'] .git .git-fork span { + color: var(--bs-body-color); +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css index 3697ba47c7f..c7cf621b455 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css +++ b/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css @@ -1,9 +1,9 @@ .step-demo ::deep .step { + --step-item-color: #ccc; background-color: #f8f9fa; padding: 0 1rem; border-radius: var(--bs-border-radius); - border: 1px solid #ddd; - --step-item-color: #ccc; + border: var(--bs-border-width) solid var(--bs-border-color); } .step-demo .fa-chevron-right { diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor index a5b40da0272..9ea808b2532 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor @@ -15,7 +15,7 @@ -
+

@((MarkupString)Localizer["FilterableP"].Value)

  • @((MarkupString)Localizer["FilterableLi1"].Value)
    • @@ -24,7 +24,7 @@
  • @((MarkupString)Localizer["FilterableLi4"].Value)
@((MarkupString)Localizer["FilterableDiv"].Value)
- @((MarkupString)Localizer["FilterableAlert"].Value) + @((MarkupString)Localizer["FilterableAlert"].Value)
- +
@Localizer["Block9Div"]
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.css index 6e6283e782e..b0ad1ea993a 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.css +++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.css @@ -6,3 +6,9 @@ align-items: center; padding: 0 1rem; } + +.dynamic-tab ::deep .layout { + min-height: 180px; + border: var(--bs-border-width) solid var(--bs-border-color); + border-radius: var(--bs-border-radius); +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Topologies.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Topologies.razor.css index 07cbed926a3..3038b2512f2 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Topologies.razor.css +++ b/src/BootstrapBlazor.Server/Components/Samples/Topologies.razor.css @@ -1,7 +1,7 @@ .topology { height: 258px; width: 100%; - border: 1px solid #ddd; + border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden; } diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs index 246ef3a498d..60111655814 100644 --- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs +++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs @@ -108,7 +108,7 @@ public static List GenerateMenus(this IStringLocalizer Locali item = new DemoMenuItem() { Text = Localizer["Components"], - Icon = "text-info fa-solid fa-fw fa-heart fa-beat", + Icon = "fa-solid fa-fw fa-heart fa-beat icon-summary", Url = "components" }; AddSummary(item); diff --git a/src/BootstrapBlazor.Server/wwwroot/css/motronic.css b/src/BootstrapBlazor.Server/wwwroot/css/motronic.css deleted file mode 100644 index 02cf5751b44..00000000000 --- a/src/BootstrapBlazor.Server/wwwroot/css/motronic.css +++ /dev/null @@ -1,71 +0,0 @@ -@media (min-width: 768px) { - .sidebar { - background-color: #fff !important; - } -} - -.content code.highlight, -.alert-content code, -.content p code, .content li code { - background-color: #fff5f8 !important; -} - -.layout { - --bb-layout-sidebar-banner-background: #702cf8; - --bb-layout-header-background: #702cf8; - --bb-layout-header-color: #fff; - --bb-layout-title-color: #fff; -} - - .layout.is-page .layout-side { - color: #3f4254; - background-color: #fff; - } - - .layout.is-page .layout-user .layout-title { - color: #3f4254; - } - - .layout.is-page .layout-footer { - background-color: #f8f9fa; - } - - .layout .widget { - margin-right: 2rem; - --bb-widget-toggle-color: #fff; - } - - .layout .widget .dropdown-menu { - --bs-dropdown-min-width: 16rem; - } - - .layout .layout-menu { - border-right: 1px solid var(--bs-border-color); - } - -.layout-header img { - border-radius: 50%; -} - -.layout-gotop { - background: #e9ecef; - color: #3f4254; -} - - .layout-gotop:hover { - background-color: #dee2e6; - } - -.tabs-body { - background-color: #fff; -} - -.page-layout-demo-footer-link { - color: #3f4254; -} - -.menu .nav .dropdown-menu .nav-link:not(.disabled):hover, .menu .nav .dropdown-menu .nav-link.active, .menu .submenu .nav-link.active, .menu .submenu .nav-link:not(.disabled):hover, .cascade .dropdown-item:not(.disabled):hover, .cascade .dropdown-item.active, .cascade .nav .nav-link:not(.disabled):hover, .cascade .nav .nav-link.active { - --bb-bg-violet: #7a5cff; - background-color: var(--bb-bg-violet); - color: var(--bs-white); -} diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css index d77b1313213..c667356ed9c 100644 --- a/src/BootstrapBlazor.Server/wwwroot/css/site.css +++ b/src/BootstrapBlazor.Server/wwwroot/css/site.css @@ -1,7 +1,7 @@ :root { --bb-font-weight: 500; - --bb-title-color: #1f2f3d; --bb-sub-font-size: 1.2rem; + --bb-primary-color: var(--bs-indigo); } .navbar { @@ -68,7 +68,7 @@ } .menu .nav-link.nav-table { - color: var(--bs-info); + color: var(--bb-primary-color); font-weight: bold; } @@ -76,6 +76,13 @@ color: unset; } +.menu { + --bb-menu-active-color: var(--bb-primary-color); + --bb-menu-bar-bg: var(--bb-primary-color); + --bb-menu-item-hover-bg: var(--bb-primary-color); + --bb-menu-item-hover-color: #fff; +} + .custom-popover { --bs-popover-border-color: var(--bs-primary); --bs-popover-header-bg: var(--bs-primary); @@ -106,13 +113,17 @@ bottom: 0; left: 0; right: 0; - background-color: #fff; + background-color: var(--bs-body-bg); padding: 1rem; - color: #696969; + color: var(--bs-body-color); +} + +[data-bs-theme='dark'] .connection-body { + background-color: #222939; } .connection-body-tail { - border-right: 1px solid #d8d8d8; + border-right: 1px solid var(--bs-border-color); width: 1px; margin-left: 1rem; } @@ -126,7 +137,7 @@ .connection-box { border-radius: var(--bs-border-radius); - border: 1px solid #ddd; + border: var(--bs-border-width) solid var(--bs-border-color); margin-bottom: 1rem; position: relative; overflow: hidden; @@ -161,6 +172,48 @@ display: none !important; } +.dropdown-menu { + --bs-dropdown-link-active-bg: var(--bb-primary-color); +} + +[data-bs-theme=dark] .hljs { + background-color: var(--bs-body-bg); + color: var(--bs-body-color); +} + +code { + display: inline-block; + padding: 0px 8px; + margin: 0; + border-radius: var(--bs-border-radius); + background-color: #e9ecef; +} + +[data-bs-theme='dark'] code { + background-color: rgba(var(--bs-emphasis-color-rgb),.1); +} + +.btn-copy { + position: absolute; + top: .65rem; + right: 1.5rem; + font-size: 65%; + --bs-btn-color: var(--bs-primary); + --bs-btn-bg: var(--bs-body-bg); + --bs-btn-padding-y: .25rem; + --bs-btn-padding-x: .5rem; +} + +[data-bs-theme='dark'] .btn-copy { + --bs-btn-bg: rgba(255, 255, 255, 0.12); + --bs-btn-color: rgba(255, 255, 255, 0.45); + --bs-btn-border-color: #606266; +} + +[data-bs-theme='dark'] .console-logger { + background-color: rgba(var(--bs-emphasis-color-rgb),.1); +} + @media (min-width: 768px) { :root { --bs-header-height: 50px; diff --git a/src/BootstrapBlazor.Server/wwwroot/images/theme-light.svg b/src/BootstrapBlazor.Server/wwwroot/images/theme-light.svg new file mode 100644 index 00000000000..a0c43e66117 --- /dev/null +++ b/src/BootstrapBlazor.Server/wwwroot/images/theme-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/BootstrapBlazor.Server/wwwroot/images/theme-night.svg b/src/BootstrapBlazor.Server/wwwroot/images/theme-night.svg new file mode 100644 index 00000000000..9bd7811300c --- /dev/null +++ b/src/BootstrapBlazor.Server/wwwroot/images/theme-night.svg @@ -0,0 +1 @@ + diff --git a/src/BootstrapBlazor.Server/wwwroot/lib/theme.js b/src/BootstrapBlazor.Server/wwwroot/lib/theme.js new file mode 100644 index 00000000000..9c1fd8a8aff --- /dev/null +++ b/src/BootstrapBlazor.Server/wwwroot/lib/theme.js @@ -0,0 +1,3 @@ +import { getPreferredTheme, setTheme } from "../../_content/BootstrapBlazor/modules/theme.js?v=$version" + +setTheme(getPreferredTheme()) diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 41a73d6428e..289a4b5f1fd 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -50,12 +50,14 @@ + + diff --git a/src/BootstrapBlazor/Components/Console/ConsoleLogger.razor.scss b/src/BootstrapBlazor/Components/Console/ConsoleLogger.razor.scss index 6003a81328b..b07e538eeb1 100644 --- a/src/BootstrapBlazor/Components/Console/ConsoleLogger.razor.scss +++ b/src/BootstrapBlazor/Components/Console/ConsoleLogger.razor.scss @@ -1,6 +1,6 @@ .console-logger { overflow: hidden auto; - border: solid 1px #ddd; + border: solid 1px var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 0.5rem 1rem; background-color: #174482; diff --git a/src/BootstrapBlazor/Components/Divider/Divider.razor.scss b/src/BootstrapBlazor/Components/Divider/Divider.razor.scss index 3dab7fcd854..4b65972b689 100644 --- a/src/BootstrapBlazor/Components/Divider/Divider.razor.scss +++ b/src/BootstrapBlazor/Components/Divider/Divider.razor.scss @@ -1,7 +1,5 @@ .divider { - --bb-divider-bg: #{$bb-divider-bg}; --bb-divider-margin: #{$bb-divider-margin}; - --bb-divider-text-color: #{$bb-divider-text-color}; --bb-divider-text-padding: #{$bb-divider-text-padding}; background-color: var(--bs-body-bg); margin: var(--bb-divider-margin); @@ -11,14 +9,14 @@ width: 100%; .divider-mask { - background-color: var(--bb-divider-bg); + background-color: var(--bs-border-color); height: 100%; width: 100%; } .divider-text { padding: var(--bb-divider-text-padding); - color: var(--bb-divider-text-color); + color: var(--bs-body-color); position: absolute; font-weight: 500; background-color: inherit; diff --git a/src/BootstrapBlazor/Components/Menu/Menu.razor.scss b/src/BootstrapBlazor/Components/Menu/Menu.razor.scss index ca3e9066c2c..ab91af3a2f5 100644 --- a/src/BootstrapBlazor/Components/Menu/Menu.razor.scss +++ b/src/BootstrapBlazor/Components/Menu/Menu.razor.scss @@ -5,6 +5,7 @@ --bb-menu-active-color: #{$bb-menu-active-color}; --bb-menu-bar-bg: #{$bb-menu-bar-bg}; --bb-menu-item-hover-bg: #{$bb-menu-item-hover-bg}; + --bb-menu-item-hover-color: #{$bb-menu-item-hover-color}; --bb-menu-sub-bg: #{$bb-menu-sub-bg}; --bb-disabled-bg: #{$bb-disabled-bg}; } @@ -64,7 +65,7 @@ .cascade .nav .nav-link:not(.disabled):hover, .cascade .nav .nav-link.active { background-color: var(--bb-menu-item-hover-bg); - color: var(--bs-body-color); + color: var(--bb-menu-item-hover-color); } .menu .nav .sub-menu, diff --git a/src/BootstrapBlazor/Components/Pagination/Pagination.razor.scss b/src/BootstrapBlazor/Components/Pagination/Pagination.razor.scss index bf0171165a8..5a9751ee5fc 100644 --- a/src/BootstrapBlazor/Components/Pagination/Pagination.razor.scss +++ b/src/BootstrapBlazor/Components/Pagination/Pagination.razor.scss @@ -48,6 +48,10 @@ } } +[data-bs-theme='dark'] .pagination { + --bs-pagination-active-border-color: var(--bs-border-color); +} + @media (min-width: 375px) { .pagination { --bb-pagination-link-padding: #{$bb-pagination-link-padding}; diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.cs b/src/BootstrapBlazor/Components/Select/Select.razor.cs index 8db8d7d51b7..ab76781ce09 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor.cs +++ b/src/BootstrapBlazor/Components/Select/Select.razor.cs @@ -132,7 +132,7 @@ public partial class Select : ISelect public RenderFragment? DisplayTemplate { get; set; } /// - /// 获得/设置 是否开启虚拟滚动 默认 false 未开启 注意：开启虚拟滚动后不支持 参数设置 + /// 获得/设置 是否开启虚拟滚动 默认 false 未开启 注意：开启虚拟滚动后不支持 参数设置，设置初始值时请设置 /// [Parameter] public bool IsVirtualize { get; set; } diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.scss b/src/BootstrapBlazor/Components/Select/Select.razor.scss index 6e864f66223..1b61bc31537 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor.scss +++ b/src/BootstrapBlazor/Components/Select/Select.razor.scss @@ -5,7 +5,6 @@ .select { --bb-select-focus-shadow: #{$bb-select-focus-shadow}; - --bb-select-bg: #{$bb-select-bg}; --bb-select-padding: #{$bb-select-padding}; --bb-select-search-padding: #{$bb-select-search-padding}; --bb-select-search-margin-bottom: #{$bb-select-search-margin-bottom}; @@ -36,8 +35,8 @@ .select .form-select { background-image: none; - background-color: var(--bb-select-bg); - border: 1px solid var(--bs-border-color); + background-color: var(--bs-body-bg); + border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: var(--bb-select-padding); cursor: pointer; @@ -204,7 +203,7 @@ .dropdown-menu .search { padding: var(--bb-select-search-padding); position: relative; - border-bottom: 1px solid var(--bb-select-search-border-color); + border-bottom: var(--bs-border-width) solid var(--bb-select-search-border-color); margin-bottom: var(--bb-select-search-margin-bottom); } diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index 0891fa7087b..8adc489d357 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -1,12 +1,9 @@ .tabs { --bb-tabs-item-padding: #{$bb-tabs-item-padding}; --bb-tabs-item-height: #{$bb-tabs-item-height}; - --bb-tabs-item-active-bg: #{$bb-tabs-item-active-bg}; --bb-tabs-item-active-color: #{$bb-tabs-item-active-color}; --bb-tabs-item-hover-color: #{$bb-tabs-item-hover-color}; --bb-tabs-border-card-top-item-margin-top: #{$bb-tabs-border-card-top-item-margin-top}; - --bb-tabs-border-color: #{$bb-tabs-border-color}; - --bb-tabs-border-card-header-bg-color: #{$bb-tabs-border-card-header-bg-color}; --bb-tabs-bar-width: #{$bb-tabs-bar-width}; --bb-tabs-bar-height: #{$bb-tabs-bar-height}; --bb-tabs-bar-bg: #{$bb-tabs-bar-bg}; @@ -21,20 +18,29 @@ height: 100%; } +.tabs-header { + background-color: var(--bs-body-bg); + border-top-left-radius: var(--bs-border-radius); + border-top-right-radius: var(--bs-border-radius); +} + +.tabs-bottom > .tabs-header { + border-bottom-left-radius: var(--bs-border-radius); + border-bottom-right-radius: var(--bs-border-radius); +} + +.tabs-left > .tabs-header { + border-bottom-left-radius: var(--bs-border-radius); +} + +.tabs-right > .tabs-header { + border-bottom-right-radius: var(--bs-border-radius); +} + .tabs-nav-wrap { position: relative; height: var(--bb-tabs-item-height); - &:after { - content: ""; - height: 2px; - background-color: var(--bb-tabs-border-color); - position: absolute; - left: 0; - right: 0; - bottom: 0; - } - > .dropdown-toggle { &:after { display: none; @@ -82,7 +88,7 @@ height: 100%; justify-content: center; align-items: center; - border: 1px solid var(--bb-tabs-border-color); + border: 1px solid var(--bs-border-color); display: none; &.left { @@ -206,7 +212,7 @@ /*Card*/ .tabs.tabs-card, .tabs.tabs-border-card { - border: 1px solid var(--bb-tabs-border-color); + border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } @@ -218,20 +224,20 @@ .tabs.tabs-card > .tabs-header .tabs-item, .tabs.tabs-border-card > .tabs-header .tabs-item { height: 100%; - border: 1px solid var(--bb-tabs-border-color); + border: 1px solid var(--bs-border-color); border-width: 0 1px 1px 0; } .tabs.tabs-card > .tabs-header .tabs-item.active, .tabs.tabs-border-card > .tabs-header .tabs-item.active { - background-color: var(--bb-tabs-item-active-bg); + background-color: var(--bs-body-bg); border-width: 0 1px 0px 0; } .tabs .tabs-item-fix { height: 100%; flex: 1; - border: 1px solid var(--bb-tabs-border-color); + border: 1px solid var(--bs-border-color); border-width: 0 0 1px 0; } @@ -265,18 +271,10 @@ /*Border-Card*/ .tabs.tabs-border-card { - background: #fff; + background: var(--bs-body-bg); box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04); } -.tabs.tabs-border-card > .tabs-header { - background-color: var(--bb-tabs-border-card-header-bg-color); -} - -.tabs.tabs-border-card > .tabs-header .nav-link-bar { - background-color: var(--bb-tabs-border-card-header-bg-color); -} - .tabs.tabs-border-card > .tabs-header .nav-link-bar.left { border-top-left-radius: var(--bs-border-radius); } diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.scss b/src/BootstrapBlazor/Components/Table/Table.razor.scss index b4ca953bf3f..f2e3b3f3b6f 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.scss +++ b/src/BootstrapBlazor/Components/Table/Table.razor.scss @@ -41,6 +41,7 @@ --bb-border-focus-color: transparent; } +[data-bs-theme='dark'] .table, .table-dark { --bb-table-header-hover-bg: #343a40; --bb-table-header-icon-hover-bg: #6c757d; @@ -357,7 +358,7 @@ display: flex; justify-content: center; align-items: center; - border: 1px solid #ddd; + border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 2rem; flex: 1; diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss index 67a885bd307..0be2cb46590 100644 --- a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss +++ b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss @@ -29,7 +29,7 @@ form { } &:focus { - border: 1px solid var(--bb-border-focus-color); + border: var(--bs-border-width) solid var(--bb-border-focus-color); box-shadow: none; } @@ -44,7 +44,7 @@ form { } &:not(.disabled):not(:disabled):not(.is-valid):not(.is-invalid):not(.no-border):not(.is-display):hover { - border: 1px solid var(--bb-border-hover-color); + border: var(--bs-border-width) solid var(--bb-border-hover-color); } } @@ -74,7 +74,7 @@ form { display: flex; justify-content: center; align-items: center; - border: 1px solid var(--bs-border-color); + border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 2rem; } diff --git a/src/BootstrapBlazor/wwwroot/css/motronic.min.css b/src/BootstrapBlazor/wwwroot/css/motronic.min.css deleted file mode 100644 index a1536ba7b70..00000000000 --- a/src/BootstrapBlazor/wwwroot/css/motronic.min.css +++ /dev/null @@ -1 +0,0 @@ -:root{--bs-gray:#7e8299;--bs-gray-dark:#3f4254;--bs-gray-100:#f5f8fa;--bs-gray-200:#eff2f5;--bs-gray-300:#e4e6ef;--bs-gray-400:#b5b5c3;--bs-gray-500:#a1a5b7;--bs-gray-600:#7e8299;--bs-gray-700:#5e6278;--bs-gray-800:#3f4254;--bs-gray-900:#181c32;--bs-light:#f5f8fa;--bs-primary:#009ef7;--bs-secondary:#e4e6ef;--bs-success:#50cd89;--bs-info:#7239ea;--bs-warning:#ffc700;--bs-danger:#f1416c;--bs-dark:#181c32;--bs-light-rgb:245,248,250;--bs-primary-rgb:0,158,247;--bs-secondary-rgb:228,230,239;--bs-success-rgb:80,205,137;--bs-info-rgb:114,57,234;--bs-warning-rgb:255,199,0;--bs-danger-rgb:241,65,108;--bs-dark-rgb:24,28,50;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-rgb:24,28,50;--bs-body-color:#181c32;--bs-border-radius:.475rem;--bb-disabled-bg:#f5f8fa;--bs-border-color:var(--bs-secondary);--bb-border-focus-color:#b5b5c3;--bb-border-hover-color:#b5b5c3}.table-container{--bs-table-striped-bg:rgba(245,248,250,.75);--bs-table-hover-bg:#f5f8fa}.table-filter .card-header{border-bottom:1px solid var(--bs-secondary);background-color:var(--bs-secondary)}.table-filter .card-arrow:after{border-bottom-color:var(--bs-secondary)}.picker-panel-footer{border-bottom-left-radius:var(--bs-border-radius);border-bottom-right-radius:var(--bs-border-radius)}.table-filter .card-arrow:before{border-bottom-color:var(--bs-secondary)}.btn-primary{--bs-btn-hover-bg:#0095e8;--bs-btn-bg:var(--bs-primary);--bs-btn-border-color:var(--bs-primary);--bs-btn-disabled-bg:var(--bs-primary);--bs-btn-disabled-border-color:var(--bs-primary);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-secondary{--bs-btn-color:#3f4254;--bs-btn-hover-bg:#b5b5c3;--bs-btn-hover-color:var(--bs-btn-color);--bs-btn-active-color:var(--bs-btn-color);--bs-btn-disabled-color:var(--bs-btn-color);--bs-btn-bg:var(--bs-secondary);--bs-btn-border-color:var(--bs-secondary);--bs-btn-disabled-bg:var(--bs-secondary);--bs-btn-disabled-border-color:var(--bs-secondary);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-success{--bs-btn-hover-bg:#47be7d;--bs-btn-bg:var(--bs-success);--bs-btn-border-color:var(--bs-success);--bs-btn-disabled-bg:var(--bs-success);--bs-btn-disabled-border-color:var(--bs-success);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-info{--bs-btn-color:#fff;--bs-btn-hover-bg:#5014d0;--bs-btn-hover-color:var(--bs-btn-color);--bs-btn-active-color:var(--bs-btn-color);--bs-btn-disabled-color:var(--bs-btn-color);--bs-btn-bg:var(--bs-info);--bs-btn-border-color:var(--bs-info);--bs-btn-disabled-bg:var(--bs-info);--bs-btn-disabled-border-color:var(--bs-info);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-warning{--bs-btn-color:#fff;--bs-btn-hover-bg:#f1bc00;--bs-btn-hover-color:var(--bs-btn-color);--bs-btn-active-color:var(--bs-btn-color);--bs-btn-disabled-color:var(--bs-btn-color);--bs-btn-bg:var(--bs-warning);--bs-btn-border-color:var(--bs-warning);--bs-btn-disabled-bg:var(--bs-warning);--bs-btn-disabled-border-color:var(--bs-warning);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-danger{--bs-btn-hover-bg:#d9214e;--bs-btn-bg:var(--bs-danger);--bs-btn-border-color:var(--bs-danger);--bs-btn-disabled-bg:var(--bs-danger);--bs-btn-disabled-border-color:var(--bs-danger);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-dark{--bs-btn-hover-bg:#131628;--bs-btn-bg:var(--bs-dark);--bs-btn-border-color:var(--bs-dark);--bs-btn-disabled-bg:var(--bs-dark);--bs-btn-disabled-border-color:var(--bs-dark);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-light{--bs-btn-color:#212529;--bs-btn-hover-color:var(--bs-btn-color);--bs-btn-active-color:var(--bs-btn-color);--bs-btn-disabled-color:var(--bs-btn-color);--bs-btn-bg:var(--bs-light);--bs-btn-border-color:var(--bs-light);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-link{text-decoration:none;--bs-btn-color:var(--bs-primary);--bs-btn-hover-color:#0095e8}.btn-outline-primary{--bs-btn-hover-bg:#0095e8;--bs-btn-color:var(--bs-primary);--bs-btn-border-color:var(--bs-primary);--bs-btn-disabled-color:var(--bs-btn-color);--bs-btn-disabled-border-color:var(--bs-btn-color);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-outline-secondary{--bs-btn-hover-bg:#b5b5c3;--bs-btn-color:#b5b5c3;--bs-btn-border-color:var(--bs-secondary);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-disabled-color:var(--bs-btn-border-color);--bs-btn-disabled-border-color:var(--bs-btn-border-color);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-outline-success{--bs-btn-hover-bg:#47be7d;--bs-btn-color:var(--bs-success);--bs-btn-border-color:var(--bs-success);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-disabled-color:var(--bs-btn-border-color);--bs-btn-disabled-border-color:var(--bs-btn-border-color);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-outline-info{--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5014d0;--bs-btn-color:var(--bs-info);--bs-btn-border-color:var(--bs-info);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-disabled-color:var(--bs-btn-border-color);--bs-btn-disabled-border-color:var(--bs-btn-border-color);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-outline-warning{--bs-btn-hover-bg:#f1bc00;--bs-btn-color:var(--bs-warning);--bs-btn-border-color:var(--bs-warning);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-disabled-color:var(--bs-btn-border-color);--bs-btn-disabled-border-color:var(--bs-btn-border-color);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-outline-danger{--bs-btn-hover-bg:#d9214e;--bs-btn-color:var(--bs-danger);--bs-btn-border-color:var(--bs-danger);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-disabled-color:var(--bs-btn-border-color);--bs-btn-disabled-border-color:var(--bs-btn-border-color);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-outline-dark{--bs-btn-hover-bg:#131628;--bs-btn-color:var(--bs-dark);--bs-btn-border-color:var(--bs-dark);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-disabled-color:var(--bs-btn-border-color);--bs-btn-disabled-border-color:var(--bs-btn-border-color);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-outline-link{--bs-btn-hover-bg:#fff;--bs-btn-border-color:#e9ecef;--bs-btn-color:var(--bs-primary);--bs-btn-hover-color:var(--bs-primary);--bs-btn-disabled-color:var(--bs-btn-border-color);--bs-btn-disabled-border-color:var(--bs-btn-border-color);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-active-border-color:var(--bs-btn-hover-bg)}.btn-outline-light{--bs-light:#dcdfe6;--bs-btn-color:var(--bs-light);--bs-btn-border-color:var(--bs-light);--bs-btn-disabled-color:var(--bs-btn-border-color);--bs-btn-disabled-border-color:var(--bs-btn-border-color);--bs-btn-hover-border-color:#b5b5c3;--bs-btn-active-border-color:#b5b5c3}.alert-primary{--bs-alert-color:#005f94;--bs-alert-bg:#ccecfd;--bs-alert-border-color:#b3e2fd}.alert-primary .alert-link{--bs-alert-color:#004c76}.alert-secondary{--bs-alert-color:#5b5c60;--bs-alert-bg:#fafafc;--bs-alert-border-color:#f7f8fa}.alert-secondary .alert-link{--bs-alert-color:#494a4d}.alert-success{--bs-alert-color:#205237;--bs-alert-bg:#dcf5e7;--bs-alert-border-color:#cbf0dc}.alert-success .alert-link{--bs-alert-color:#1a422c}.alert-info{--bs-alert-color:#44228c;--bs-alert-bg:#e3d7fb;--bs-alert-border-color:#d5c4f9}.alert-info .alert-link{--bs-alert-color:#361b70}.alert-warning{--bs-alert-color:#665000;--bs-alert-bg:#fff4cc;--bs-alert-border-color:#ffeeb3}.alert-warning .alert-link{--bs-alert-color:#524000}.alert-danger{--bs-alert-color:#912741;--bs-alert-bg:#fcd9e2;--bs-alert-border-color:#fbc6d3}.alert-danger .alert-link{--bs-alert-color:#741f34}.alert-dark{--bs-alert-color:#0e111e;--bs-alert-bg:#d1d2d6;--bs-alert-border-color:#babbc2}.alert-dark .alert-link{--bs-alert-color:#0b0e18}.alert-bar.alert-info{--bs-alert-bg:#e3d7fb}.alert-bar.alert-success{--bs-alert-bg:#dcf5e7}.alert-bar.alert-primary{--bs-alert-bg:#ccecfd}.alert-bar.alert-warning{--bs-alert-bg:#fff4cc}.alert-bar.alert-danger{--bs-alert-bg:#fcd9e2}.modal-backdrop.show{opacity:.3}.modal-content{box-shadow:0 .25rem .5rem #0000001a}.page-item:first-child .page-link{border-top-left-radius:var(--bs-border-radius);border-bottom-left-radius:var(--bs-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-border-radius);border-bottom-right-radius:var(--bs-border-radius)}.page-item.active .page-link{background-color:var(--bs-primary);border-color:var(--bs-primary)}.page-item:not(.active) .page-link:hover{color:var(--bs-primary)}.table{--bs-table-striped-color:#181c32;--bs-table-striped-bg:rgba(245,248,250,.75);--bs-table-active-color:#181c32;--bs-table-active-bg:#f5f8fa;--bs-table-hover-color:#181c32;--bs-table-hover-bg:#f5f8fa;--bs-table-border-color:#eff2f5}.table>:not(:last-child)>:last-child>*{border-bottom-color:var(--bs-secondary)}.menu .nav-link{color:#3f4254;font-weight:500}.menu .nav .dropdown-menu .nav-link:not(.disabled):hover,.menu .nav .dropdown-menu .nav-link.active,.menu .submenu .nav-link.active,.menu .submenu .nav-link:not(.disabled):hover,.cascade .dropdown-item:not(.disabled):hover,.cascade .dropdown-item.active,.cascade .nav .nav-link:not(.disabled):hover,.cascade .nav .nav-link.active{background-color:transparent;color:var(--bs-primary)}.form-control.is-valid,.was-validated .form-control:valid{border-color:var(--bs-success)}.was-validated .form-control:valid:focus,.form-control.is-valid:focus,.was-validated .custom-select:valid:focus,.custom-select.is-valid:focus{border-color:var(--bs-success);box-shadow:none}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--bs-danger)}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus,.was-validated .custom-select:invalid:focus,.custom-select.is-invalid:focus{border-color:var(--bs-danger);box-shadow:none}.table-filter .filter-item{border-color:var(--bs-secondary)}.dropdown-menu{--bs-dropdown-item-padding-y:6px;--bs-dropdown-item-padding-x:20px}.select{--bb-select-disabled-bg:#f5f7fa}.tree-view{--bb-tree-item-hover-color:var(--bs-primary)}.btn-xs,.btn-group-xs>.btn{--bs-btn-border-radius:.375rem}.accordion{--bs-accordion-active-bg:var(--bs-secondary);--bs-accordion-btn-padding-x:1rem;--bs-accordion-btn-padding-y:.5rem}@media(prefers-reduced-motion:reduce){.btn{transition:none}} \ No newline at end of file diff --git a/src/BootstrapBlazor/wwwroot/modules/theme.js b/src/BootstrapBlazor/wwwroot/modules/theme.js new file mode 100644 index 00000000000..bedfef5580c --- /dev/null +++ b/src/BootstrapBlazor/wwwroot/modules/theme.js @@ -0,0 +1,20 @@ +const getStoredTheme = () => localStorage.getItem('theme') +const setStoredTheme = theme => localStorage.setItem('theme', theme) + +export function getPreferredTheme() { + const storedTheme = getStoredTheme() + if (storedTheme) { + return storedTheme + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' +} + +export function setTheme(theme) { + if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-bs-theme', 'dark') + } else { + document.documentElement.setAttribute('data-bs-theme', theme); + } + setStoredTheme(theme); +} diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss index 15d62bee01f..ae0616351fa 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss @@ -226,9 +226,7 @@ $form-control-padding: 6px 33px; $dt-range-bar-color: #b5b5c3; // Divider -$bb-divider-bg: #dcdfe6; $bb-divider-margin: 1rem 0; -$bb-divider-text-color: #303133; $bb-divider-text-padding: 0 20px; // Drawer @@ -379,6 +377,7 @@ $bb-menu-min-width: 160px; $bb-menu-active-color: #409eff; $bb-menu-bar-bg: #409eff; $bb-menu-item-hover-bg: #409eff; +$bb-menu-item-hover-color: var(--bs-body-color); $bb-menu-sub-bg: var(--bs-body-bg); $bb-disabled-bg: #ddd; @@ -472,7 +471,6 @@ $bb-segmented-text-margin-left: 4px; // Select $bb-dropdown-link-pre-active-bg: #498ff7; $bb-select-focus-shadow: none; -$bb-select-bg: #fff; $bb-select-padding: 6px 2.25rem 6px 0.75rem; $bb-select-search-padding: 7px 10px; $bb-select-search-margin-bottom: .5rem; @@ -547,12 +545,9 @@ $bb-switch-label-margin-left: 10px; // Tab $bb-tabs-item-padding: 0 1rem; $bb-tabs-item-height: 40px; -$bb-tabs-item-active-bg: #fff; $bb-tabs-item-active-color: #409eff; $bb-tabs-item-hover-color: #409eff; $bb-tabs-border-card-top-item-margin-top: -1px; -$bb-tabs-border-color: #e4e7ed; -$bb-tabs-border-card-header-bg-color: #f5f7fa; $bb-tabs-bar-width: 40px; $bb-tabs-bar-height: 40px; $bb-tabs-bar-bg: #409eff; diff --git a/src/BootstrapBlazor/wwwroot/src/css/motronic.css b/src/BootstrapBlazor/wwwroot/src/css/motronic.css index d74337a9465..084c9c92152 100644 --- a/src/BootstrapBlazor/wwwroot/src/css/motronic.css +++ b/src/BootstrapBlazor/wwwroot/src/css/motronic.css @@ -1,4 +1,4 @@ -:root { +:root, [data-bs-theme='light'] { --bs-gray: #7E8299; --bs-gray-dark: #3F4254; --bs-gray-100: #F5F8FA; @@ -35,11 +35,76 @@ --bs-border-color: var(--bs-secondary); --bb-border-focus-color: #b5b5c3; --bb-border-hover-color: #b5b5c3; + --bs-primary-text-emphasis: #005f94; + --bs-secondary-text-emphasis: #5b5c60; + --bs-success-text-emphasis: #205237; + --bs-info-text-emphasis: #44228c; + --bs-warning-text-emphasis: #665000; + --bs-danger-text-emphasis: #912741; + --bs-light-text-emphasis: #495057; + --bs-dark-text-emphasis: #0e111e; + --bs-primary-bg-subtle: #ccecfd; + --bs-secondary-bg-subtle: #fafafc; + --bs-success-bg-subtle: #dcf5e7; + --bs-info-bg-subtle: #e3d7fb; + --bs-warning-bg-subtle: #fff4cc; + --bs-danger-bg-subtle: #fcd9e2; + --bs-light-bg-subtle: #fcfcfd; + --bs-dark-bg-subtle: #d1d2d6; + --bs-primary-border-subtle: #b3e2fd; + --bs-secondary-border-subtle: #f7f8fa; + --bs-success-border-subtle: #cbf0dc; + --bs-info-border-subtle: #7239ea; + --bs-warning-border-subtle: #ffeeb3; + --bs-danger-border-subtle: #fbc6d3; + --bs-light-border-subtle: #e9ecef; + --bs-dark-border-subtle: #babbc2; +} + +[data-bs-theme='dark'] { + --bs-primary-text-emphasis: #6ea8fe; + --bs-secondary-text-emphasis: #a7acb1; + --bs-success-text-emphasis: #75b798; + --bs-info-text-emphasis: #6edff6; + --bs-warning-text-emphasis: #ffda6a; + --bs-danger-text-emphasis: #ea868f; + --bs-light-text-emphasis: #f8f9fa; + --bs-dark-text-emphasis: #dee2e6; + --bs-primary-bg-subtle: #031633; + --bs-secondary-bg-subtle: #161719; + --bs-success-bg-subtle: #051b11; + --bs-info-bg-subtle: #032830; + --bs-warning-bg-subtle: #332701; + --bs-danger-bg-subtle: #2c0b0e; + --bs-light-bg-subtle: #343a40; + --bs-dark-bg-subtle: #1a1d20; + --bs-primary-border-subtle: #084298; + --bs-secondary-border-subtle: #41464b; + --bs-success-border-subtle: #0f5132; + --bs-info-border-subtle: #44228c; + --bs-warning-border-subtle: #997404; + --bs-danger-border-subtle: #842029; + --bs-light-border-subtle: #495057; + --bs-dark-border-subtle: #343a40; + --bs-body-color: #dee2e6; + --bs-body-color-rgb: 222, 226, 230; + --bs-body-bg: #212529; + --bs-body-bg-rgb: 33, 37, 41; + --bs-border-color: #495057; } -.table-container { - --bs-table-striped-bg: rgba(245,248,250,.75); - --bs-table-hover-bg: #f5f8fa; +.table { + --bs-table-striped-bg: rgba(245, 248, 250, 0.75); + --bs-table-hover-bg: #F5F8FA; +} + +[data-bs-theme='dark'] .table { + --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb),.05); + --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075); +} + +.table > :not(:last-child) > :last-child > * { + border-bottom-color: var(--bs-secondary); } .table-filter .card-header { @@ -266,96 +331,6 @@ --bs-btn-active-border-color: #B5B5C3; } -.alert-primary { - --bs-alert-color: #005f94; - --bs-alert-bg: #ccecfd; - --bs-alert-border-color: #b3e2fd; -} - - .alert-primary .alert-link { - --bs-alert-color: #004c76; - } - -.alert-secondary { - --bs-alert-color: #5b5c60; - --bs-alert-bg: #fafafc; - --bs-alert-border-color: #f7f8fa; -} - - .alert-secondary .alert-link { - --bs-alert-color: #494a4d; - } - -.alert-success { - --bs-alert-color: #205237; - --bs-alert-bg: #dcf5e7; - --bs-alert-border-color: #cbf0dc; -} - - .alert-success .alert-link { - --bs-alert-color: #1a422c; - } - -.alert-info { - --bs-alert-color: #44228c; - --bs-alert-bg: #e3d7fb; - --bs-alert-border-color: #d5c4f9; -} - - .alert-info .alert-link { - --bs-alert-color: #361b70; - } - -.alert-warning { - --bs-alert-color: #665000; - --bs-alert-bg: #fff4cc; - --bs-alert-border-color: #ffeeb3; -} - - .alert-warning .alert-link { - --bs-alert-color: #524000; - } - -.alert-danger { - --bs-alert-color: #912741; - --bs-alert-bg: #fcd9e2; - --bs-alert-border-color: #fbc6d3; -} - - .alert-danger .alert-link { - --bs-alert-color: #741f34; - } - -.alert-dark { - --bs-alert-color: #0e111e; - --bs-alert-bg: #d1d2d6; - --bs-alert-border-color: #babbc2; -} - - .alert-dark .alert-link { - --bs-alert-color: #0b0e18; - } - -.alert-bar.alert-info { - --bs-alert-bg: #e3d7fb; -} - -.alert-bar.alert-success { - --bs-alert-bg: #dcf5e7; -} - -.alert-bar.alert-primary { - --bs-alert-bg: #ccecfd; -} - -.alert-bar.alert-warning { - --bs-alert-bg: #fff4cc; -} - -.alert-bar.alert-danger { - --bs-alert-bg: #fcd9e2; -} - .modal-backdrop.show { opacity: .3; } @@ -364,49 +339,6 @@ box-shadow: 0 0.25rem 0.5rem #0000001a; } -.page-item:first-child .page-link { - border-top-left-radius: var(--bs-border-radius); - border-bottom-left-radius: var(--bs-border-radius); -} - -.page-item:last-child .page-link { - border-top-right-radius: var(--bs-border-radius); - border-bottom-right-radius: var(--bs-border-radius); -} - -.page-item.active .page-link { - background-color: var(--bs-primary); - border-color: var(--bs-primary); -} - -.page-item:not(.active) .page-link:hover { - color: var(--bs-primary); -} - -.table { - --bs-table-striped-color: #181C32; - --bs-table-striped-bg: rgba(245, 248, 250, 0.75); - --bs-table-active-color: #181C32; - --bs-table-active-bg: #F5F8FA; - --bs-table-hover-color: #181C32; - --bs-table-hover-bg: #F5F8FA; - --bs-table-border-color: #eff2f5; -} - - .table > :not(:last-child) > :last-child > * { - border-bottom-color: var(--bs-secondary); - } - -.menu .nav-link { - color: #3f4254; - font-weight: 500; -} - -.menu .nav .dropdown-menu .nav-link:not(.disabled):hover, .menu .nav .dropdown-menu .nav-link.active, .menu .submenu .nav-link.active, .menu .submenu .nav-link:not(.disabled):hover, .cascade .dropdown-item:not(.disabled):hover, .cascade .dropdown-item.active, .cascade .nav .nav-link:not(.disabled):hover, .cascade .nav .nav-link.active { - background-color: transparent; - color: var(--bs-primary); -} - .form-control.is-valid, .was-validated .form-control:valid { border-color: var(--bs-success); }