From 5e303ec48046f24f8bacb748d6384ce28c05fda1 Mon Sep 17 00:00:00 2001
From: karthik05122 <karthikkarthik5122@gmail.com>
Date: Sun, 31 Aug 2025 14:08:42 -0400
Subject: [PATCH 1/5] feat: implement theme toggle system

---
 apps/studio/public/img/logo-studio-white.svg  | 35 +++++++++++++++++++
 .../src/components/Editor/ConvertDropdown.tsx |  8 ++---
 .../src/components/Editor/EditorSidebar.tsx   |  4 +--
 .../components/Editor/GenerateDropdown.tsx    |  8 ++---
 .../src/components/Editor/ImportDropdown.tsx  | 12 +++----
 .../src/components/Editor/MonacoWrapper.tsx   | 19 ++++++++--
 .../src/components/Editor/SaveDropdown.tsx    |  8 ++---
 .../src/components/Editor/ShareButton.tsx     |  2 +-
 .../src/components/Modals/NewFileModal.tsx    |  2 +-
 apps/studio/src/components/Navigation.tsx     | 26 +++++++-------
 apps/studio/src/components/Navigationv3.tsx   | 32 ++++++++---------
 apps/studio/src/components/Sidebar.tsx        | 28 ++++++++++++---
 .../components/Template/TemplateSidebar.tsx   |  4 +--
 .../src/components/Terminal/ProblemsTab.tsx   | 24 ++++++-------
 .../src/components/Terminal/Terminal.tsx      |  2 +-
 .../src/components/Terminal/TerminalTabs.tsx  |  8 ++---
 apps/studio/src/components/Toolbar.tsx        | 11 ++++--
 .../studio/src/components/common/Dropdown.tsx |  2 +-
 apps/studio/tailwind.config.js                |  1 +
 19 files changed, 156 insertions(+), 80 deletions(-)
 create mode 100644 apps/studio/public/img/logo-studio-white.svg

diff --git a/apps/studio/public/img/logo-studio-white.svg b/apps/studio/public/img/logo-studio-white.svg
new file mode 100644
index 000000000..6281ff537
--- /dev/null
+++ b/apps/studio/public/img/logo-studio-white.svg
@@ -0,0 +1,35 @@
+<svg width="75" height="40" viewBox="0 0 128 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.1709 33.6028H8.43181C6.19649 33.5997 4.0536 32.7104 2.47299 31.1298C0.892377 29.5492 0.00304997 27.4063 0 25.1709V8.43182C0.00304997 6.1965 0.892377 4.0536 2.47299 2.47299C4.0536 0.892377 6.19649 0.00304997 8.43181 0H25.1709C27.4065 0.00244118 29.5497 0.891577 31.1304 2.47232C32.7112 4.05307 33.6003 6.19631 33.6028 8.43182V25.1709C33.6003 27.4065 32.7112 29.5497 31.1304 31.1305C29.5497 32.7112 27.4065 33.6003 25.1709 33.6028ZM8.43181 1.84453C6.6855 1.84697 5.01142 2.54177 3.7766 3.7766C2.54177 5.01142 1.84697 6.68551 1.84453 8.43182V25.1709C1.84697 26.9173 2.54177 28.5913 3.7766 29.8262C5.01142 31.061 6.6855 31.7558 8.43181 31.7582H25.1709C26.9173 31.7558 28.5913 31.061 29.8262 29.8262C31.061 28.5913 31.7558 26.9173 31.7582 25.1709V8.43182C31.7558 6.68551 31.061 5.01142 29.8262 3.7766C28.5913 2.54177 26.9173 1.84697 25.1709 1.84453H8.43181Z" fill="url(#paint0_linear_303_636)"/>
+<path d="M11.1756 13.449L10.2302 14.7517L17.613 20.11L17.6614 20.1469L18.6067 18.8442L11.1756 13.449Z" fill="url(#paint1_linear_303_636)"/>
+<path d="M15.9483 13.449L15.003 14.7517L22.4364 20.1469L23.3818 18.8442L15.9483 13.449Z" fill="url(#paint2_linear_303_636)"/>
+<path d="M16.8083 6.78097C12.8057 6.78097 9.55006 9.26879 9.55006 12.3261V12.3883H11.164V12.3261C11.164 10.1565 13.7003 8.39032 16.8129 8.39032C19.9256 8.39032 22.4618 10.1565 22.4618 12.3261V12.3883H24.0758V12.3261C24.0665 9.26879 20.8109 6.78097 16.8083 6.78097Z" fill="url(#paint3_linear_303_636)"/>
+<path d="M22.4456 21.2767C22.4456 23.4463 19.9094 25.2125 16.7945 25.2125C13.6795 25.2125 11.1456 23.4463 11.1456 21.2767V21.2144H9.53161V21.2767C9.53161 24.334 12.7872 26.8218 16.7898 26.8218C20.7925 26.8218 24.0481 24.334 24.0481 21.2767V21.2144H22.4341L22.4456 21.2767Z" fill="url(#paint4_linear_303_636)"/>
+<path d="M51.3426 7.3597C53.0008 7.3597 54.4303 7.70279 55.6311 8.38895C56.8319 9.05606 57.8326 10.0472 58.6331 11.3623L56.7176 12.849C56.0123 11.6292 55.2118 10.7715 54.316 10.2759C53.4392 9.76128 52.3718 9.50397 51.1139 9.50397C50.1037 9.50397 49.265 9.64692 48.5979 9.93282C47.9499 10.2187 47.4734 10.5999 47.1684 11.0764C46.8635 11.5339 46.711 12.058 46.711 12.6489C46.711 13.316 46.9206 13.9069 47.34 14.4215C47.7593 14.9171 48.5979 15.3078 49.8559 15.5937L53.9443 16.5086C55.755 16.9088 57.013 17.5188 57.7182 18.3384C58.4425 19.1389 58.8047 20.1395 58.8047 21.3403C58.8047 22.4077 58.4997 23.3607 57.8898 24.1994C57.2989 25.019 56.4603 25.6575 55.3738 26.1149C54.2874 26.5724 53.0104 26.8011 51.5427 26.8011C50.1704 26.8011 48.9601 26.62 47.9118 26.2579C46.8825 25.8767 45.9962 25.3716 45.2529 24.7426C44.5095 24.1136 43.8996 23.4084 43.4231 22.6269L45.4244 20.9973C45.7866 21.7215 46.2535 22.3601 46.8253 22.9128C47.3971 23.4655 48.0833 23.8944 48.8838 24.1994C49.7034 24.5043 50.6374 24.6568 51.6857 24.6568C52.6577 24.6568 53.4964 24.5424 54.2016 24.3137C54.9259 24.0659 55.4787 23.7133 55.8599 23.2559C56.2411 22.7794 56.4317 22.2076 56.4317 21.5405C56.4317 20.9305 56.2315 20.3873 55.8313 19.9108C55.431 19.4153 54.6781 19.0436 53.5726 18.7958L49.1411 17.7951C47.9785 17.5283 47.035 17.1662 46.3107 16.7087C45.6055 16.2322 45.0909 15.6795 44.7668 15.0505C44.4619 14.4024 44.3094 13.7067 44.3094 12.9634C44.3094 11.9532 44.5858 11.0288 45.1385 10.1901C45.7103 9.33243 46.5204 8.64626 47.5687 8.13164C48.6361 7.61701 49.894 7.3597 51.3426 7.3597Z" fill="black"/>
+<path d="M65.1124 8.16023V22.5697C65.1124 23.2749 65.3125 23.7991 65.7128 24.1422C66.113 24.4853 66.6277 24.6568 67.2566 24.6568C67.8094 24.6568 68.2859 24.5615 68.6862 24.3709C69.0864 24.1803 69.4486 23.923 69.7726 23.599L70.5731 25.5145C70.1347 25.9148 69.6106 26.2293 69.0007 26.458C68.4098 26.6867 67.7236 26.8011 66.9422 26.8011C66.2179 26.8011 65.5412 26.6772 64.9122 26.4294C64.2833 26.1626 63.7782 25.7528 63.397 25.2C63.0348 24.6282 62.8442 23.8849 62.8252 22.97V8.78922L65.1124 8.16023ZM70.3158 12.22V14.1928H65.141H59.9661V12.22H70.3158Z" fill="black"/>
+<path d="M77.4618 26.8011C76.5469 26.8011 75.6797 26.6295 74.8601 26.2865C74.0596 25.9434 73.402 25.3906 72.8874 24.6282C72.3918 23.8467 72.144 22.8366 72.144 21.5976V12.22H74.4312V20.9973C74.4312 22.4458 74.7457 23.4465 75.3747 23.9992C76.0037 24.5329 76.89 24.7998 78.0336 24.7998C78.5673 24.7998 79.0914 24.714 79.6061 24.5424C80.1207 24.3518 80.5781 24.0659 80.9784 23.6847C81.3977 23.2845 81.7217 22.7794 81.9505 22.1695C82.1983 21.5595 82.3221 20.8352 82.3221 19.9966V12.22H84.6094V26.5152H82.608L82.4651 24.3423C81.9695 25.2 81.2929 25.829 80.4352 26.2293C79.5965 26.6105 78.6054 26.8011 77.4618 26.8011Z" fill="black"/>
+<path d="M94.0781 26.8011C92.8964 26.8011 91.8099 26.5056 90.8188 25.9148C89.8277 25.3239 89.0367 24.4757 88.4458 23.3702C87.855 22.2457 87.5595 20.9115 87.5595 19.3676C87.5595 17.7856 87.874 16.4419 88.503 15.3364C89.132 14.2309 89.9611 13.3922 90.9904 12.8204C92.0196 12.2296 93.1251 11.9341 94.3068 11.9341C95.4885 11.9341 96.5083 12.2391 97.366 12.849C98.2427 13.459 98.8241 14.269 99.11 15.2792L98.8241 15.4793V5.64429H101.111V26.5152H99.11L98.9098 23.0558L99.2243 22.8842C99.0909 23.7229 98.7669 24.4376 98.2523 25.0285C97.7567 25.6003 97.1373 26.0387 96.3939 26.3436C95.6696 26.6486 94.8977 26.8011 94.0781 26.8011ZM94.3068 24.7998C95.2217 24.7998 96.0127 24.571 96.6798 24.1136C97.366 23.6561 97.8901 23.0081 98.2523 22.1695C98.6335 21.3117 98.8241 20.3111 98.8241 19.1675C98.8241 18.081 98.6335 17.1471 98.2523 16.3656C97.8901 15.5842 97.3755 14.9838 96.7084 14.5644C96.0604 14.1451 95.2979 13.9355 94.4212 13.9355C92.9726 13.9355 91.8481 14.431 91.0475 15.4222C90.247 16.4133 89.8467 17.7284 89.8467 19.3676C89.8467 21.0068 90.2375 22.3219 91.0189 23.3131C91.8004 24.3042 92.8964 24.7998 94.3068 24.7998Z" fill="black"/>
+<path d="M106.142 9.47538C105.627 9.47538 105.208 9.3229 104.884 9.01794C104.579 8.69391 104.426 8.27459 104.426 7.75997C104.426 7.24534 104.579 6.83555 104.884 6.53058C105.208 6.20656 105.627 6.04455 106.142 6.04455C106.656 6.04455 107.066 6.20656 107.371 6.53058C107.695 6.83555 107.857 7.24534 107.857 7.75997C107.857 8.27459 107.695 8.69391 107.371 9.01794C107.066 9.3229 106.656 9.47538 106.142 9.47538ZM107.285 12.22V26.5152H104.998V12.22H107.285Z" fill="black"/>
+<path d="M117.081 11.9341C118.434 11.9341 119.626 12.2296 120.655 12.8204C121.703 13.4113 122.523 14.269 123.114 15.3936C123.705 16.4991 124 17.8237 124 19.3676C124 20.9115 123.705 22.2457 123.114 23.3702C122.523 24.4757 121.703 25.3239 120.655 25.9148C119.626 26.5056 118.434 26.8011 117.081 26.8011C115.747 26.8011 114.556 26.5056 113.507 25.9148C112.459 25.3239 111.64 24.4757 111.049 23.3702C110.458 22.2457 110.162 20.9115 110.162 19.3676C110.162 17.8237 110.458 16.4991 111.049 15.3936C111.64 14.269 112.459 13.4113 113.507 12.8204C114.556 12.2296 115.747 11.9341 117.081 11.9341ZM117.081 13.9069C116.109 13.9069 115.28 14.1261 114.594 14.5644C113.908 15.0028 113.374 15.6318 112.993 16.4514C112.631 17.2519 112.45 18.224 112.45 19.3676C112.45 20.4922 112.631 21.4642 112.993 22.2838C113.374 23.1034 113.908 23.7324 114.594 24.1708C115.28 24.6092 116.109 24.8283 117.081 24.8283C118.053 24.8283 118.882 24.6092 119.569 24.1708C120.255 23.7324 120.779 23.1034 121.141 22.2838C121.522 21.4642 121.713 20.4922 121.713 19.3676C121.713 18.224 121.522 17.2519 121.141 16.4514C120.779 15.6318 120.255 15.0028 119.569 14.5644C118.882 14.1261 118.053 13.9069 117.081 13.9069Z" fill="black"/>
+<defs>
+<linearGradient id="paint0_linear_303_636" x1="34" y1="-1.19783e-08" x2="1.19784e-08" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7A7DB"/>
+<stop offset="1" stop-color="#DE1978"/>
+</linearGradient>
+<linearGradient id="paint1_linear_303_636" x1="34" y1="-1.19783e-08" x2="1.19784e-08" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7A7DB"/>
+<stop offset="1" stop-color="#DE1978"/>
+</linearGradient>
+<linearGradient id="paint2_linear_303_636" x1="34" y1="-1.19783e-08" x2="1.19784e-08" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7A7DB"/>
+<stop offset="1" stop-color="#DE1978"/>
+</linearGradient>
+<linearGradient id="paint3_linear_303_636" x1="34" y1="-1.19783e-08" x2="1.19784e-08" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7A7DB"/>
+<stop offset="1" stop-color="#DE1978"/>
+</linearGradient>
+<linearGradient id="paint4_linear_303_636" x1="34" y1="-1.19783e-08" x2="1.19784e-08" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7A7DB"/>
+<stop offset="1" stop-color="#DE1978"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/studio/src/components/Editor/ConvertDropdown.tsx b/apps/studio/src/components/Editor/ConvertDropdown.tsx
index f9961060e..18a279f8d 100644
--- a/apps/studio/src/components/Editor/ConvertDropdown.tsx
+++ b/apps/studio/src/components/Editor/ConvertDropdown.tsx
@@ -24,11 +24,11 @@ export const ConvertDropdown: React.FC = () => {
           </button>
         </Tooltip>
       }
-      buttonHoverClassName="text-gray-500 hover:text-white"
+      buttonHoverClassName="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white"
       dataTest="button-convert-dropdown"
     >
-      <ul className="bg-gray-800 text-md text-white">
-        <li className="hover:bg-gray-900">
+      <ul className="bg-slate-200 dark:bg-gray-800 text-md text-black dark:text-white">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
@@ -62,7 +62,7 @@ export const ConvertDropdown: React.FC = () => {
             Convert to {language === 'yaml' ? 'JSON' : 'YAML'}
           </button>
         </li>
-        <li className="hover:bg-gray-900">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
diff --git a/apps/studio/src/components/Editor/EditorSidebar.tsx b/apps/studio/src/components/Editor/EditorSidebar.tsx
index 79a049ecf..e7e16f361 100644
--- a/apps/studio/src/components/Editor/EditorSidebar.tsx
+++ b/apps/studio/src/components/Editor/EditorSidebar.tsx
@@ -27,11 +27,11 @@ export const EditorSidebar: React.FunctionComponent<
 
   return (
     <div
-      className="flex flex-row items justify-between bg-gray-800 border-b border-gray-700 text-sm"
+      className="flex flex-row items justify-between bg-slate-200 dark:bg-gray-800 border-b border-black dark:border-gray-700 text-sm"
       style={{ height: '30px', lineHeight: '30px' }}
     >
       <div
-        className="ml-2 text-gray-500 text-xs italic"
+        className="ml-2 text-gray-700 dark:text-gray-500 text-xs italic"
         style={{ height: '30px', lineHeight: '30px' }}
       >
         {documentFromText}
diff --git a/apps/studio/src/components/Editor/GenerateDropdown.tsx b/apps/studio/src/components/Editor/GenerateDropdown.tsx
index 11954ba78..ff48e2d61 100644
--- a/apps/studio/src/components/Editor/GenerateDropdown.tsx
+++ b/apps/studio/src/components/Editor/GenerateDropdown.tsx
@@ -23,11 +23,11 @@ export const GenerateDropdown: React.FC = () => {
           </button>
         </Tooltip>
       }
-      buttonHoverClassName="text-gray-500 hover:text-white"
+      buttonHoverClassName="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white"
       dataTest="button-generate-dropdown"
     >
-      <ul className="bg-gray-800 text-md text-white">
-        <li className="hover:bg-gray-900">
+      <ul className="bg-slate-200 dark:bg-gray-800 text-md text-black dark:text-white">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
@@ -38,7 +38,7 @@ export const GenerateDropdown: React.FC = () => {
                 Generate code/docs
           </button>
         </li>
-        <li className="hover:bg-gray-900">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button 
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
diff --git a/apps/studio/src/components/Editor/ImportDropdown.tsx b/apps/studio/src/components/Editor/ImportDropdown.tsx
index 61981f6b7..3ede274c3 100644
--- a/apps/studio/src/components/Editor/ImportDropdown.tsx
+++ b/apps/studio/src/components/Editor/ImportDropdown.tsx
@@ -24,11 +24,11 @@ export const ImportDropdown: React.FC = () => {
           </button>
         </Tooltip>
       }
-      buttonHoverClassName="text-gray-500 hover:text-white"
+      buttonHoverClassName="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white"
       dataTest="button-import-dropdown"
     >
-      <ul className="bg-gray-800 text-md text-white">
-        <li className="hover:bg-gray-900">
+      <ul className="bg-slate-200 dark:bg-gray-800 text-md text-black dark:text-white">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
@@ -39,7 +39,7 @@ export const ImportDropdown: React.FC = () => {
           </button>
         </li>
 
-        <li className="hover:bg-gray-900">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <label
             className="block px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 cursor-pointer"
             title="Import File"
@@ -72,7 +72,7 @@ export const ImportDropdown: React.FC = () => {
           </label>
         </li>
 
-        <li className="hover:bg-gray-900">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
@@ -83,7 +83,7 @@ export const ImportDropdown: React.FC = () => {
           </button>
         </li>
 
-        <li className="hover:bg-gray-900">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
diff --git a/apps/studio/src/components/Editor/MonacoWrapper.tsx b/apps/studio/src/components/Editor/MonacoWrapper.tsx
index 0c47b4a18..7c1f3c135 100644
--- a/apps/studio/src/components/Editor/MonacoWrapper.tsx
+++ b/apps/studio/src/components/Editor/MonacoWrapper.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useMemo, FunctionComponent } from 'react';
+import { useState, useEffect, useMemo, FunctionComponent } from 'react';
 import MonacoEditor from '@monaco-editor/react';
 
 import { debounce } from '@/helpers';
@@ -11,6 +11,21 @@ import type { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
 export const MonacoWrapper: FunctionComponent<MonacoEditorProps> = ({
   ...props
 }) => {
+
+  const [isDark, setIsDark] = useState(
+  typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+);
+
+useEffect(() => {
+  const observer = new MutationObserver(() => {
+    setIsDark(document.documentElement.classList.contains('dark'));
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+  return () => observer.disconnect();
+}, []);
   const { editorSvc, parserSvc } = useServices();
   const { autoSaving, savingDelay } = useSettingsState(state => state.editor);
   const file = useFilesState(state => state.files['asyncapi']);
@@ -27,7 +42,7 @@ export const MonacoWrapper: FunctionComponent<MonacoEditorProps> = ({
     <MonacoEditor
       language={file.language}
       defaultValue={file.content}
-      theme="asyncapi-theme"
+      theme={isDark ? 'asyncapi-theme' : 'vs'}
       onMount={editorSvc.onDidCreate.bind(editorSvc)}
       onChange={onChange}
       options={{
diff --git a/apps/studio/src/components/Editor/SaveDropdown.tsx b/apps/studio/src/components/Editor/SaveDropdown.tsx
index f26142df8..f7d1d6ec0 100644
--- a/apps/studio/src/components/Editor/SaveDropdown.tsx
+++ b/apps/studio/src/components/Editor/SaveDropdown.tsx
@@ -22,11 +22,11 @@ export const SaveDropdown: React.FC = () => {
           </button>
         </Tooltip>
       }
-      buttonHoverClassName="text-gray-500 hover:text-white"
+      buttonHoverClassName="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white"
       dataTest="button-save-dropdown"
     >
-      <ul className="bg-gray-800 text-md text-white">
-        <li className="hover:bg-gray-900">
+      <ul className="bg-slate-200 dark:bg-gray-800 text-md text-black dark:text-white">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
@@ -60,7 +60,7 @@ export const SaveDropdown: React.FC = () => {
             Save as {language === 'yaml' ? 'YAML' : 'JSON'}
           </button>
         </li>
-        <li className="hover:bg-gray-900">
+        <li className="hover:bg-slate-300 dark:hover:bg-gray-900">
           <button
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
diff --git a/apps/studio/src/components/Editor/ShareButton.tsx b/apps/studio/src/components/Editor/ShareButton.tsx
index 0b3ab7000..4951939de 100644
--- a/apps/studio/src/components/Editor/ShareButton.tsx
+++ b/apps/studio/src/components/Editor/ShareButton.tsx
@@ -26,7 +26,7 @@ export const ShareButton: React.FunctionComponent<ShareButtonProps> = () => {
   return (
     <Tooltip content={'Share link'} placement="top" hideOnClick={true}>
       <button className="bg-inherit" onClick={handleShare} data-test="button-share">
-        <FaShareAlt className="text-gray-500 hover:text-white" />
+        <FaShareAlt className="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white" />
       </button>
     </Tooltip>
   );
diff --git a/apps/studio/src/components/Modals/NewFileModal.tsx b/apps/studio/src/components/Modals/NewFileModal.tsx
index a2bc2d89b..fd86fd7f0 100644
--- a/apps/studio/src/components/Modals/NewFileModal.tsx
+++ b/apps/studio/src/components/Modals/NewFileModal.tsx
@@ -20,7 +20,7 @@ interface TemplateListItemProps {
 
 const TemplateListItem: FunctionComponent<TemplateListItemProps> = ({ title, description: Description, onClick, isSelected }) => {
   const containerStyles = isSelected ? 'border-pink-500' : 'border-gray-200';
-  const textStyles = isSelected ? 'text-pink-600' : 'text-gray-600';
+  const textStyles = isSelected ? 'text-pink-600' : 'text-slate-200 dark:text-gray-600';
 
   return (
     <button onClick={onClick} key={title} className={`group text-left flex flex-col cursor-pointer rounded-lg p-4 pb-6 border-2 hover:border-pink-500 ${containerStyles}`}>
diff --git a/apps/studio/src/components/Navigation.tsx b/apps/studio/src/components/Navigation.tsx
index ba98c9f5b..a03a24cda 100644
--- a/apps/studio/src/components/Navigation.tsx
+++ b/apps/studio/src/components/Navigation.tsx
@@ -27,7 +27,7 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'servers' ? 'bg-gray-800' : ''
+          hash === 'servers' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo('/servers', 'servers')
@@ -45,7 +45,7 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
           return <li
             key={serverName}
             className={`${NAVIGATION_SUB_SECTION_STYLE} ${
-              hash === `server-${serverName}` ? 'bg-gray-800' : ''
+              hash === `server-${serverName}` ? 'bg-white dark:bg-gray-800' : ''
             }`}
             onClick={() =>
               navigationSvc.scrollTo(
@@ -97,7 +97,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
           <li
             key={`${channelName}-publish`}
             className={`${NAVIGATION_SUB_SECTION_STYLE} ${
-              hash === `operation-publish-${channelName}` ? 'bg-gray-800' : ''
+              hash === `operation-publish-${channelName}` ? 'bg-white dark:bg-gray-800' : ''
             }`}
             onClick={() =>
               navigationSvc.scrollTo(
@@ -129,7 +129,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
           <li
             key={`${channelName}-subscribe`}
             className={`${NAVIGATION_SUB_SECTION_STYLE} ${
-              hash === `operation-subscribe-${channelName}` ? 'bg-gray-800' : ''
+              hash === `operation-subscribe-${channelName}` ? 'bg-white dark:bg-gray-800' : ''
             }`}
             onClick={() =>
               navigationSvc.scrollTo(
@@ -165,7 +165,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'operations' ? 'bg-gray-800' : ''
+          hash === 'operations' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -200,7 +200,7 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
       return <li
         key={messageName}
         className={`${NAVIGATION_SUB_SECTION_STYLE} truncate ${
-          hash === `message-${messageName}` ? 'bg-gray-800' : ''
+          hash === `message-${messageName}` ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -225,7 +225,7 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'messages' ? 'bg-gray-800' : ''
+          hash === 'messages' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -260,7 +260,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
       return <li
         key={schemaName}
         className={`${NAVIGATION_SUB_SECTION_STYLE} truncate ${
-          hash === `schema-${schemaName}` ? 'bg-gray-800' : ''
+          hash === `schema-${schemaName}` ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -285,7 +285,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'schemas' ? 'bg-gray-800' : ''
+          hash === 'schemas' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -343,11 +343,11 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
 
   if (!rawSpec || !document) {
     return (
-      <div className="flex flex-1 overflow-hidden h-full justify-center items-center text-2xl mx-auto px-6 text-center bg-gray-800">
+      <div className="flex flex-1 overflow-hidden h-full justify-center items-center text-2xl mx-auto px-6 text-center bg-white dark:bg-gray-800">
         {loading ?(
           <div className="rotating-wheel"></div>
         ) : (
-          <p className='text-white'>Empty or invalid document. Please fix errors/define AsyncAPI document.</p>
+          <p className='text-black dark:text-white'>Empty or invalid document. Please fix errors/define AsyncAPI document.</p>
         )
         }
       </div>
@@ -356,12 +356,12 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
 
   const components = document.components();
   return (
-    <div className={`flex flex-none flex-col overflow-y-auto overflow-x-hidden bg-gray-800 h-full ${className}`}>
+    <div className={`flex flex-none flex-col overflow-y-auto overflow-x-hidden bg-white dark:bg-gray-800 h-full ${className}`}>
       <ul>
         <li className="mb-4">
           <div
             className={`${NAVIGATION_SECTION_STYLE} ${
-              hash === 'introduction' ? 'bg-gray-800' : ''
+              hash === 'introduction' ? 'bh-white dark:bg-gray-800' : ''
             }`}
             onClick={() =>
               navigationSvc.scrollTo(
diff --git a/apps/studio/src/components/Navigationv3.tsx b/apps/studio/src/components/Navigationv3.tsx
index 3efe8143a..f9d0b1896 100644
--- a/apps/studio/src/components/Navigationv3.tsx
+++ b/apps/studio/src/components/Navigationv3.tsx
@@ -17,8 +17,8 @@ interface NavigationSectionProps {
   hash: string;
 }
 
-export const NAVIGATION_SUB_SECTION_STYLE = 'p-2 pl-6 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900';
-export const NAVIGATION_SECTION_STYLE = 'p-2 pl-3 text-white cursor-pointer hover:bg-gray-900'
+export const NAVIGATION_SUB_SECTION_STYLE = 'p-2 pl-6 text-black dark:text-white cursor-pointer text-xs border-t border-black hover:bg-slate-300 dark:border-gray-700 dark:hover:bg-gray-900';
+export const NAVIGATION_SECTION_STYLE = 'p-2 pl-3 text-black dark:text-white cursor-pointer hover:bg-slate-300 dark:hover:bg-gray-900'
 
 const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
   document,
@@ -30,7 +30,7 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'servers' ? 'bg-gray-800' : ''
+          hash === 'servers' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo('/servers', 'servers')
@@ -49,7 +49,7 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
             tabIndex={0}
             key={serverName}
             className={`${NAVIGATION_SUB_SECTION_STYLE} ${
-              hash === `server-${serverName}` ? 'bg-gray-800' : ''
+              hash === `server-${serverName}` ? 'bg-white dark:bg-gray-800' : ''
             }`}
             onClick={() =>
               navigationSvc.scrollTo(
@@ -92,7 +92,7 @@ const ChannelsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
       return  <li
         key={channel.id()}
         className={`${NAVIGATION_SUB_SECTION_STYLE} ${
-          hash === `channels-${channel.id()}` ? 'bg-gray-800' : ''
+          hash === `channels-${channel.id()}` ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -125,7 +125,7 @@ const ChannelsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'channels' ? 'bg-gray-800' : ''
+          hash === 'channels' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -163,7 +163,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
           <li
             key={operation.id()}
             className={`${NAVIGATION_SUB_SECTION_STYLE} ${
-              hash === `operation-receive-${operation.id()}` ? 'bg-gray-800' : ''
+              hash === `operation-receive-${operation.id()}` ? 'bg-white dark:bg-gray-800' : ''
             }`}
             onClick={() =>
               navigationSvc.scrollTo(
@@ -195,7 +195,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
           <li
             key={`${operation.id()}-send`}
             className={`${NAVIGATION_SUB_SECTION_STYLE} ${
-              hash === `operation-send-${operation.id()}` ? 'bg-gray-800' : ''
+              hash === `operation-send-${operation.id()}` ? 'bg-white dark:bg-gray-800' : ''
             }`}
             onClick={() =>
               navigationSvc.scrollTo(
@@ -231,7 +231,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'operations' ? 'bg-gray-800' : ''
+          hash === 'operations' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -266,7 +266,7 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
       return <li
         key={messageName}
         className={`${NAVIGATION_SUB_SECTION_STYLE} truncate ${
-          hash === `message-${messageName}` ? 'bg-gray-800' : ''
+          hash === `message-${messageName}` ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -291,7 +291,7 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'messages' ? 'bg-gray-800' : ''
+          hash === 'messages' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -326,7 +326,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
       return <li
         key={schemaName}
         className={`${NAVIGATION_SUB_SECTION_STYLE} truncate ${
-          hash === `schema-${schemaName}` ? 'bg-gray-800' : ''
+          hash === `schema-${schemaName}` ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -351,7 +351,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
     <>
       <div
         className={`${NAVIGATION_SECTION_STYLE} ${
-          hash === 'schemas' ? 'bg-gray-800' : ''
+          hash === 'schemas' ? 'bg-white dark:bg-gray-800' : ''
         }`}
         onClick={() =>
           navigationSvc.scrollTo(
@@ -398,7 +398,7 @@ export const Navigationv3: React.FunctionComponent<NavigationProps> = ({
 
   if (!rawSpec || !document) {
     return (
-      <div className="flex overflow-hidden bg-gray-800 h-full justify-center items-center text-center text-white text-md px-6">
+      <div className="flex overflow-hidden bg-white dark:bg-gray-800 h-full justify-center items-center text-center text-black dark:text-white text-md px-6">
         Empty or invalid document. Please fix errors/define AsyncAPI document.
       </div>
     );
@@ -406,12 +406,12 @@ export const Navigationv3: React.FunctionComponent<NavigationProps> = ({
 
   const components = document.components();
   return (
-    <div className={`flex flex-none flex-col overflow-y-auto overflow-x-hidden bg-gray-800 h-full ${className}`} id="navigation-panel">
+    <div className={`flex flex-none flex-col overflow-y-auto overflow-x-hidden bg-white dark:bg-gray-800 h-full ${className}`} id="navigation-panel">
       <ul>
         <li className="mb-4">
           <div
             className={`${NAVIGATION_SECTION_STYLE} ${
-              hash === 'introduction' ? 'bg-gray-800' : ''
+              hash === 'introduction' ? 'bg-white dark:bg-gray-800' : ''
             }`}
             onClick={() =>
               navigationSvc.scrollTo(
diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx
index f1095a2ce..067030e11 100644
--- a/apps/studio/src/components/Sidebar.tsx
+++ b/apps/studio/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile, VscSettingsGear, VscPlayCircle } from 'react-icons/vsc';
+import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile, VscSettingsGear, VscPlayCircle, VscSymbolColor } from 'react-icons/vsc';
 import { show as showModal } from '@ebay/nice-modal-react';
 
 import { Tooltip } from './common';
@@ -53,6 +53,14 @@ interface NavItem {
 interface SidebarProps {}
 
 export const Sidebar: FunctionComponent<SidebarProps> = () => {
+  const [darkMode, setDarkMode] = useState(false);
+
+    useEffect(() => {
+    window.document.documentElement.classList.toggle('dark', darkMode);
+    console.log('Dark mode is now', darkMode ? 'enabled' : 'disabled');
+  }, [darkMode]);
+
+
   const { show, secondaryPanelType } = usePanelsState();
   const [document, hasErrors] = useDocumentsState((state) => [
     state.documents['asyncapi']?.document,
@@ -106,6 +114,16 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       enabled: !isV3,
       dataTest: 'button-blocks-visualiser',
     },
+    {
+      name: 'Light/Dark Theme',
+      title: 'Light/Dark Theme',
+      isActive: true,
+      onClick: () => setDarkMode(prev => !prev),
+      icon: <VscSymbolColor className='w-5 h-5' />,
+      tooltip: 'Toggle Light/Dark Theme',
+      enabled: true,
+      dataTest: 'button-light-dark-theme',
+    },
     // newFile
     {
       name: 'newFile',
@@ -138,7 +156,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
   }
   
   return (
-    <div className="flex flex-col bg-gray-800 shadow-lg border-r border-gray-700 justify-between" id="sidebar">
+    <div className="flex flex-col bg-slate-300 dark:bg-gray-800 shadow-lg border-r border-black dark:border-gray-700 justify-between" id="sidebar">
       <div className="flex flex-col">
         {navigation.map(item => (
           <Tooltip content={item.tooltip} placement='right' hideOnClick={true} key={item.name}>
@@ -148,7 +166,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
               type="button"
               data-test={item.dataTest}
             >
-              <div className={item.isActive ? 'bg-gray-600 p-2 rounded text-white' : 'p-2 text-gray-500 hover:text-white'}>
+              <div className={item.isActive ? 'bg-white text-black dark:bg-gray-600 p-2 rounded dark:text-white' : 'p-2 text-black hover:text-slate-600 dark:text-gray-500 dark:hover:text-white'}>
                 {item.icon}
               </div>
             </button>
@@ -159,7 +177,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
         <Tooltip content='Start Tour' placement='right' hideOnClick={true}>
           <button
             title="Start Tour"  
-            className='flex text-gray-500 hover:text-white focus:outline-none border-box p-4'
+            className='flex text-black hover:text-slate-600 dark:text-gray-500 dark:hover:text-white focus:outline-none border-box p-4'
             type="button"  
             onClick={driverTourHandler}
           >
@@ -168,7 +186,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
         </Tooltip>
         <Tooltip content='Studio settings' placement='right' hideOnClick={true}>
           <button
-            className='flex text-gray-500 hover:text-white focus:outline-none border-box p-4'
+            className='flex text-black hover:text-slate-600 dark:text-gray-500 dark:hover:text-white focus:outline-none border-box p-4'
             type="button"  
             onClick={() => showModal(SettingsModal)}
             id="studio-setting"
diff --git a/apps/studio/src/components/Template/TemplateSidebar.tsx b/apps/studio/src/components/Template/TemplateSidebar.tsx
index bfd9a6e95..856d1128a 100644
--- a/apps/studio/src/components/Template/TemplateSidebar.tsx
+++ b/apps/studio/src/components/Template/TemplateSidebar.tsx
@@ -10,13 +10,13 @@ export const TemplateSidebar: React.FunctionComponent<TemplateSidebarProps> = ()
 
   return (
     <div
-      className="flex flex-row items justify-between bg-gray-800 border-b border-gray-700 text-sm"
+      className="flex flex-row items justify-between bg-slate-200 dark:bg-gray-800 border-b border-black dark:border-gray-700 text-sm"
       style={{ height: '30px', lineHeight: '30px' }}
     >
       {autoRendering ? (
         <div />
       ) : (
-        <div className="ml-2 text-gray-500 text-xs flex" style={{ height: '30px', lineHeight: '30px' }}>
+        <div className="ml-2 text-slate-200 dark:text-gray-500 text-xs flex" style={{ height: '30px', lineHeight: '30px' }}>
           <button type="button" className="text-xs" onClick={() => otherState.setState({ templateRerender: true })}>
             <div className="inline-block">
               <VscRefresh className="w-4 h-4 mt-1" />
diff --git a/apps/studio/src/components/Terminal/ProblemsTab.tsx b/apps/studio/src/components/Terminal/ProblemsTab.tsx
index f54d04015..f3490588c 100644
--- a/apps/studio/src/components/Terminal/ProblemsTab.tsx
+++ b/apps/studio/src/components/Terminal/ProblemsTab.tsx
@@ -130,8 +130,8 @@ const SeverityButtons: FunctionComponent<SeverityButtonsProps> = ({ active, setA
   const informationTooltip = createProperMessage(!governanceShowState.informations, active, DiagnosticSeverity.Information, 'Show information messages', 'Hide information messages', 'Show only information messages');
   const hintsTooltip = createProperMessage(!governanceShowState.hints, active, DiagnosticSeverity.Hint, 'Show hints', 'Hide hints', 'Show only hints');
 
-  const activeBg = 'bg-gray-900';
-  const notActiveBg = 'bg-gray-700';
+  const activeBg = 'bg-white dark:bg-gray-900';
+  const notActiveBg = 'bg-slate-300 dark:bg-gray-700';
 
   return (
     <ul className='flex flex-row items-center'>
@@ -139,7 +139,7 @@ const SeverityButtons: FunctionComponent<SeverityButtonsProps> = ({ active, setA
         <li>
           <button
             type="button"
-            className={`disabled:cursor-not-allowed w-full inline-flex justify-center rounded-l-md border border-transparent shadow-xs px-2 py-1 ${active.some(s => s === DiagnosticSeverity.Error) ? activeBg : notActiveBg} text-xs font-medium text-white hover:bg-gray-900 disabled:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-700`}
+            className={`disabled:cursor-not-allowed w-full inline-flex justify-center rounded-l-md border border-transparent shadow-xs px-2 py-1 ${active.some(s => s === DiagnosticSeverity.Error) ? activeBg : notActiveBg} text-xs font-medium text-black dark:text-white hover:bg-slate-200 dark:hover:bg-gray-900 disabled:bg-gray-300 dark:disabled:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-neutral-400 dark:focus:ring-gray-700`}
             onClick={() => setActive(DiagnosticSeverity.Error)}
           >
             <div className='flex flex-row items-center justify-center'>
@@ -153,7 +153,7 @@ const SeverityButtons: FunctionComponent<SeverityButtonsProps> = ({ active, setA
         <li>
           <button
             type="button"
-            className={`disabled:cursor-not-allowed w-full inline-flex justify-center border border-transparent shadow-xs px-2 py-1 ml-px ${governanceShowState.warnings && active.some(s => s === DiagnosticSeverity.Warning) ? activeBg : notActiveBg} text-xs font-medium text-white hover:bg-gray-900 disabled:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-700`}
+            className={`disabled:cursor-not-allowed w-full inline-flex justify-center border border-transparent shadow-xs px-2 py-1 ml-px ${governanceShowState.warnings && active.some(s => s === DiagnosticSeverity.Warning) ? activeBg : notActiveBg} text-xs font-medium text-black dark:text-white hover:bg-slate-300 dark:hover:bg-gray-900 disabled:bg-slate-400 dark:disabled:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-neutral-400 dark:focus:ring-gray-700`}
             onClick={() => setActive(DiagnosticSeverity.Warning)}
             disabled={!governanceShowState.warnings}
           >
@@ -168,7 +168,7 @@ const SeverityButtons: FunctionComponent<SeverityButtonsProps> = ({ active, setA
         <li>
           <button
             type="button"
-            className={`disabled:cursor-not-allowed w-full inline-flex justify-center border border-transparent shadow-xs px-2 py-1 ml-px ${governanceShowState.informations && active.some(s => s === DiagnosticSeverity.Information) ? activeBg : notActiveBg} text-xs font-medium text-white hover:bg-gray-900 disabled:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-700`}
+            className={`disabled:cursor-not-allowed w-full inline-flex justify-center border border-transparent shadow-xs px-2 py-1 ml-px ${governanceShowState.informations && active.some(s => s === DiagnosticSeverity.Information) ? activeBg : notActiveBg} text-xs font-medium text-black dark:text-white hover:bg-slate-300 dark:hover:bg-gray-900 disabled:bg-neutral-400 dark:disabled:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-neutral-400 dark:focus:ring-gray-700`}
             onClick={() => setActive(DiagnosticSeverity.Information)}
             disabled={!governanceShowState.informations}
           >
@@ -183,7 +183,7 @@ const SeverityButtons: FunctionComponent<SeverityButtonsProps> = ({ active, setA
         <li>
           <button
             type="button"
-            className={`disabled:cursor-not-allowed w-full inline-flex justify-center rounded-r-md border border-transparent shadow-xs px-2 py-1 ml-px ${governanceShowState.hints && active.some(s => s === DiagnosticSeverity.Hint) ? activeBg : notActiveBg} text-xs font-medium text-white hover:bg-gray-900 disabled:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-700`}
+            className={`disabled:cursor-not-allowed w-full inline-flex justify-center rounded-r-md border border-transparent shadow-xs px-2 py-1 ml-px ${governanceShowState.hints && active.some(s => s === DiagnosticSeverity.Hint) ? activeBg : notActiveBg} text-xs font-medium text-black dark:text-white hover:bg-slate-300 dark:hover:bg-gray-900 disabled:bg-neutral-300 dark:disabled:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-neutral-300 dark:focus:ring-gray-700`}
             onClick={() => setActive(DiagnosticSeverity.Hint)}
             disabled={!governanceShowState.hints}
           >
@@ -230,14 +230,14 @@ export const ProblemsTabContent: FunctionComponent<ProblemsTabProps> = () => {
   }, [diagnostics, search, active]);
 
   return (
-    <div className="flex-1 text-white text-xs h-full relative overflow-x-hidden overflow-y-auto">
+    <div className="flex-1 text-black dark:text-white text-xs h-full relative overflow-x-hidden overflow-y-auto">
       <div className="px-4 pt-2">
         <div className='pb-2 flex flex-row items-center'>
           <SeverityButtons active={active} setActive={setActiveFn} />
-          <div className='ml-2 flex-1 flex flex-row items-center justify-center rounded-md border border-transparent shadow-xs px-2 py-1 bg-gray-700 text-xs font-medium'>
+          <div className='ml-2 flex-1 flex flex-row items-center justify-center rounded-md border border-transparent shadow-xs px-2 py-1 bg-slate-200 dark:bg-gray-700 text-xs font-medium'>
             <VscSearch />
-            <input ref={inputRef} placeholder='Filter diagnostics...' className='w-full bg-gray-700 border-transparent ml-2 focus:border-transparent focus:ring-0 focus:outline-none' onChange={debounce((e) => setSearch(e.target.value), 250)} />
-            <button type='button' className={`hover:bg-gray-900 rounded-sm border border-transparent ${search ? 'opacity-100' : 'opacity-0'}`} onClick={() => {
+            <input ref={inputRef} placeholder='Filter diagnostics...' className='w-full bg-slate-200 dark:bg-gray-700 border-transparent ml-2 focus:border-transparent focus:ring-0 focus:outline-none' onChange={debounce((e) => setSearch(e.target.value), 250)} />
+            <button type='button' className={`hover:bg-neutral-300 dark:hover:bg-gray-900 rounded-sm border border-transparent ${search ? 'opacity-100' : 'opacity-0'}`} onClick={() => {
               if (inputRef.current) {
                 inputRef.current.value = '';
               }
@@ -249,7 +249,7 @@ export const ProblemsTabContent: FunctionComponent<ProblemsTabProps> = () => {
           <Tooltip content="Settings" hideOnClick={true}>
             <button
               type="button"
-              className={'justify-center border border-transparent shadow-xs px-2 py-1 ml-2 text-xs rounded-md font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-700'}
+              className={'justify-center border border-transparent shadow-xs px-2 py-1 ml-2 text-xs rounded-md font-medium text-black dark:text-white hover:bg-neutral-300 dark:hover:bg-gray-900 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-300 dark:focus:ring-gray-700'}
               onClick={() => modal.show({ activeTab: 'governance' })}
             >
               <VscSettingsGear className='w-4 h-4' />
@@ -270,7 +270,7 @@ export const ProblemsTabContent: FunctionComponent<ProblemsTabProps> = () => {
               const { severity, message, range } = diagnostic;
 
               return (
-                <tr key={id} className="border-t border-gray-700">
+                <tr key={id} className="border-t border-black dark:border-gray-700">
                   <td className="px-2 py-1 text-right"><SeverityIcon severity={severity} /></td>
                   <td
                     className="px-2 py-1 cursor-pointer"
diff --git a/apps/studio/src/components/Terminal/Terminal.tsx b/apps/studio/src/components/Terminal/Terminal.tsx
index e607108e2..11f6a98d8 100644
--- a/apps/studio/src/components/Terminal/Terminal.tsx
+++ b/apps/studio/src/components/Terminal/Terminal.tsx
@@ -15,7 +15,7 @@ export const Terminal: React.FunctionComponent<TerminalProps> = () => {
   ];
 
   return (
-    <div className="bg-gray-800 border-t border-gray-700 flex-grow relative h-full overflow-hidden" id="terminal">
+    <div className="bg-slate-200 dark:bg-gray-800 border-t border-black dark:border-gray-700 flex-grow relative h-full overflow-hidden" id="terminal">
       <TerminalTabs tabs={tabs} active="problems" />
     </div>
   );
diff --git a/apps/studio/src/components/Terminal/TerminalTabs.tsx b/apps/studio/src/components/Terminal/TerminalTabs.tsx
index 47296a5a7..4f043034e 100644
--- a/apps/studio/src/components/Terminal/TerminalTabs.tsx
+++ b/apps/studio/src/components/Terminal/TerminalTabs.tsx
@@ -55,7 +55,7 @@ export const TerminalTabs: React.FunctionComponent<TerminalTabsProps> = ({
   return (
     <div>
       <div
-        className="flex flex-row justify-between items-center px-2 border-b border-gray-700 text-white uppercase font-bold text-xs cursor-pointer"
+        className="flex flex-row justify-between items-center px-2 border-b border-black text-black dark:border-gray-700 dark:text-white uppercase font-bold text-xs cursor-pointer"
         onClick={onTerminalTabClickHandler}
         tabIndex={0}
         onKeyDown={onTerminalTabClickHandler}
@@ -70,10 +70,10 @@ export const TerminalTabs: React.FunctionComponent<TerminalTabsProps> = ({
               onKeyDown={() => setActiveTab(tab.name)}
             >
               <div
-                className={`py-2 hover:text-white ${
+                className={`py-2 hover:text-slate-400 dark:hover:text-white ${
                   activeTab === tab.name
-                    ? 'text-white border-b border-white'
-                    : 'text-gray-500'
+                    ? 'text-black dark:text-white border-b border-black dark:border-white'
+                    : 'text-slate-500 dark:text-gray-500'
                 }`}
               >
                 {tab.tab}
diff --git a/apps/studio/src/components/Toolbar.tsx b/apps/studio/src/components/Toolbar.tsx
index 80afbb661..c12e0bfb8 100644
--- a/apps/studio/src/components/Toolbar.tsx
+++ b/apps/studio/src/components/Toolbar.tsx
@@ -4,16 +4,23 @@ import { IoGlobeOutline, IoLogoGithub, IoLogoSlack } from 'react-icons/io5';
 export function Toolbar() {
   return (
     <div>
-      <div className="px-2 border-b border-gray-700 bg-gray-800">
+      <div className="px-2 border-b border-black bg-slate-200 dark:border-gray-700 dark:bg-gray-800">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center" data-test="logo">
             <div className="flex-shrink-0 ml-1.5">
               <img
-                className="inline-block h-16"
+                className="hidden h-16 dark:inline-block"
                 src={`${process.env.PUBLIC_URL || ''}/img/logo-studio.svg`}
                 title="AsyncAPI Logo"
                 alt="AsyncAPI Logo"
               />
+              <img
+                className="inline-block h-16 dark:hidden"
+                src={`${process.env.PUBLIC_URL || ''}/img/logo-studio-white.svg`}
+                title="AsyncAPI Logo"
+                alt="AsyncAPI Logo"
+              />
+
               <span className="inline-block text-xs text-teal-500 font-normal ml-1 tracking-wider uppercase" style={{ transform: 'translateY(0.3125rem)' }}>
                 beta
               </span>
diff --git a/apps/studio/src/components/common/Dropdown.tsx b/apps/studio/src/components/common/Dropdown.tsx
index e8e738110..14a25d5b0 100644
--- a/apps/studio/src/components/common/Dropdown.tsx
+++ b/apps/studio/src/components/common/Dropdown.tsx
@@ -24,7 +24,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
   const dropdownRef = useRef(null);
 
   useOutsideClickCallback(dropdownRef, () => setOpen(false));
-  buttonHoverClassName = buttonHoverClassName || 'hover:text-white';
+  buttonHoverClassName = buttonHoverClassName || 'hover:text-black dark:hover:text-white';
 
   return (
     <div className={className}>
diff --git a/apps/studio/tailwind.config.js b/apps/studio/tailwind.config.js
index d53b2eaa0..e8629e7d2 100644
--- a/apps/studio/tailwind.config.js
+++ b/apps/studio/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',

From a63f2da211eabb39d11266d73384d2344c80897f Mon Sep 17 00:00:00 2001
From: karthik05122 <karthikkarthik5122@gmail.com>
Date: Mon, 22 Sep 2025 21:57:29 -0400
Subject: [PATCH 2/5] fix: resolve linting errors and add Next.js ESLint config

---
 .changeset/angry-planes-look.md               |  11 ++++++++
 apps/studio/.eslintrc                         |   2 +-
 .../src/components/Editor/MonacoWrapper.tsx   |  26 +++++++++---------
 apps/studio/src/components/Sidebar.tsx        |   3 +-
 theme-toggle.patch                            | Bin 0 -> 106690 bytes
 5 files changed, 26 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/angry-planes-look.md
 create mode 100644 theme-toggle.patch

diff --git a/.changeset/angry-planes-look.md b/.changeset/angry-planes-look.md
new file mode 100644
index 000000000..abe24b177
--- /dev/null
+++ b/.changeset/angry-planes-look.md
@@ -0,0 +1,11 @@
+---
+"@asyncapi/studio": minor
+---
+feat: add global dark/light mode theme system
+
+- Added theme toggle button in sidebar with VscSymbolColor icon
+- Configured Tailwind `darkMode: 'class'`
+- Updated editor, toolbar, navigation, and terminal components with `dark:` variants
+- Implemented smooth CSS transitions
+- Theme preference persists during session
+---
diff --git a/apps/studio/.eslintrc b/apps/studio/.eslintrc
index c1da477ee..2de385887 100644
--- a/apps/studio/.eslintrc
+++ b/apps/studio/.eslintrc
@@ -5,5 +5,5 @@
     "node": true
   },
   "plugins": ["security"],
-  "extends":["eslint-config-custom", "eslint-config-custom/react"]
+  "extends":["eslint-config-custom", "eslint-config-custom/react", "next/core-web-vitals"]
 }
diff --git a/apps/studio/src/components/Editor/MonacoWrapper.tsx b/apps/studio/src/components/Editor/MonacoWrapper.tsx
index 7c1f3c135..548895b24 100644
--- a/apps/studio/src/components/Editor/MonacoWrapper.tsx
+++ b/apps/studio/src/components/Editor/MonacoWrapper.tsx
@@ -11,21 +11,21 @@ import type { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
 export const MonacoWrapper: FunctionComponent<MonacoEditorProps> = ({
   ...props
 }) => {
-
   const [isDark, setIsDark] = useState(
-  typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
-);
+    typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+  );
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains('dark'));
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    return () => observer.disconnect();
+  }, []);
 
-useEffect(() => {
-  const observer = new MutationObserver(() => {
-    setIsDark(document.documentElement.classList.contains('dark'));
-  });
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['class'],
-  });
-  return () => observer.disconnect();
-}, []);
   const { editorSvc, parserSvc } = useServices();
   const { autoSaving, savingDelay } = useSettingsState(state => state.editor);
   const file = useFilesState(state => state.files['asyncapi']);
diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx
index 067030e11..cb0781a55 100644
--- a/apps/studio/src/components/Sidebar.tsx
+++ b/apps/studio/src/components/Sidebar.tsx
@@ -55,12 +55,11 @@ interface SidebarProps {}
 export const Sidebar: FunctionComponent<SidebarProps> = () => {
   const [darkMode, setDarkMode] = useState(false);
 
-    useEffect(() => {
+  useEffect(() => {
     window.document.documentElement.classList.toggle('dark', darkMode);
     console.log('Dark mode is now', darkMode ? 'enabled' : 'disabled');
   }, [darkMode]);
 
-
   const { show, secondaryPanelType } = usePanelsState();
   const [document, hasErrors] = useDocumentsState((state) => [
     state.documents['asyncapi']?.document,
diff --git a/theme-toggle.patch b/theme-toggle.patch
new file mode 100644
index 0000000000000000000000000000000000000000..0e20ed8cebba27585a5a98d20a0e916047c3e240
GIT binary patch
literal 106690
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

literal 0
HcmV?d00001


From 8230fa8dd8c7530e04a5a02c1b76bc02f830fae9 Mon Sep 17 00:00:00 2001
From: karthik05122 <karthikkarthik5122@gmail.com>
Date: Mon, 22 Sep 2025 21:59:01 -0400
Subject: [PATCH 3/5] fix: resolve ESLint plugin conflict

---
 apps/studio/.eslintrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/studio/.eslintrc b/apps/studio/.eslintrc
index 2de385887..4a6c3e4be 100644
--- a/apps/studio/.eslintrc
+++ b/apps/studio/.eslintrc
@@ -5,5 +5,5 @@
     "node": true
   },
   "plugins": ["security"],
-  "extends":["eslint-config-custom", "eslint-config-custom/react", "next/core-web-vitals"]
+  "extends":["next/core-web-vitals", "eslint-config-custom", "eslint-config-custom/react"]
 }

From e9de71ad92a237841784c7539f3c3fe9b5f1d631 Mon Sep 17 00:00:00 2001
From: karthik05122 <karthikkarthik5122@gmail.com>
Date: Mon, 22 Sep 2025 22:27:12 -0400
Subject: [PATCH 4/5] fix: resolve SonarCloud code quality issues

---
 apps/studio/src/components/Sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx
index cb0781a55..1004a9ea4 100644
--- a/apps/studio/src/components/Sidebar.tsx
+++ b/apps/studio/src/components/Sidebar.tsx
@@ -56,7 +56,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
   const [darkMode, setDarkMode] = useState(false);
 
   useEffect(() => {
-    window.document.documentElement.classList.toggle('dark', darkMode);
+    globalThis.document.documentElement.classList.toggle('dark', darkMode);
     console.log('Dark mode is now', darkMode ? 'enabled' : 'disabled');
   }, [darkMode]);
 
@@ -140,7 +140,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
 
   const driverTourHandler = () => {
     const getCurrentTourStep = localStorage.getItem('currentTourStep');
-    driverObj.drive(parseInt(getCurrentTourStep ?? '0', 10));
+    driverObj.drive(Number.parseInt(getCurrentTourStep ?? '0', 10));
   };
 
   useEffect(() => {

From cd2b529ce38b60cf426a759b899a33efbb2ce22b Mon Sep 17 00:00:00 2001
From: karthik05122 <karthikkarthik5122@gmail.com>
Date: Mon, 22 Sep 2025 22:47:22 -0400
Subject: [PATCH 5/5] fix: add globalThis to ESLint globals

---
 apps/studio/.eslintrc | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/studio/.eslintrc b/apps/studio/.eslintrc
index 4a6c3e4be..f793d63d2 100644
--- a/apps/studio/.eslintrc
+++ b/apps/studio/.eslintrc
@@ -2,8 +2,12 @@
   "env": {
     "es6": true,
     "browser": true,
-    "node": true
+    "node": true,
+    "es2020": true
+  },
+  "globals": {
+    "globalThis": "readonly"
   },
   "plugins": ["security"],
   "extends":["next/core-web-vitals", "eslint-config-custom", "eslint-config-custom/react"]
-}
+}
\ No newline at end of file