暗色

src/account/theme.css

@@ -1,5 +1,4 @@
-:root,
+:root {
-.pf-v5-theme-dark {
     --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;
+    border-color: var(--pf-v5-global--BorderColor--200);
-    background: #ffffff;
+    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

@@ -1,5 +1,4 @@
-:root,
+:root {
-.pf-v5-theme-dark {
     --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;
+    border-color: var(--pf-v5-global--BorderColor--200);
-    background: #ffffff;
+    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;
+    color: var(--nexus-admin-muted);
-    background: #edf2f8;
+    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

@@ -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),
+    background-image: linear-gradient(var(--class-grid) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(24, 50, 74, 0.035) 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) {