From c5240b2631b20a9d949ced1a76ab31fa69e2d717 Mon Sep 17 00:00:00 2001
From: khaoula-ben-chaabane <khaoula.ben-chaabane@telekom.de>
Date: Thu, 23 May 2024 12:25:45 +0200
Subject: [PATCH] fixed siwtch mode toggle

---
 docs/Overview.md               |  4 ++++
 docusaurus.config.js           |  5 +++++
 src/theme/Navbar/index.js      |  2 +-
 src/theme/Navbar/switchMode.js | 10 ++++++++++
 4 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/theme/Navbar/switchMode.js

diff --git a/docs/Overview.md b/docs/Overview.md
index e04be5e..c94a215 100644
--- a/docs/Overview.md
+++ b/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
diff --git a/docusaurus.config.js b/docusaurus.config.js
index ee53f84..3251190 100644
--- a/docusaurus.config.js
+++ b/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"),
diff --git a/src/theme/Navbar/index.js b/src/theme/Navbar/index.js
index a110ceb..f82e776 100644
--- a/src/theme/Navbar/index.js
+++ b/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>
diff --git a/src/theme/Navbar/switchMode.js b/src/theme/Navbar/switchMode.js
new file mode 100644
index 0000000..eea8df4
--- /dev/null
+++ b/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';
+  });
+}
\ No newline at end of file