Add more meaningful translation overrides example to toolkit common page

packages/common/dbp-common-demo.js

@@ -310,21 +310,17 @@ html {
                             </div>
                         </dbp-translated>
                     </div>
-                    <div class="control" id="dbp-translation-text">
-                        <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
-                        <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
-                        <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
-                    </div>
                 </div>
                 <div class="content">
                     <h2>Translation Demo</h2>
                     <div class="control" id="dbp-translation-demo">
-                        <dbp-translation subscribe="lang, lang-dir" key="test"></dbp-translation><br/>
-                        <dbp-translation subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation>
+                        <dbp-translation subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation><br/>
+                        <dbp-translation subscribe="lang, lang-dir" key="theme-switcher-demo"></dbp-translation>
                         <dbp-theme-switcher subscribe="lang, lang-dir"
                             themes='[{"class": "light-theme", "icon": "sun", "name": "${this._i18n.t('dbp.themes.light-mode')}"}, {"class": "dark-theme", "icon": "night", "name": "${this._i18n.t('dbp.themes.dark-mode')}"}]'></dbp-theme-switcher>
-                        <dbp-theme-switcher subscribe="lang"
-                            themes='[{"class": "light-theme", "icon": "sun", "name": "${this._i18n.t('translation:dbp.themes.light-mode')}"}, {"class": "dark-theme", "icon": "night", "name": "${this._i18n.t('translation:dbp.themes.dark-mode')}"}]'></dbp-theme-switcher>
+                        <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
+                        <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
+                        <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
                     </div>
                 </div>
             </section>

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

@@ -62,7 +62,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
         });
 
         if(this.langDir != '') {
-          setOverridesByGlobalCache(this._i18n, this);
+            setOverridesByGlobalCache(this._i18n, this);
         }
     }
 

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

@@ -2,11 +2,13 @@
     "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}}\" class=\"link\">interpolation</a> und escaping dargestellt werden.",
-        "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>"
+        "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>",
+        "theme-switcher-demo": "Der Theme-switcher tooltip sollte überschrieben sein: "
     },
     "dbp": {
         "theme-switcher": {
-            "intro": "Mit dem Theme-Switcher können Sie zwischen unterschiedlichen Farb-Themes umschalten, wie z.B. zwischen Light- und Dark Mode."
+            "intro": "Mit dem Theme-Switcher können Sie zwischen unterschiedlichen Farb-Themes umschalten, wie z.B. zwischen Light- und Dark Mode.",
+            "color-mode": "Theme ändern"
         }
     }
 }

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

@@ -2,11 +2,13 @@
     "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}}\" class=\"link\">interpolation</a> and escaping.",
-        "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>"
+        "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>",
+        "theme-switcher-demo": "The theme-switcher tooltip should be overwritten: "
     },
     "dbp": {
         "theme-switcher": {
-            "intro": "With the theme-switcher you can switch between multiple themes. For example, between Light Mode and Dark Mode."
+            "intro": "With the theme-switcher you can switch between multiple themes. For example, between Light Mode and Dark Mode.",
+            "color-mode": "Change theme"
         }
     }
 }