根据 kcContext.themeName 自动识别 class 与默认 NEXUS 主题。

class 控制台复用登录页的蓝、珊瑚、黄色、绿色档案风格。
账号控制台和管理控制台均支持亮色、暗色模式。
优化侧栏文字对比度、身份卡、按钮、背景网格及主题强调色。
修复约 1050px 宽度下内容区横向溢出。

src/account/KcAccountUi.tsx

@@ -16,8 +16,12 @@ import { environment } from "./environment";
 import { i18n } from "./i18n/i18n";
 import { Root } from "./root/Root";
 import { SessionExpirationWarningOverlay } from "../shared/SessionExpirationWarningOverlay";
+import { getKcContext } from "./KcContext";
 
-document.title = "NEXUS / ID";
+const { kcContext } = getKcContext();
+
+document.documentElement.dataset.kcThemeName = kcContext.themeName;
+document.title = kcContext.themeName === "class" ? "612 / 账户中心" : "NEXUS / ID";
 
 const prI18nInitialized = i18n.init();
 startColorSchemeManagement();

src/account/root/PageNav.tsx

@@ -20,6 +20,7 @@ import {
     Spinner
 } from "../../shared/@patternfly/react-core";
 import {
+    Children,
     PropsWithChildren,
     MouseEvent as ReactMouseEvent,
     Suspense,
@@ -203,7 +204,7 @@ export const NavLink = ({
                 handleClick(event as unknown as ReactMouseEvent<HTMLAnchorElement>)
             }
         >
-            {children}
+            {Children.toArray(children)}
         </NavItem>
     );
 };

src/account/theme.css

@@ -522,13 +522,13 @@ img.keycloak__pageheader_brand {
 
 .pf-v5-c-button.pf-m-primary {
     color: #ffffff;
-    background: #007f8e;
-    box-shadow: 0 7px 18px rgba(0, 127, 142, 0.18);
+    background: var(--pf-v5-global--primary-color--100);
+    box-shadow: 0 7px 18px color-mix(in srgb, var(--nexus-account-signal) 22%, transparent);
 }
 
 .pf-v5-c-button.pf-m-primary:hover {
-    background: #006f7c;
-    box-shadow: 0 9px 22px rgba(0, 127, 142, 0.24);
+    background: var(--pf-v5-global--primary-color--200);
+    box-shadow: 0 9px 22px color-mix(in srgb, var(--nexus-account-signal) 28%, transparent);
     transform: translateY(-1px);
 }
 
@@ -579,7 +579,7 @@ img.keycloak__pageheader_brand {
 
 .nexus-profile-layout {
     display: grid;
-    grid-template-columns: minmax(260px, 0.68fr) minmax(520px, 1.65fr);
+    grid-template-columns: minmax(240px, 0.68fr) minmax(0, 1.65fr);
     align-items: start;
     gap: clamp(1.25rem, 2.5vw, 2.25rem);
 }
@@ -944,3 +944,167 @@ input[type="radio"] {
         transition-duration: 0.01ms !important;
     }
 }
+
+/* The class theme carries the bright archival language from its login screen. */
+html[data-kc-theme-name="class"] {
+    --nexus-account-void: #2868c7;
+    --nexus-account-chrome: #3f7fd6;
+    --nexus-account-panel: #ffffff;
+    --nexus-account-canvas: #f7fbff;
+    --nexus-account-canvas-strong: #e5f3ff;
+    --nexus-account-signal: #f05a47;
+    --nexus-account-signal-bright: #f6c54c;
+    --nexus-account-indigo: #23966f;
+    --nexus-account-mint: #f6c54c;
+    --nexus-account-text: #18324a;
+    --nexus-account-muted: #617387;
+    --nexus-account-line: #c8dbe8;
+    --nexus-account-line-strong: #9ebbd0;
+    --nexus-account-danger: #c93636;
+    --nexus-account-radius-sm: 2px;
+    --nexus-account-radius-md: 4px;
+    --nexus-account-shadow: 7px 7px 0 rgba(40, 104, 199, 0.1);
+    --pf-v5-global--primary-color--100: #3f7fd6;
+    --pf-v5-global--primary-color--200: #2868c7;
+    --pf-v5-global--link--Color: #2868c7;
+    --pf-v5-global--link--Color--hover: #174f9c;
+    --pf-v5-global--BackgroundColor--100: var(--nexus-account-panel);
+    --pf-v5-global--BackgroundColor--150: #fbfdff;
+    --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: var(--nexus-account-line-strong);
+}
+
+html[data-kc-theme-name="class"].pf-v5-theme-dark {
+    --nexus-account-void: #0d2742;
+    --nexus-account-chrome: #123453;
+    --nexus-account-panel: #0f2030;
+    --nexus-account-canvas: #08131e;
+    --nexus-account-canvas-strong: #173149;
+    --nexus-account-signal: #ff7465;
+    --nexus-account-signal-bright: #f2c45c;
+    --nexus-account-indigo: #54c99d;
+    --nexus-account-mint: #f2c45c;
+    --nexus-account-text: #e7f1f9;
+    --nexus-account-muted: #9ab0c2;
+    --nexus-account-line: #355168;
+    --nexus-account-line-strong: #58738a;
+    --nexus-account-danger: #ff8585;
+    --nexus-account-shadow: 7px 7px 0 #142a3e;
+    --pf-v5-global--primary-color--100: #6da8f6;
+    --pf-v5-global--primary-color--200: #91bdff;
+    --pf-v5-global--link--Color: #91bdff;
+    --pf-v5-global--link--Color--hover: #bdd7ff;
+    --pf-v5-global--BackgroundColor--150: #14293b;
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-page__main {
+    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-position: 24px 24px;
+    background-size: 24px 24px;
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-masthead {
+    border-bottom-color: rgba(246, 197, 76, 0.75);
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 48%),
+        var(--nexus-account-void);
+    box-shadow: 0 8px 0 rgba(63, 127, 214, 0.12);
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-masthead::after {
+    width: min(42vw, 38rem);
+    height: 4px;
+    background: linear-gradient(
+        90deg,
+        var(--nexus-account-indigo) 0 34%,
+        var(--nexus-account-signal-bright) 34% 67%,
+        var(--nexus-account-signal) 67%
+    );
+    opacity: 1;
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar,
+html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar-body {
+    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), transparent 42%),
+        var(--nexus-account-chrome);
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar {
+    border-right-color: rgba(246, 197, 76, 0.65);
+    box-shadow: 8px 0 0 rgba(63, 127, 214, 0.1);
+}
+
+html[data-kc-theme-name="class"] .nexus-nav-context__eyebrow {
+    color: var(--nexus-account-signal-bright);
+}
+
+html[data-kc-theme-name="class"] .nexus-profile-editor__header > span {
+    color: var(--nexus-account-signal);
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__section-title,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-expandable {
+    color: rgba(255, 255, 255, 0.78);
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link:hover,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link:focus,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-current,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
+    color: #ffffff;
+    background: linear-gradient(90deg, rgba(246, 197, 76, 0.2), rgba(240, 90, 71, 0.08));
+}
+
+html[data-kc-theme-name="class"] .nexus-identity-card {
+    border-color: rgba(246, 197, 76, 0.7);
+    border-radius: 4px;
+    background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
+        #2868c7;
+    background-size: 24px 24px;
+    box-shadow: 10px 10px 0 rgba(35, 150, 111, 0.18);
+}
+
+html[data-kc-theme-name="class"] .nexus-identity-card::before {
+    width: 100%;
+    height: 5px;
+    background: linear-gradient(
+        90deg,
+        var(--nexus-account-indigo) 0 34%,
+        var(--nexus-account-signal-bright) 34% 67%,
+        var(--nexus-account-signal) 67%
+    );
+}
+
+html[data-kc-theme-name="class"] .nexus-identity-card::after {
+    display: none;
+}
+
+html[data-kc-theme-name="class"] .nexus-identity-card__topline,
+html[data-kc-theme-name="class"] .nexus-identity-card__name p,
+html[data-kc-theme-name="class"] .nexus-identity-card__facts dt,
+html[data-kc-theme-name="class"] .nexus-identity-card__footer {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+html[data-kc-theme-name="class"] .nexus-identity-card__facts dd {
+    color: #ffffff;
+}
+
+html[data-kc-theme-name="class"] .nexus-identity-card__avatar {
+    border-color: var(--nexus-account-signal-bright);
+    border-radius: 2px;
+    color: #18324a;
+    background: var(--nexus-account-signal-bright);
+    box-shadow: 6px 6px 0 var(--nexus-account-signal);
+    transform: none;
+}
+
+html[data-kc-theme-name="class"] .nexus-profile-editor,
+html[data-kc-theme-name="class"] .pf-v5-c-card {
+    border-radius: 4px;
+}

src/admin/KcAdminUi.tsx

@@ -13,9 +13,14 @@ import { createHashRouter, RouterProvider } from "react-router-dom";
 import { i18n } from "./i18n/i18n";
 import { Root } from "./Root";
 import { routes } from "./routes";
+import { getKcContext } from "./KcContext";
 
 import "./index.css";
 
+const { kcContext } = getKcContext();
+
+document.documentElement.dataset.kcThemeName = kcContext.themeName;
+
 const router = createHashRouter([
     {
         path: "/",

src/admin/index.css

@@ -425,13 +425,13 @@ img.keycloak__pageheader_brand {
 
 .pf-v5-c-button.pf-m-primary {
     color: #ffffff;
-    background: #007f8e;
-    box-shadow: 0 7px 18px rgba(0, 127, 142, 0.18);
+    background: var(--pf-v5-global--primary-color--100);
+    box-shadow: 0 7px 18px color-mix(in srgb, var(--nexus-admin-signal) 22%, transparent);
 }
 
 .pf-v5-c-button.pf-m-primary:hover {
-    background: #006f7c;
-    box-shadow: 0 9px 22px rgba(0, 127, 142, 0.24);
+    background: var(--pf-v5-global--primary-color--200);
+    box-shadow: 0 9px 22px color-mix(in srgb, var(--nexus-admin-signal) 28%, transparent);
     transform: translateY(-1px);
 }
 
@@ -599,3 +599,116 @@ div.w-tc-editor {
         transition-duration: 0.01ms !important;
     }
 }
+
+/* Keep the admin workspace in step with the class login/account variant. */
+html[data-kc-theme-name="class"] {
+    --nexus-admin-void: #2868c7;
+    --nexus-admin-chrome: #3f7fd6;
+    --nexus-admin-panel: #ffffff;
+    --nexus-admin-canvas: #f7fbff;
+    --nexus-admin-canvas-strong: #e5f3ff;
+    --nexus-admin-signal: #f05a47;
+    --nexus-admin-signal-bright: #f6c54c;
+    --nexus-admin-indigo: #23966f;
+    --nexus-admin-mint: #f6c54c;
+    --nexus-admin-text: #18324a;
+    --nexus-admin-muted: #617387;
+    --nexus-admin-line: #c8dbe8;
+    --nexus-admin-line-strong: #9ebbd0;
+    --nexus-admin-danger: #c93636;
+    --nexus-admin-radius-sm: 2px;
+    --nexus-admin-radius-md: 4px;
+    --nexus-admin-shadow: 7px 7px 0 rgba(40, 104, 199, 0.1);
+    --pf-v5-global--primary-color--100: #3f7fd6;
+    --pf-v5-global--primary-color--200: #2868c7;
+    --pf-v5-global--link--Color: #2868c7;
+    --pf-v5-global--link--Color--hover: #174f9c;
+    --pf-v5-global--BackgroundColor--100: var(--nexus-admin-panel);
+    --pf-v5-global--BackgroundColor--150: #fbfdff;
+    --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: var(--nexus-admin-line-strong);
+    --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--nexus-admin-canvas);
+}
+
+html[data-kc-theme-name="class"].pf-v5-theme-dark {
+    --nexus-admin-void: #0d2742;
+    --nexus-admin-chrome: #123453;
+    --nexus-admin-panel: #0f2030;
+    --nexus-admin-canvas: #08131e;
+    --nexus-admin-canvas-strong: #173149;
+    --nexus-admin-signal: #ff7465;
+    --nexus-admin-signal-bright: #f2c45c;
+    --nexus-admin-indigo: #54c99d;
+    --nexus-admin-mint: #f2c45c;
+    --nexus-admin-text: #e7f1f9;
+    --nexus-admin-muted: #9ab0c2;
+    --nexus-admin-line: #355168;
+    --nexus-admin-line-strong: #58738a;
+    --nexus-admin-danger: #ff8585;
+    --nexus-admin-shadow: 7px 7px 0 #142a3e;
+    --pf-v5-global--primary-color--100: #6da8f6;
+    --pf-v5-global--primary-color--200: #91bdff;
+    --pf-v5-global--link--Color: #91bdff;
+    --pf-v5-global--link--Color--hover: #bdd7ff;
+    --pf-v5-global--BackgroundColor--150: #14293b;
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-page__main {
+    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-position: 24px 24px;
+    background-size: 24px 24px;
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-masthead {
+    border-bottom-color: rgba(246, 197, 76, 0.75);
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 48%),
+        var(--nexus-admin-void);
+    box-shadow: 0 8px 0 rgba(63, 127, 214, 0.12);
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-masthead::after {
+    width: min(42vw, 38rem);
+    height: 4px;
+    background: linear-gradient(
+        90deg,
+        var(--nexus-admin-indigo) 0 34%,
+        var(--nexus-admin-signal-bright) 34% 67%,
+        var(--nexus-admin-signal) 67%
+    );
+    opacity: 1;
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar,
+html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar-body {
+    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), transparent 42%),
+        var(--nexus-admin-chrome);
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar {
+    border-right-color: rgba(246, 197, 76, 0.65);
+    box-shadow: 8px 0 0 rgba(63, 127, 214, 0.1);
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__section-title,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-expandable {
+    color: rgba(255, 255, 255, 0.78);
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link:hover,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link:focus,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-current,
+html[data-kc-theme-name="class"] .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
+    color: #ffffff;
+    background: linear-gradient(90deg, rgba(246, 197, 76, 0.2), rgba(240, 90, 71, 0.08));
+}
+
+html[data-kc-theme-name="class"] .pf-v5-c-card,
+html[data-kc-theme-name="class"] .pf-v5-c-modal-box,
+html[data-kc-theme-name="class"] .pf-v5-c-empty-state {
+    border-radius: 4px;
+}