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

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

👋 歡迎瀏覽 Stackhero 文件！

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

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

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

打開 themes/，您會看到一個 default/ 目錄。這就是您的啟用主題，已被您的 Keycloak 實例使用。無需選擇，只需直接編輯其檔案，變更會即時反映。

您無需具備 Keycloak 主題的先前知識。**每個檔案內都已列出常見可調整設定，並以註解方式顯示目前 Keycloak 的預設值作為範例。**如要更新值，只需移除註解符號，調整數值並儲存即可。

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

更新您的標誌

打開 default/login/resources/img/。您會看到目前登入頁所用的兩個圖片。請以上傳與現有檔名相同的檔案（keycloak-logo-text.svg）來替換您的標誌，然後用 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} 這些 placeholder（Keycloak 會自動填入連結、顯示名稱及延遲時間）。
• 單引號需用兩個（如 don''t）來跳脫。

如要覆蓋電郵 HTML，請從 Keycloak base email theme 複製所需模板到 default/email/html/，再編輯您的副本。

Stackhero 已為您設定好電郵發送，包括 SPF、DKIM 及 DMARC。請於 Realm settings > Email 以服務頁提供的主機及埠號設定。

若需重設主題

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

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