Implement translation overrides in theme-switcher

packages/theme-switcher/src/demo.js

@@ -101,7 +101,7 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
                     <p>${i18n.t('intro')}</p>
                 </div>
                 <div class="content">
-                    <dbp-theme-switcher
+                    <dbp-theme-switcher subscribe="lang, lang-dir"
                         themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"}, {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'></dbp-theme-switcher>
                 </div>
             </section>

packages/theme-switcher/src/i18n.js

-import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance, setOverridesByGlobalCache} from '@dbp-toolkit/common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
@@ -6,3 +6,5 @@ import en from './i18n/en/translation.json';
 export function createInstance() {
     return _createInstance({en: en, de: de}, 'de', 'en');
 }
+
+export{setOverridesByGlobalCache};

packages/theme-switcher/src/theme-switcher.js

-import {createInstance} from './i18n.js';
+import {createInstance, setOverridesByGlobalCache} from './i18n.js';
 import {html, css} from 'lit';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {AdapterLitElement, Icon} from '@dbp-toolkit/common';
@@ -15,6 +15,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
         this.boundCloseAdditionalMenuHandler = this.hideModeMenu.bind(this);
         this.detectBrowserDarkMode = false;
         this.darkModeClass = 'dark-theme';
+        this.langDir = '';
     }
 
     static get properties() {
@@ -23,6 +24,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
             lang: {type: String},
             themes: {type: Array, attribute: 'themes'},
             darkModeThemeOverride: {type: String, attribute: 'dark-mode-theme-override'},
+            langDir: {type: String, attribute: 'lang-dir'},
         };
     }
 
@@ -55,6 +57,11 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
             this.loadTheme('light-theme');
             this.detectInitialMode();
         });
+        if (this.langDir) {
+          for(let lng of this._i18n.languages) {
+            setOverridesByGlobalCache(this._i18n, this);
+          }
+        }
     }
 
     detectInitialMode() {
@@ -158,8 +165,8 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
             ${commonStyles.getThemeCSS()}
             ${commonStyles.getGeneralCSS()}
             ${commonStyles.getButtonCSS()}
-           
-            
+
+
             mode-button, button.button {
                 border: none;
             }

toolkit-showcase/assets/theme-switcher.metadata.json

@@ -14,5 +14,5 @@
         "de": "Theme Switcher Web Komponente",
         "en": "Theme-Switcher web component"
     },
-    "subscribe": "lang"
+    "subscribe": "lang, lang-dir"
 }

toolkit-showcase/assets/translation-overrides/de/translation.json

 {
     "dbp-translation": {
       "toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
-      "toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\">interpolation</a> und escaping dargestellt werden."
+      "toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\">interpolation</a> und escaping dargestellt werden.",
+      "color-mode": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
+    },
+    "dbp-theme-switcher": {
+      "color-mode": "Theme ändern"
     }
 }

toolkit-showcase/assets/translation-overrides/en/translation.json

 {
     "dbp-translation": {
       "toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
-      "toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\">interpolation</a> and escaping."
+      "toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\">interpolation</a> and escaping.",
+      "color-mode": "This text is not supposed to be displayed. It is only here for testing."
+    },
+    "dbp-theme-switcher": {
+      "color-mode": "Change theme"
     }
 }