Keycloak: 您的主題已可立即編輯

本文件是自訂外觀指南的一部分。請在此處查看完整指南：輕鬆在 Stackhero 上為您的 Keycloak 登入頁面、帳戶主控台及電子郵件進行品牌化：設定您的顏色、Logo、文字，甚至可透過內建線上編輯器建立完整的自訂主題。。

👋 歡迎來到 Stackhero 文件中心！

Stackhero 提供 Keycloak cloud 服務，讓您只需 2 分鐘即可輕鬆部署可用於生產環境的身分識別服務：

• 無限制的使用者、realm 及 client 數量
• 支援 OpenID Connect、OAuth 2.0、SAML 2.0、社群登入、LDAP 及 Active Directory 聯邦整合
• 自訂網域名稱，內建 HTTPS，確保安全存取（例如 https://login.your-company.com）
• 自訂主題：透過內建線上編輯器，輕鬆自訂登入頁面、帳號主控台及電子郵件的品牌風格
• 專屬 Email 伺服器，支援 SPF、DKIM 及 DMARC，協助您自動處理帳號確認與密碼重設
• 內建 PostgreSQL 資料庫，管理主控台可於獨立且可關閉的連接埠上存取
• 一鍵更新，讓您的系統隨時保持最新，無需手動操作

專注於開發，而非設定：您可以在 5 分鐘內體驗 Stackhero 的 Keycloak cloud 解決方案。

打開 themes/，您會看到 default/ 目錄。這就是目前啟用中的主題，已被您的 Keycloak 實例使用。無需切換，直接編輯檔案即可立即看到變更效果。

您不需具備 Keycloak 主題的先備知識。每個檔案內都已列出常見可調整設定，並以註解方式顯示目前 Keycloak 的預設值。 若要修改，只需移除註解符號，調整數值並儲存。

若某行仍為註解，Keycloak 會採用預設值。如此可確保您的服務即使更新後，仍維持標準 Keycloak 行為。

更新您的 Logo

進入 default/login/resources/img/，您會看到目前登入頁所用的兩張圖片。請以上傳相同檔名（keycloak-logo-text.svg）的自家 Logo，然後以 Ctrl+F5（macOS 請用 Cmd+Shift+R）重新整理登入頁。

這樣就完成了。無需編輯其他檔案或重啟服務，儲存後立即生效。若要更換背景圖，請同樣更新此資料夾下的 keycloak-bg-darken.svg。

若您想使用不同檔名，可於 default/login/resources/css/stackhero.css 的「Your logo」區段調整引用。

設定您的顏色

在 stackhero.css 中，您會看到已填入目前數值的變數：

:root {
  /* ---------- Colors ---------- */
  /* The buttons */
  /* --pf-v5-global--primary-color--100: #06c; */
  /* The buttons, while hovered */
  /* --pf-v5-global--primary-color--200: #004080; */
  /* The links */
  /* --pf-v5-global--link--Color: #06c; */
  /* The colored line on top of the login box */
  /* --keycloak-card-top-color: #06c; */

要套用變更，移除註解符號，設定您的顏色，儲存並重新整理頁面即可。

編輯時提醒： 您的瀏覽器會將主題 CSS、圖片及腳本快取一小時。開發時請務必用 Ctrl+F5 強制重新整理，以看到最新變更。訪客則會在一小時內看到更新。

您擁有完整控制權：該檔案為純 CSS，且最後載入，可覆蓋任何樣式。建議使用瀏覽器 DevTools（F12）檢查元素。Keycloak 26 採用 PatternFly design system，大多數顏色變數為 --pf-v5-global--*，可於 :root 重新定義。

設定公司名稱

此項無需編輯主題。在管理主控台開啟 Realm settings > General，設定 Display name，此名稱將顯示於登入頁及電子郵件中。

多語系文字變更

您可不動 CSS 或 HTML，直接修改文字。在 default/login/messages/messages_en.properties 內可找到所有登入表單預設文字。要修改，移除 #，輸入自訂內容並儲存：

loginAccountTitle=Sign in to Acme
doLogIn=Sign in
doForgotPassword=I forgot my password

如需支援法文、德文等，新增如 messages_fr.properties、messages_de.properties 等檔案，並於管理主控台 Realm settings > Localization 啟用對應語言。

小提示：Localization 分頁下的 Realm overrides 區塊，允許您直接於主控台修改文字，無需編輯檔案或重啟。請依您的工作流程選擇最適合的方式。

品牌化您的電子郵件

Keycloak 會發送電子郵件以進行地址驗證、密碼重設及用戶邀請。於 default/email/messages/messages_en.properties 可自訂標準主旨與內容：

emailVerificationSubject=Confirm your Acme account
passwordResetSubject=Reset your Acme password

編輯郵件內容時請注意：

• 請保留 {0}、{1}、{2} 這些佔位符（Keycloak 會自動填入連結、顯示名稱及延遲時間）。
• 單引號請以兩個連寫（如 don''t）進行跳脫。

若要自訂郵件 HTML，請從 Keycloak base email theme 複製所需模板至 default/email/html/，再編輯您的副本。

Stackhero 已為您設定好 SPF、DKIM、DMARC 等郵件發送機制。請於 Realm settings > Email 依服務頁提供的主機與埠號設定。

若需重設主題

如遇問題，您可刪除整個 default 目錄並重啟服務。Stackhero 會自動建立全新預設主題，恢復 Keycloak 標準外觀。

您的 realms、用戶及 clients 均儲存於資料庫，不受影響。