feat: implement theme toggle system

.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
+---

apps/studio/.eslintrc

@@ -2,8 +2,12 @@
   "env": {
     "es6": true,
     "browser": true,
-    "node": true
+    "node": true,
+    "es2020": true
+  },
+  "globals": {
+    "globalThis": "readonly"
   },
   "plugins": ["security"],
-  "extends":["eslint-config-custom", "eslint-config-custom/react"]
-}
+  "extends":["next/core-web-vitals", "eslint-config-custom", "eslint-config-custom/react"]
+}

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"

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}

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"

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"

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={{

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"

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>
   );

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}`}>