navigationSvc.scrollTo(
diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx
index f1095a2ce..1004a9ea4 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,13 @@ interface NavItem {
interface SidebarProps {}
export const Sidebar: FunctionComponent = () => {
+ const [darkMode, setDarkMode] = useState(false);
+
+ useEffect(() => {
+ globalThis.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 +113,16 @@ export const Sidebar: FunctionComponent = () => {
enabled: !isV3,
dataTest: 'button-blocks-visualiser',
},
+ {
+ name: 'Light/Dark Theme',
+ title: 'Light/Dark Theme',
+ isActive: true,
+ onClick: () => setDarkMode(prev => !prev),
+ icon: ,
+ tooltip: 'Toggle Light/Dark Theme',
+ enabled: true,
+ dataTest: 'button-light-dark-theme',
+ },
// newFile
{
name: 'newFile',
@@ -123,7 +140,7 @@ export const Sidebar: FunctionComponent = () => {
const driverTourHandler = () => {
const getCurrentTourStep = localStorage.getItem('currentTourStep');
- driverObj.drive(parseInt(getCurrentTourStep ?? '0', 10));
+ driverObj.drive(Number.parseInt(getCurrentTourStep ?? '0', 10));
};
useEffect(() => {
@@ -138,7 +155,7 @@ export const Sidebar: FunctionComponent = () => {
}
return (
-