Improve theming options (#5763)

* Update theme service
Update local settings type
Add utility style

* Update text input component

* Finish implementation

* Lint files

* Add theme configuration
Add system theme option

* Use document default view instead of window directly

* Fix imports

* Update translations

* Fix lint issue

i18n/de/messages.de.xlf

@@ -3310,7 +3310,7 @@
         <target>Kubernetes Dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cf9072061094a1ad33866a311152c495c05890a0" datatype="html">
@@ -3318,7 +3318,7 @@
         <target>Kubeconfig</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="380ab580741bec31346978e7cab8062d6970408d" datatype="html">
@@ -3326,7 +3326,7 @@
         <target>Basic</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1edc1fc6cfbbb22353050ad6788508b3ed584f53" datatype="html">
@@ -3334,7 +3334,7 @@
         <target>Token</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">130</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a55441e16a7aab838dcedbccf0a517b3ad41eac4" datatype="html">
@@ -3345,7 +3345,7 @@
               </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">166</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2071ed7df8c83bd144f74bc298a721261bea4c11" datatype="html">
@@ -3422,7 +3422,7 @@
           </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">69</context>
+          <context context-type="linenumber">70</context>
         </context-group>
       </trans-unit>
       <trans-unit id="89c689a203570b2848d633426d19bd73f51a34f8" datatype="html">
@@ -5342,31 +5342,31 @@
         <target>Lokale Einstellungen</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="f2ff730022575262d4e63002c34482e4455682c4" datatype="html">
+      <trans-unit id="c73af29d15f7f46e960a5a52908965e0e1a0c3a7" datatype="html">
         <source> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </source>
-        <target>Lokale Einstellungen werden in Cookies im Browser abgelegt und somit nicht zwischen verschiedenen Geräten synchronisiert. Änderungen werden automatisch angewendet.</target>
+        <target state="new"> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7bfa30b6cd6b020c84efa4c554890bf49932de18" datatype="html">
-        <source>Dark theme</source>
-        <target>Dunkles Thema</target>
+      <trans-unit id="27a56aad79d8b61269ed303f11664cc78bcc2522" datatype="html">
+        <source>Theme</source>
+        <target state="new">Theme</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="96f2b8de376e3dbfaae05e9de836f8a740c0b803" datatype="html">
-        <source>Use dark theme in the whole app</source>
-        <target>In der gesamten App das dunkle Thema verwenden</target>
+      <trans-unit id="66d4ff20f88ba9658fa511e86291164d0dd3d1d0" datatype="html">
+        <source>Choose color theme of the dashboard</source>
+        <target state="new">Choose color theme of the dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
@@ -5374,11 +5374,11 @@
         <target state="new">Sprache</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
@@ -5386,11 +5386,11 @@
         <target state="new">Ändern Sie die Sprache des Dashboards</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
     </body>

i18n/fr/messages.fr.xlf

@@ -3314,7 +3314,7 @@
         <target>Kubernetes Dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cf9072061094a1ad33866a311152c495c05890a0" datatype="html">
@@ -3322,7 +3322,7 @@
         <target>Kubeconfig</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="380ab580741bec31346978e7cab8062d6970408d" datatype="html">
@@ -3330,7 +3330,7 @@
         <target>Basic</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1edc1fc6cfbbb22353050ad6788508b3ed584f53" datatype="html">
@@ -3338,7 +3338,7 @@
         <target>Jeton</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">130</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a55441e16a7aab838dcedbccf0a517b3ad41eac4" datatype="html">
@@ -3350,7 +3350,7 @@
               </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">166</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2071ed7df8c83bd144f74bc298a721261bea4c11" datatype="html">
@@ -3432,7 +3432,7 @@
           </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">69</context>
+          <context context-type="linenumber">70</context>
         </context-group>
       </trans-unit>
       <trans-unit id="89c689a203570b2848d633426d19bd73f51a34f8" datatype="html">
@@ -5356,31 +5356,31 @@
         <target>Paramètres locaux</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="f2ff730022575262d4e63002c34482e4455682c4" datatype="html">
+      <trans-unit id="c73af29d15f7f46e960a5a52908965e0e1a0c3a7" datatype="html">
         <source> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </source>
-        <target>Les paramètres locaux sont stockés dans les cookies du navigateur, et ne sont ainsi pas synchronisés entre plusieurs appareils. Les changements sont appliqués automatiquement à chaque changement.</target>
+        <target state="new"> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7bfa30b6cd6b020c84efa4c554890bf49932de18" datatype="html">
-        <source>Dark theme</source>
-        <target>Thème sombre</target>
+      <trans-unit id="27a56aad79d8b61269ed303f11664cc78bcc2522" datatype="html">
+        <source>Theme</source>
+        <target state="new">Theme</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="96f2b8de376e3dbfaae05e9de836f8a740c0b803" datatype="html">
-        <source>Use dark theme in the whole app</source>
-        <target>Utiliser le thème sombre dans la totalité de l'application</target>
+      <trans-unit id="66d4ff20f88ba9658fa511e86291164d0dd3d1d0" datatype="html">
+        <source>Choose color theme of the dashboard</source>
+        <target state="new">Choose color theme of the dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
@@ -5388,11 +5388,11 @@
         <target state="new">Langue</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
@@ -5400,11 +5400,11 @@
         <target state="new">Changer la langue du tableau de bord</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
     </body>

i18n/ja/messages.ja.xlf

@@ -3053,7 +3053,7 @@
         <target>Kubernetes Dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cf9072061094a1ad33866a311152c495c05890a0" datatype="html">
@@ -3061,7 +3061,7 @@
         <target>Kubeconfig</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="380ab580741bec31346978e7cab8062d6970408d" datatype="html">
@@ -3069,7 +3069,7 @@
         <target>ベーシック</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1edc1fc6cfbbb22353050ad6788508b3ed584f53" datatype="html">
@@ -3077,7 +3077,7 @@
         <target>トークン</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">130</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a55441e16a7aab838dcedbccf0a517b3ad41eac4" datatype="html">
@@ -3087,7 +3087,7 @@
               </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">166</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2071ed7df8c83bd144f74bc298a721261bea4c11" datatype="html">
@@ -3162,7 +3162,7 @@
         <target>サインイン</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">69</context>
+          <context context-type="linenumber">70</context>
         </context-group>
       </trans-unit>
       <trans-unit id="89c689a203570b2848d633426d19bd73f51a34f8" datatype="html">
@@ -5304,31 +5304,31 @@
         <target>ローカル設定</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="f2ff730022575262d4e63002c34482e4455682c4" datatype="html">
+      <trans-unit id="c73af29d15f7f46e960a5a52908965e0e1a0c3a7" datatype="html">
         <source> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </source>
-        <target>ローカル設定はブラウザーのクッキーに保存されます。複数のデバイス間で同期されません。変更は自動的に適用されます。</target>
+        <target state="new"> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7bfa30b6cd6b020c84efa4c554890bf49932de18" datatype="html">
-        <source>Dark theme</source>
-        <target>ダークテーマ</target>
+      <trans-unit id="27a56aad79d8b61269ed303f11664cc78bcc2522" datatype="html">
+        <source>Theme</source>
+        <target state="new">Theme</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="96f2b8de376e3dbfaae05e9de836f8a740c0b803" datatype="html">
-        <source>Use dark theme in the whole app</source>
-        <target>ダークテーマをすべてのアプリケーションで使用する</target>
+      <trans-unit id="66d4ff20f88ba9658fa511e86291164d0dd3d1d0" datatype="html">
+        <source>Choose color theme of the dashboard</source>
+        <target state="new">Choose color theme of the dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
@@ -5336,11 +5336,11 @@
         <target state="new">言語</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
@@ -5348,11 +5348,11 @@
         <target state="new">ダッシュボードの言語を変更する</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">

i18n/ko/messages.ko.xlf

@@ -3090,7 +3090,7 @@
         <target>쿠버네티스 대시보드</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cf9072061094a1ad33866a311152c495c05890a0" datatype="html">
@@ -3098,7 +3098,7 @@
         <target>Kubeconfig</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="380ab580741bec31346978e7cab8062d6970408d" datatype="html">
@@ -3106,7 +3106,7 @@
         <target>기본</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1edc1fc6cfbbb22353050ad6788508b3ed584f53" datatype="html">
@@ -3114,7 +3114,7 @@
         <target>토큰</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">130</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a55441e16a7aab838dcedbccf0a517b3ad41eac4" datatype="html">
@@ -3124,7 +3124,7 @@
               </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">166</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2071ed7df8c83bd144f74bc298a721261bea4c11" datatype="html">
@@ -3201,7 +3201,7 @@
           </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">69</context>
+          <context context-type="linenumber">70</context>
         </context-group>
       </trans-unit>
       <trans-unit id="89c689a203570b2848d633426d19bd73f51a34f8" datatype="html">
@@ -5414,33 +5414,31 @@
         <target>로컬 설정</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="f2ff730022575262d4e63002c34482e4455682c4" datatype="html">
+      <trans-unit id="c73af29d15f7f46e960a5a52908965e0e1a0c3a7" datatype="html">
         <source> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </source>
-        <target>
-      로컬 설정은 브라우저의 쿠키에 저장되므로, 다중 장치 사이에 동기화가 되지 않습니다. 모든 변경 사항은 자동으로 적용됩니다.
-    </target>
+        <target state="new"> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7bfa30b6cd6b020c84efa4c554890bf49932de18" datatype="html">
-        <source>Dark theme</source>
-        <target>어두운 테마</target>
+      <trans-unit id="27a56aad79d8b61269ed303f11664cc78bcc2522" datatype="html">
+        <source>Theme</source>
+        <target state="new">Theme</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="96f2b8de376e3dbfaae05e9de836f8a740c0b803" datatype="html">
-        <source>Use dark theme in the whole app</source>
-        <target>전체 앱에 대해서 어두운 테마를 사용합니다.</target>
+      <trans-unit id="66d4ff20f88ba9658fa511e86291164d0dd3d1d0" datatype="html">
+        <source>Choose color theme of the dashboard</source>
+        <target state="new">Choose color theme of the dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
@@ -5448,11 +5446,11 @@
         <target state="new">언어</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
@@ -5460,11 +5458,11 @@
         <target state="new">대시 보드의 언어 변경</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">

i18n/zh-Hans/messages.zh-Hans.xlf

@@ -3090,7 +3090,7 @@
         <target>Kubernetes Dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cf9072061094a1ad33866a311152c495c05890a0" datatype="html">
@@ -3098,7 +3098,7 @@
         <target>Kubeconfig</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="380ab580741bec31346978e7cab8062d6970408d" datatype="html">
@@ -3106,7 +3106,7 @@
         <target>基本</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1edc1fc6cfbbb22353050ad6788508b3ed584f53" datatype="html">
@@ -3114,7 +3114,7 @@
         <target>Token</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">130</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a55441e16a7aab838dcedbccf0a517b3ad41eac4" datatype="html">
@@ -3124,7 +3124,7 @@
               </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">166</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2071ed7df8c83bd144f74bc298a721261bea4c11" datatype="html">
@@ -3201,7 +3201,7 @@
           </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">69</context>
+          <context context-type="linenumber">70</context>
         </context-group>
       </trans-unit>
       <trans-unit id="89c689a203570b2848d633426d19bd73f51a34f8" datatype="html">
@@ -5417,33 +5417,31 @@
         <target>本地设置</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="f2ff730022575262d4e63002c34482e4455682c4" datatype="html">
+      <trans-unit id="c73af29d15f7f46e960a5a52908965e0e1a0c3a7" datatype="html">
         <source> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </source>
-        <target>
-      本地设置存储在浏览器cookie中，因此它们不会在多个设备之间同步。每次更改都会自动应用更改。
-    </target>
+        <target state="new"> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7bfa30b6cd6b020c84efa4c554890bf49932de18" datatype="html">
-        <source>Dark theme</source>
-        <target>黑色主题</target>
+      <trans-unit id="27a56aad79d8b61269ed303f11664cc78bcc2522" datatype="html">
+        <source>Theme</source>
+        <target state="new">Theme</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="96f2b8de376e3dbfaae05e9de836f8a740c0b803" datatype="html">
-        <source>Use dark theme in the whole app</source>
-        <target>在整个应用程序中使用黑色主题</target>
+      <trans-unit id="66d4ff20f88ba9658fa511e86291164d0dd3d1d0" datatype="html">
+        <source>Choose color theme of the dashboard</source>
+        <target state="new">Choose color theme of the dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
@@ -5451,11 +5449,11 @@
         <target state="new">语言</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
@@ -5463,11 +5461,11 @@
         <target state="new">更改 dashboard 的语言</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">

i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf

@@ -3094,7 +3094,7 @@
         <target>Kubernetes 儀表盤</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cf9072061094a1ad33866a311152c495c05890a0" datatype="html">
@@ -3102,7 +3102,7 @@
         <target>Kubeconfig</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="380ab580741bec31346978e7cab8062d6970408d" datatype="html">
@@ -3110,7 +3110,7 @@
         <target>基本</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1edc1fc6cfbbb22353050ad6788508b3ed584f53" datatype="html">
@@ -3118,7 +3118,7 @@
         <target>Token</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">130</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a55441e16a7aab838dcedbccf0a517b3ad41eac4" datatype="html">
@@ -3128,7 +3128,7 @@
               </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">166</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2071ed7df8c83bd144f74bc298a721261bea4c11" datatype="html">
@@ -3205,7 +3205,7 @@
           </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">69</context>
+          <context context-type="linenumber">70</context>
         </context-group>
       </trans-unit>
       <trans-unit id="89c689a203570b2848d633426d19bd73f51a34f8" datatype="html">
@@ -5417,33 +5417,31 @@
         <target>本地設置</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="f2ff730022575262d4e63002c34482e4455682c4" datatype="html">
+      <trans-unit id="c73af29d15f7f46e960a5a52908965e0e1a0c3a7" datatype="html">
         <source> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </source>
-        <target>
-      本地設置存儲在瀏覽器cookie中，因此它們不會在多個設備之間同步。每次更改都會自動應用改變。
-    </target>
+        <target state="new"> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7bfa30b6cd6b020c84efa4c554890bf49932de18" datatype="html">
-        <source>Dark theme</source>
-        <target>黑色主題</target>
+      <trans-unit id="27a56aad79d8b61269ed303f11664cc78bcc2522" datatype="html">
+        <source>Theme</source>
+        <target state="new">Theme</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="96f2b8de376e3dbfaae05e9de836f8a740c0b803" datatype="html">
-        <source>Use dark theme in the whole app</source>
-        <target>在整個應用程序中使用黑色主題</target>
+      <trans-unit id="66d4ff20f88ba9658fa511e86291164d0dd3d1d0" datatype="html">
+        <source>Choose color theme of the dashboard</source>
+        <target state="new">Choose color theme of the dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
@@ -5451,11 +5449,11 @@
         <target state="new">语言</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
@@ -5463,11 +5461,11 @@
         <target state="new">更改 dashboard 的语言</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">

i18n/zh-Hant/messages.zh-Hant.xlf

@@ -3090,7 +3090,7 @@
         <target>Kubernetes Dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cf9072061094a1ad33866a311152c495c05890a0" datatype="html">
@@ -3098,7 +3098,7 @@
         <target>Kubeconfig</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="380ab580741bec31346978e7cab8062d6970408d" datatype="html">
@@ -3106,7 +3106,7 @@
         <target>基本</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1edc1fc6cfbbb22353050ad6788508b3ed584f53" datatype="html">
@@ -3114,7 +3114,7 @@
         <target>Token</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">130</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a55441e16a7aab838dcedbccf0a517b3ad41eac4" datatype="html">
@@ -3124,7 +3124,7 @@
               </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">166</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2071ed7df8c83bd144f74bc298a721261bea4c11" datatype="html">
@@ -3201,7 +3201,7 @@
           </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/login/component.ts</context>
-          <context context-type="linenumber">69</context>
+          <context context-type="linenumber">70</context>
         </context-group>
       </trans-unit>
       <trans-unit id="89c689a203570b2848d633426d19bd73f51a34f8" datatype="html">
@@ -5417,33 +5417,31 @@
         <target>本地設置</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="f2ff730022575262d4e63002c34482e4455682c4" datatype="html">
+      <trans-unit id="c73af29d15f7f46e960a5a52908965e0e1a0c3a7" datatype="html">
         <source> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </source>
-        <target>
-      本地設置存儲在瀏覽器cookie中，因此它們不會在多個設備之間同步。每次更改都會自動應用改變。
-    </target>
+        <target state="new"> Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7bfa30b6cd6b020c84efa4c554890bf49932de18" datatype="html">
-        <source>Dark theme</source>
-        <target>黑色主題</target>
+      <trans-unit id="27a56aad79d8b61269ed303f11664cc78bcc2522" datatype="html">
+        <source>Theme</source>
+        <target state="new">Theme</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="96f2b8de376e3dbfaae05e9de836f8a740c0b803" datatype="html">
-        <source>Use dark theme in the whole app</source>
-        <target>在整個應用程序中使用黑色主題</target>
+      <trans-unit id="66d4ff20f88ba9658fa511e86291164d0dd3d1d0" datatype="html">
+        <source>Choose color theme of the dashboard</source>
+        <target state="new">Choose color theme of the dashboard</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
@@ -5451,11 +5449,11 @@
         <target state="new">語言</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
@@ -5463,11 +5461,11 @@
         <target state="new">更改 dashboard 的語言</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/frontend/settings/local/component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">

src/app/frontend/common/components/textinput/component.ts

@@ -68,7 +68,7 @@ export class TextInputComponent implements OnInit, AfterViewInit, OnChanges {
   constructor(private readonly themeService_: ThemeService) {}
 
   ngOnInit(): void {
-    this.theme = this.themeService_.isLightThemeEnabled() ? EditorTheme.light : EditorTheme.dark;
+    this.theme = this.themeService_.isThemeDark() ? EditorTheme.dark : EditorTheme.light;
   }
 
   ngAfterViewInit(): void {

src/app/frontend/common/services/global/localsettings.ts

@@ -13,15 +13,15 @@
 // limitations under the License.
 
 import {Injectable} from '@angular/core';
-import {LocalSettings} from '@api/root.api';
 
 import {ThemeService} from './theme';
+import {LocalSettings} from '@api/root.api';
 
 @Injectable()
 export class LocalSettingsService {
   private readonly _settingsKey = 'localSettings';
   private settings_: LocalSettings = {
-    isThemeDark: false,
+    theme: 'kd-light-theme',
   };
 
   constructor(private readonly theme_: ThemeService) {}
@@ -37,10 +37,10 @@ export class LocalSettingsService {
     return this.settings_;
   }
 
-  handleThemeChange(isThemeDark: boolean): void {
-    this.settings_.isThemeDark = isThemeDark;
+  handleThemeChange(theme: string): void {
+    this.settings_.theme = theme;
+    this.theme_.theme = theme;
     this.updateCookie_();
-    this.theme_.switchTheme(!this.settings_.isThemeDark);
   }
 
   updateCookie_(): void {

src/app/frontend/common/services/global/module.ts

@@ -69,6 +69,7 @@ import {PinnerService} from './pinner';
         HistoryService,
         PluginsConfigService,
         PinnerService,
+        ThemeService,
       ],
       multi: true,
     },
@@ -93,7 +94,8 @@ export function init(
   pinner: PinnerService,
   config: ConfigService,
   history: HistoryService,
-  pluginsConfig: PluginsConfigService
+  pluginsConfig: PluginsConfigService,
+  theme: ThemeService
 ): Function {
   return () => {
     globalSettings.init();
@@ -102,5 +104,6 @@ export function init(
     pinner.init();
     config.init();
     history.init();
+    theme.init();
   };
 }

src/app/frontend/common/services/global/theme.ts

@@ -12,24 +12,69 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {EventEmitter, Injectable} from '@angular/core';
+import {EventEmitter, Inject, Injectable, Injector} from '@angular/core';
+import * as customThemes from '../../../custom-themes.json';
+import {DOCUMENT} from '@angular/common';
+import {Theme} from '@api/root.api';
 import {ThemeSwitchCallback} from '@api/root.ui';
 
 @Injectable()
 export class ThemeService {
-  private isLightThemeEnabled_ = true;
-  private readonly onThemeSwitchEvent_ = new EventEmitter<boolean>();
+  readonly systemTheme = '__system_theme__';
+  private readonly _customThemes: Theme[] = customThemes;
+  private readonly _defaultThemes: Theme[] = [
+    {name: 'kd-light-theme', displayName: 'Light', isDark: false},
+    {name: 'kd-dark-theme', displayName: 'Dark', isDark: true},
+  ];
+  private _theme = 'kd-light-theme';
+  private readonly _onThemeSwitchEvent = new EventEmitter<string>();
+  private readonly _colorSchemeQuery = '(prefers-color-scheme: dark)';
 
-  isLightThemeEnabled(): boolean {
-    return this.isLightThemeEnabled_;
+  constructor(@Inject(DOCUMENT) private readonly _document: Document) {}
+
+  get themes(): Theme[] {
+    const defaultThemeNames = new Set(this._defaultThemes.map(theme => theme.name));
+    const filteredCustomThemes = this._customThemes.filter(theme => !defaultThemeNames.has(theme.name));
+    return [...this._defaultThemes, ...filteredCustomThemes];
+  }
+
+  get theme(): string {
+    return this._theme;
+  }
+
+  set theme(theme: string) {
+    this._theme = theme;
+
+    if (theme === this.systemTheme) {
+      theme = this._isSystemThemeDark() ? 'kd-dark-theme' : 'kd-light-theme';
+    }
+    this._onThemeSwitchEvent.emit(theme);
   }
 
-  switchTheme(isLightTheme: boolean): void {
-    this.onThemeSwitchEvent_.emit(isLightTheme);
-    this.isLightThemeEnabled_ = isLightTheme;
+  init(): void {
+    this._document.defaultView.matchMedia(this._colorSchemeQuery).addEventListener('change', e => {
+      if (this.theme === this.systemTheme) {
+        this._onThemeSwitchEvent.emit(e.matches ? 'kd-dark-theme' : 'kd-light-theme');
+      }
+    });
   }
 
   subscribe(callback: ThemeSwitchCallback): void {
-    this.onThemeSwitchEvent_.subscribe(callback);
+    this._onThemeSwitchEvent.subscribe(callback);
+  }
+
+  isThemeDark(): boolean {
+    if (this.theme === this.systemTheme) {
+      return this._isSystemThemeDark();
+    }
+
+    const theme = this.themes.find(theme => theme.name === this.theme);
+    return theme ? theme.isDark : false;
+  }
+
+  private _isSystemThemeDark(): boolean {
+    return (
+      this._document.defaultView.matchMedia && this._document.defaultView.matchMedia(this._colorSchemeQuery).matches
+    );
   }
 }

src/app/frontend/custom-themes.json

+[]
+

src/app/frontend/index.component.ts

@@ -19,58 +19,43 @@ import {LocalSettingsService} from './common/services/global/localsettings';
 import {ThemeService} from './common/services/global/theme';
 import {TitleService} from './common/services/global/title';
 
-enum Themes {
-  Light = 'kd-light-theme',
-  Dark = 'kd-dark-theme',
-}
-
 @Component({selector: 'kd-root', template: '<router-outlet></router-outlet>'})
 export class RootComponent implements OnInit {
-  private isLightThemeEnabled_: boolean;
+  private _theme = this._themeService.theme;
 
   constructor(
-    private readonly themeService_: ThemeService,
-    private readonly settings_: LocalSettingsService,
-    private readonly overlayContainer_: OverlayContainer,
-    private readonly kdRootRef: ElementRef,
-    private readonly titleService_: TitleService
-  ) {
-    this.isLightThemeEnabled_ = this.themeService_.isLightThemeEnabled();
-  }
+    private readonly _themeService: ThemeService,
+    private readonly _localSettingService: LocalSettingsService,
+    private readonly _overlayContainer: OverlayContainer,
+    private readonly _kdRootRef: ElementRef,
+    private readonly _titleService: TitleService
+  ) {}
 
   ngOnInit(): void {
-    this.titleService_.update();
-    this.themeService_.subscribe(this.onThemeChange_.bind(this));
+    this._titleService.update();
+    this._themeService.subscribe(this.onThemeChange_.bind(this));
 
-    const localSettings = this.settings_.get();
-    if (localSettings && localSettings.isThemeDark) {
-      this.themeService_.switchTheme(!localSettings.isThemeDark);
-      this.isLightThemeEnabled_ = !localSettings.isThemeDark;
+    const localSettings = this._localSettingService.get();
+    if (localSettings && localSettings.theme) {
+      this._theme = localSettings.theme;
+      this._themeService.theme = localSettings.theme;
     }
 
-    this.applyOverlayContainerTheme_();
-  }
-
-  private applyOverlayContainerTheme_(): void {
-    const classToRemove = this.getTheme(!this.isLightThemeEnabled_);
-    const classToAdd = this.getTheme(this.isLightThemeEnabled_);
-    this.overlayContainer_.getContainerElement().classList.remove(classToRemove);
-    this.overlayContainer_.getContainerElement().classList.add(classToAdd);
-
-    this.kdRootRef.nativeElement.classList.add(classToAdd);
-    this.kdRootRef.nativeElement.classList.remove(classToRemove);
+    this.applyOverlayContainerTheme_('', this._theme);
   }
 
-  private onThemeChange_(isLightThemeEnabled: boolean): void {
-    this.isLightThemeEnabled_ = isLightThemeEnabled;
-    this.applyOverlayContainerTheme_();
+  private onThemeChange_(theme: string): void {
+    this.applyOverlayContainerTheme_(this._theme, theme);
+    this._theme = theme;
   }
 
-  getTheme(isLightThemeEnabled?: boolean): string {
-    if (isLightThemeEnabled === undefined) {
-      isLightThemeEnabled = this.isLightThemeEnabled_;
+  private applyOverlayContainerTheme_(oldTheme: string, newTheme: string): void {
+    if (!!oldTheme && oldTheme !== newTheme) {
+      this._overlayContainer.getContainerElement().classList.remove(oldTheme);
+      this._kdRootRef.nativeElement.classList.remove(oldTheme);
     }
 
-    return isLightThemeEnabled ? Themes.Light : Themes.Dark;
+    this._overlayContainer.getContainerElement().classList.add(newTheme);
+    this._kdRootRef.nativeElement.classList.add(newTheme);
   }
 }

src/app/frontend/settings/local/component.ts

@@ -15,36 +15,51 @@
 import {DOCUMENT} from '@angular/common';
 import {Component, Inject, OnInit, ViewChild} from '@angular/core';
 import {MatSelect} from '@angular/material/select';
-import {LocalSettings} from '@api/root.api';
-import {LanguageConfig} from '@api/root.ui';
 import {CookieService} from 'ngx-cookie-service';
 import {LocalSettingsService} from '../../common/services/global/localsettings';
 import {environment} from '../../environments/environment';
 import {Config, CONFIG_DI_TOKEN} from '../../index.config';
+import {ThemeService} from '../../common/services/global/theme';
+import {LocalSettings, Theme} from '@api/root.api';
+import {LanguageConfig} from '@api/root.ui';
 
-@Component({selector: 'kd-local-settings', templateUrl: './template.html'})
+@Component({
+  selector: 'kd-local-settings',
+  templateUrl: './template.html',
+  styleUrls: ['./style.scss'],
+})
 export class LocalSettingsComponent implements OnInit {
   settings: LocalSettings = {} as LocalSettings;
   languages: LanguageConfig[] = [];
   selectedLanguage: string;
+  themes: Theme[];
+  selectedTheme: string;
+  systemTheme: string;
 
   @ViewChild(MatSelect, {static: true}) private readonly select_: MatSelect;
 
   constructor(
     private readonly settings_: LocalSettingsService,
+    private readonly theme_: ThemeService,
     private readonly cookies_: CookieService,
     @Inject(DOCUMENT) private readonly document_: Document,
     @Inject(CONFIG_DI_TOKEN) private readonly appConfig_: Config
   ) {}
 
   ngOnInit(): void {
-    this.languages = this.appConfig_.supportedLanguages;
     this.settings = this.settings_.get();
+
+    this.languages = this.appConfig_.supportedLanguages;
     this.selectedLanguage = this.cookies_.get(this.appConfig_.languageCookieName) || this.appConfig_.defaultLanguage;
+
+    this.themes = this.theme_.themes;
+    this.selectedTheme = this.theme_.theme;
+    this.systemTheme = this.theme_.systemTheme;
   }
 
-  onThemeChange(): void {
-    this.settings_.handleThemeChange(this.settings.isThemeDark);
+  onThemeChange(theme: string): void {
+    this.settings.theme = theme;
+    this.settings_.handleThemeChange(this.settings.theme);
   }
 
   onLanguageSelected(selectedLanguage: string) {

src/app/frontend/settings/local/style.scss

+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import '../../variables';
+
+.mat-button-toggle-group {
+  border: 0;
+
+  .mat-button-toggle {
+    border-radius: $baseline-grid / 2;
+    margin-right: $baseline-grid;
+  }
+}

src/app/frontend/settings/local/template.html

@@ -19,19 +19,28 @@ limitations under the License.
        i18n>Local settings</div>
   <div content>
     <p i18n>
-      Local settings are stored in the browser cookies, so they are not synchronized between multiple devices. Changes are applied automatically on every change.
+      Local settings are stored in the browser cookies, so they are not synchronized between multiple devices.
+      Changes are applied automatically on every change.
     </p>
     <br>
-    <kd-settings-entry key="Dark theme"
+    <kd-settings-entry key="Theme"
                        i18n-key
-                       desc="Use dark theme in the whole app"
+                       desc="Choose color theme of the dashboard"
                        i18n-desc>
-      <div fxFlex>
-        <mat-slide-toggle color="primary"
-                          name="isThemeDark"
-                          [(ngModel)]="settings.isThemeDark"
-                          (change)="onThemeChange()"></mat-slide-toggle>
-      </div>
+      <mat-button-toggle-group [(value)]="selectedTheme"
+                               (change)="onThemeChange($event.value)"
+                               fxLayout="row wrap"
+                               fxFlex>
+        <mat-button-toggle [value]="systemTheme"
+                           class="kd-border">
+          System
+        </mat-button-toggle>
+        <mat-button-toggle *ngFor="let theme of themes"
+                           [value]="theme.name"
+                           class="kd-border">
+          {{theme.displayName}}
+        </mat-button-toggle>
+      </mat-button-toggle-group>
     </kd-settings-entry>
     <kd-settings-entry *ngIf="isProdMode()"
                        key="Language"

src/app/frontend/typings/root.api.ts

@@ -770,7 +770,13 @@ export interface CsrfToken {
 }
 
 export interface LocalSettings {
-  isThemeDark: boolean;
+  theme: string;
+}
+
+export interface Theme {
+  name: string;
+  displayName: string;
+  isDark: boolean;
 }
 
 export interface AppConfig {

tsconfig.json

@@ -20,6 +20,7 @@
     "noImplicitReturns": true,
     "noUnusedParameters": true,
     "noImplicitAny": true,
+    "resolveJsonModule": true,
     "lib": [
       "es2017",
       "dom"