biss/keycloakify-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暗色

Browse Source
This commit is contained in:
biss
2026-08-03 14:31:31 +08:00 Unverified
parent 0986069a06
commit 78743fb436
3 changed files with 176 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/account/theme.css
+53 -8
View File
@@ -1,5 +1,4 @@
:root,
.pf-v5-theme-dark {
:root {
--nexus-account-void: #070b16;
--nexus-account-chrome: #0b1120;
--nexus-account-panel: #ffffff;
@@ -23,6 +22,26 @@
color-scheme: light;
}
.pf-v5-theme-dark {
--nexus-account-panel: #101827;
--nexus-account-canvas: #080d18;
--nexus-account-text: #edf3ff;
--nexus-account-muted: #a6b2c8;
--nexus-account-line: #2d3b52;
--pf-v5-global--primary-color--100: #55d9ef;
--pf-v5-global--primary-color--200: #82e5f5;
--pf-v5-global--link--Color: #67dcef;
--pf-v5-global--link--Color--hover: #a6effa;
--pf-v5-global--BackgroundColor--100: var(--nexus-account-panel);
--pf-v5-global--BackgroundColor--150: #151f30;
--pf-v5-global--BackgroundColor--200: var(--nexus-account-canvas);
--pf-v5-global--Color--100: var(--nexus-account-text);
--pf-v5-global--Color--200: var(--nexus-account-muted);
--pf-v5-global--BorderColor--100: var(--nexus-account-line);
--pf-v5-global--BorderColor--200: #3a4a63;
color-scheme: dark;
}
html,
body,
#root {
@@ -96,7 +115,11 @@ img.keycloak__pageheader_brand {
.pf-v5-c-page__sidebar-body {
border-right: 1px solid rgba(117, 105, 242, 0.16);
color: #d8e2f5;
background: radial-gradient(circle at 18% 88%, rgba(99, 230, 255, 0.08), transparent 14rem),
background: radial-gradient(
circle at 18% 88%,
rgba(99, 230, 255, 0.08),
transparent 14rem
),
var(--nexus-account-chrome);
}
@@ -130,7 +153,11 @@ img.keycloak__pageheader_brand {
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
color: #ffffff;
background: linear-gradient(90deg, rgba(99, 230, 255, 0.15), rgba(117, 105, 242, 0.08));
background: linear-gradient(
90deg,
rgba(99, 230, 255, 0.15),
rgba(117, 105, 242, 0.08)
);
box-shadow: inset 2px 0 var(--nexus-account-ice);
}
@@ -140,7 +167,7 @@ img.keycloak__pageheader_brand {
.pf-v5-c-page__main-section:first-child {
border-bottom: 1px solid rgba(220, 227, 239, 0.8);
background: rgba(255, 255, 255, 0.78);
background: color-mix(in srgb, var(--nexus-account-panel) 78%, transparent);
backdrop-filter: blur(12px);
}
@@ -173,7 +200,11 @@ img.keycloak__pageheader_brand {
width: 0.45rem;
height: 0.45rem;
margin: 0 0.75rem 0.18rem 0;
background: linear-gradient(135deg, var(--nexus-account-ice), var(--nexus-account-violet));
background: linear-gradient(
135deg,
var(--nexus-account-ice),
var(--nexus-account-violet)
);
content: "";
transform: rotate(45deg);
}
@@ -197,11 +228,25 @@ img.keycloak__pageheader_brand {
.pf-v5-c-select__toggle,
.pf-v5-c-menu-toggle {
border-radius: 2px;
border-color: #c9d3e2;
background: #ffffff;
border-color: var(--pf-v5-global--BorderColor--200);
color: var(--nexus-account-text);
background: var(--nexus-account-panel);
box-shadow: none;
}
.pf-v5-theme-dark .pf-v5-c-page__main {
background-image: linear-gradient(rgba(99, 230, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 230, 255, 0.035) 1px, transparent 1px);
}
.pf-v5-theme-dark .pf-v5-c-card,
.pf-v5-theme-dark .pf-v5-c-data-list,
.pf-v5-theme-dark .pf-v5-c-modal-box,
.pf-v5-theme-dark .pf-v5-c-drawer__panel,
.pf-v5-theme-dark .pf-v5-c-menu {
box-shadow: 0 15px 42px rgba(0, 0, 0, 0.28);
}
.pf-v5-c-form-control:focus-within,
.pf-v5-c-menu-toggle:focus {
border-color: #008eaa;
src/admin/index.css
+52 -10
View File
@@ -1,5 +1,4 @@
:root,
.pf-v5-theme-dark {
:root {
--nexus-admin-void: #070b16;
--nexus-admin-chrome: #0b1120;
--nexus-admin-panel: #ffffff;
@@ -24,6 +23,27 @@
color-scheme: light;
}
.pf-v5-theme-dark {
--nexus-admin-panel: #101827;
--nexus-admin-canvas: #080d18;
--nexus-admin-text: #edf3ff;
--nexus-admin-muted: #a6b2c8;
--nexus-admin-line: #2d3b52;
--pf-v5-global--primary-color--100: #55d9ef;
--pf-v5-global--primary-color--200: #82e5f5;
--pf-v5-global--link--Color: #67dcef;
--pf-v5-global--link--Color--hover: #a6effa;
--pf-v5-global--BackgroundColor--100: var(--nexus-admin-panel);
--pf-v5-global--BackgroundColor--150: #151f30;
--pf-v5-global--BackgroundColor--200: var(--nexus-admin-canvas);
--pf-v5-global--Color--100: var(--nexus-admin-text);
--pf-v5-global--Color--200: var(--nexus-admin-muted);
--pf-v5-global--BorderColor--100: var(--nexus-admin-line);
--pf-v5-global--BorderColor--200: #3a4a63;
--pf-v5-c-page__main-section--m-light--BackgroundColor: var(--nexus-admin-canvas);
color-scheme: dark;
}
html,
body,
#root {
@@ -123,7 +143,7 @@ img.keycloak__pageheader_brand {
.pf-v5-c-page__main-breadcrumb {
border-bottom: 1px solid rgba(220, 227, 239, 0.74);
background: rgba(255, 255, 255, 0.72);
background: color-mix(in srgb, var(--nexus-admin-panel) 72%, transparent);
backdrop-filter: blur(12px);
}
@@ -146,8 +166,9 @@ img.keycloak__pageheader_brand {
.pf-v5-c-select__toggle,
.pf-v5-c-menu-toggle {
border-radius: 2px;
border-color: #c9d3e2;
background: #ffffff;
border-color: var(--pf-v5-global--BorderColor--200);
color: var(--nexus-admin-text);
background: var(--nexus-admin-panel);
box-shadow: none;
}
@@ -159,19 +180,27 @@ img.keycloak__pageheader_brand {
.pf-v5-c-table {
border: 1px solid var(--nexus-admin-line);
background: #ffffff;
background: var(--nexus-admin-panel);
}
.pf-v5-c-table thead {
color: #526079;
background: #edf2f8;
color: var(--nexus-admin-muted);
background: color-mix(
in srgb,
var(--nexus-admin-panel) 72%,
var(--nexus-admin-canvas)
);
font-family: "Cascadia Code", Consolas, monospace;
font-size: 0.72rem;
letter-spacing: 0.025em;
}
.pf-v5-c-table tr:hover > * {
background-color: #f5fbfd;
background-color: color-mix(
in srgb,
var(--nexus-admin-ice) 7%,
var(--nexus-admin-panel)
);
}
.pf-v5-c-tabs__link::after {
@@ -202,11 +231,24 @@ input[type="checkbox"] {
margin-left: calc(-1 * var(--pf-v5-global--spacer--lg));
padding: var(--pf-v5-global--spacer--md);
border-top: 1px solid var(--nexus-admin-line);
background: rgba(255, 255, 255, 0.9);
background: color-mix(in srgb, var(--nexus-admin-panel) 90%, transparent);
box-shadow: 0 -10px 30px rgba(27, 43, 72, 0.06);
backdrop-filter: blur(14px);
}
.pf-v5-theme-dark .pf-v5-c-page__main {
background-image: linear-gradient(rgba(99, 230, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 230, 255, 0.035) 1px, transparent 1px);
}
.pf-v5-theme-dark .pf-v5-c-card,
.pf-v5-theme-dark .pf-v5-c-modal-box,
.pf-v5-theme-dark .pf-v5-c-drawer__panel,
.pf-v5-theme-dark .pf-v5-c-popover__content,
.pf-v5-theme-dark .pf-v5-c-menu {
box-shadow: 0 15px 42px rgba(0, 0, 0, 0.28);
}
.keycloak__section_intro__help {
width: fit-content;
padding: var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--lg);
src/login/class-theme.css
+71 -10
View File
@@ -11,6 +11,12 @@
--class-sun: #f6c54c;
--class-coral: #f05a47;
--class-danger: #c93636;
--class-grid: rgba(24, 50, 74, 0.035);
--class-input: #fbfdff;
--class-input-focus: #ffffff;
--class-danger-soft: #fff1ef;
--class-success-soft: #eefaf5;
--class-overlay: rgba(247, 251, 255, 0.94);
--class-display: "Arial Narrow", "DIN Condensed", "Noto Sans SC", "Microsoft YaHei",
sans-serif;
--class-body-font: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
@@ -46,8 +52,8 @@ body.class-body {
z-index: 0;
overflow: hidden;
pointer-events: none;
background-image: linear-gradient(rgba(24, 50, 74, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(24, 50, 74, 0.035) 1px, transparent 1px);
background-image: linear-gradient(var(--class-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--class-grid) 1px, transparent 1px);
background-position: calc(52% + 24px) 24px;
background-size: 24px 24px;
}
@@ -362,7 +368,7 @@ body.class-body {
border-radius: 0;
color: var(--class-ink);
outline: 0;
background: #fbfdff;
background: var(--class-input);
box-shadow: none;
font-size: 0.94rem;
transition:
@@ -379,7 +385,7 @@ body.class-body {
.class-card textarea.form-control:focus,
.class-card select.form-control:focus {
border-color: var(--class-blue-deep);
background: #ffffff;
background: var(--class-input-focus);
box-shadow: inset 5px 0 0 var(--class-blue);
}
@@ -506,12 +512,12 @@ body.class-body {
.class-alert.pf-m-danger {
border-left-color: var(--class-danger);
background: #fff1ef;
background: var(--class-danger-soft);
}
.class-alert.pf-m-success {
border-left-color: var(--class-green);
background: #eefaf5;
background: var(--class-success-soft);
}
.class-feedback {
@@ -577,7 +583,7 @@ body.class-body {
border: 1px solid var(--class-line);
border-radius: 0;
color: var(--class-ink);
background: #ffffff;
background: var(--class-input-focus);
font-size: 0.78rem;
}
@@ -609,7 +615,7 @@ body.class-body {
border: 1px solid var(--class-line);
border-radius: 0;
color: var(--class-muted);
background: rgba(247, 251, 255, 0.94);
background: var(--class-overlay);
font: 700 0.66rem/1.4 var(--class-utility);
}
@@ -619,7 +625,7 @@ body.class-body {
min-width: 150px;
border: 1px solid var(--class-ink);
color: var(--class-ink);
background: #ffffff;
background: var(--class-surface);
box-shadow: 8px 8px 0 var(--class-soft);
}
@@ -662,7 +668,62 @@ body.class-body {
.class-card .pf-c-tile {
border-color: var(--class-line);
border-radius: 0;
background: #ffffff;
background: var(--class-surface);
}
@media (prefers-color-scheme: dark) {
:root {
--class-ink: #e7f1f9;
--class-muted: #9ab0c2;
--class-line: #456177;
--class-paper: #08131e;
--class-surface: #0f2030;
--class-soft: #173149;
--class-blue: #6da8f6;
--class-blue-deep: #91bdff;
--class-green: #54c99d;
--class-sun: #f2c45c;
--class-coral: #ff7465;
--class-danger: #ff8585;
--class-grid: rgba(145, 189, 255, 0.055);
--class-input: #0a1926;
--class-input-focus: #12283a;
--class-danger-soft: #321d25;
--class-success-soft: #102d27;
--class-overlay: rgba(15, 32, 48, 0.96);
color-scheme: dark;
}
.class-record {
background: linear-gradient(rgba(247, 250, 248, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(247, 250, 248, 0.055) 1px, transparent 1px),
#17477f;
background-size: 44px 44px;
}
.class-card {
box-shadow: 16px 16px 0 #142a3e;
}
.class-input,
.class-card textarea.form-control,
.class-card select.form-control {
caret-color: var(--class-sun);
}
.class-input::placeholder,
.class-card textarea.form-control::placeholder {
color: #7890a4;
opacity: 1;
}
.class-button--primary {
color: #142638;
}
.class-locale__list {
box-shadow: 8px 8px 0 #142a3e;
}
}
@media (max-width: 1020px) {