fixed siwtch mode toggle

docs/Overview.md

@@ -22,19 +22,23 @@ title: Overview
 ## Smartchat
 
 ![smart chat](smart-chat.png)
+
 SmartChat - an intelligent chat application powered by our LLM endpoints and RAG API. SmartChat allows you to build dynamic conversational interfaces for customer service, internal knowledge bases, and more.
 
 ## LLM Playground
 
 ![llm-playground](playground.png)
+
 Playground: Experiment with different LLMs, Prompt Templates and Documents by providing your API key. 
 
 ## Create-tsi
 
 ![create-tsi](create-tsi.png)
+
 LLM model serving, allowing you to effortlessly query open-source LLM models like Llama3, GPT-4, and Mistral AI models through a simple, OpenAI-compatible API.
 
 ## API Portal
 
 ![api-portal](api-portal.png)
+
 API Portal - Allows you to manage your LLM API Keys and monitor your token usage

docusaurus.config.js

@@ -51,6 +51,11 @@ const config = {
       }),
     ],
   ],
+
+  clientModules: [
+    require.resolve('./src/theme/Navbar/switchMode.js'),
+],
+
   plugins: [
     [
       require.resolve("@easyops-cn/docusaurus-search-local"),

src/theme/Navbar/index.js

@@ -40,7 +40,7 @@ main-nav-aria-label="Main navigation">
 
 
     <scale-telekom-nav-item variant="functions" class="scale-telekom-nav-item hydrated" role="none">
-      <button onclick={() => document.body.dataset.mode = isDark ? 'light' : 'dark'} id="mode-switch" >
+      <button id="mode-switch">
         <scale-badge no-dot="" label="Switch Mode" class="hydrated">
           <scale-icon-action-light-dark-mode accessibility-title="Switch Mode" size="24" class="hydrated" style={{display: "inline-flex"}}></scale-icon-action-light-dark-mode>
         </scale-badge>

src/theme/Navbar/switchMode.js

@@ -0,0 +1,10 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+if (ExecutionEnvironment.canUseDOM) {
+  const element = document.getElementById('mode-switch');
+
+  element.addEventListener('click', function switchMode() {
+    const isDark = document.body.dataset.mode === 'dark';
+    document.body.dataset.mode = isDark ? 'light' : 'dark';
+  });
+}