Skip to content

Commit 1cab076

Browse files
TahaShahid203TahaShahid203
committed
Theme toggle implemented
1 parent a05019b commit 1cab076

19 files changed

+156
-80
lines changed

‎apps/studio/public/img/logo-studio-white.svg‎

Lines changed: 35 additions & 0 deletions
Loading

‎apps/studio/src/components/Editor/ConvertDropdown.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ export const ConvertDropdown: React.FC = () => {
2424
</button>
2525
</Tooltip>
2626
}
27-
buttonHoverClassName="text-gray-500 hover:text-white"
27+
buttonHoverClassName="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white"
2828
dataTest="button-convert-dropdown"
2929
>
30-
<ul className="bg-gray-800 text-md text-white">
31-
<li className="hover:bg-gray-900">
30+
<ul className="bg-slate-200 dark:bg-gray-800 text-md text-black dark:text-white">
31+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
3232
<button
3333
type="button"
3434
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 = () => {
6262
Convert to {language === 'yaml' ? 'JSON' : 'YAML'}
6363
</button>
6464
</li>
65-
<li className="hover:bg-gray-900">
65+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
6666
<button
6767
type="button"
6868
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ export const EditorSidebar: React.FunctionComponent<
2727

2828
return (
2929
<div
30-
className="flex flex-row items justify-between bg-gray-800 border-b border-gray-700 text-sm"
30+
className="flex flex-row items justify-between bg-slate-200 dark:bg-gray-800 border-b border-black dark:border-gray-700 text-sm"
3131
style={{ height: '30px', lineHeight: '30px' }}
3232
>
3333
<div
34-
className="ml-2 text-gray-500 text-xs italic"
34+
className="ml-2 text-gray-700 dark:text-gray-500 text-xs italic"
3535
style={{ height: '30px', lineHeight: '30px' }}
3636
>
3737
{documentFromText}

‎apps/studio/src/components/Editor/GenerateDropdown.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ export const GenerateDropdown: React.FC = () => {
2323
</button>
2424
</Tooltip>
2525
}
26-
buttonHoverClassName="text-gray-500 hover:text-white"
26+
buttonHoverClassName="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white"
2727
dataTest="button-generate-dropdown"
2828
>
29-
<ul className="bg-gray-800 text-md text-white">
30-
<li className="hover:bg-gray-900">
29+
<ul className="bg-slate-200 dark:bg-gray-800 text-md text-black dark:text-white">
30+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
3131
<button
3232
type="button"
3333
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 = () => {
3838
Generate code/docs
3939
</button>
4040
</li>
41-
<li className="hover:bg-gray-900">
41+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
4242
<button
4343
type="button"
4444
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‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ export const ImportDropdown: React.FC = () => {
2424
</button>
2525
</Tooltip>
2626
}
27-
buttonHoverClassName="text-gray-500 hover:text-white"
27+
buttonHoverClassName="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white"
2828
dataTest="button-import-dropdown"
2929
>
30-
<ul className="bg-gray-800 text-md text-white">
31-
<li className="hover:bg-gray-900">
30+
<ul className="bg-slate-200 dark:bg-gray-800 text-md text-black dark:text-white">
31+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
3232
<button
3333
type="button"
3434
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 = () => {
3939
</button>
4040
</li>
4141

42-
<li className="hover:bg-gray-900">
42+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
4343
<label
4444
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"
4545
title="Import File"
@@ -72,7 +72,7 @@ export const ImportDropdown: React.FC = () => {
7272
</label>
7373
</li>
7474

75-
<li className="hover:bg-gray-900">
75+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
7676
<button
7777
type="button"
7878
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 = () => {
8383
</button>
8484
</li>
8585

86-
<li className="hover:bg-gray-900">
86+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
8787
<button
8888
type="button"
8989
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‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client'
2-
import { useMemo, FunctionComponent } from 'react';
2+
import { useState, useEffect, useMemo, FunctionComponent } from 'react';
33
import MonacoEditor from '@monaco-editor/react';
44

55
import { debounce } from '@/helpers';
@@ -11,6 +11,21 @@ import type { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
1111
export const MonacoWrapper: FunctionComponent<MonacoEditorProps> = ({
1212
...props
1313
}) => {
14+
15+
const [isDark, setIsDark] = useState(
16+
typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
17+
);
18+
19+
useEffect(() => {
20+
const observer = new MutationObserver(() => {
21+
setIsDark(document.documentElement.classList.contains('dark'));
22+
});
23+
observer.observe(document.documentElement, {
24+
attributes: true,
25+
attributeFilter: ['class'],
26+
});
27+
return () => observer.disconnect();
28+
}, []);
1429
const { editorSvc, parserSvc } = useServices();
1530
const { autoSaving, savingDelay } = useSettingsState(state => state.editor);
1631
const file = useFilesState(state => state.files['asyncapi']);
@@ -27,7 +42,7 @@ export const MonacoWrapper: FunctionComponent<MonacoEditorProps> = ({
2742
<MonacoEditor
2843
language={file.language}
2944
defaultValue={file.content}
30-
theme="asyncapi-theme"
45+
theme={isDark ? 'asyncapi-theme' : 'vs'}
3146
onMount={editorSvc.onDidCreate.bind(editorSvc)}
3247
onChange={onChange}
3348
options={{

‎apps/studio/src/components/Editor/SaveDropdown.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ export const SaveDropdown: React.FC = () => {
2222
</button>
2323
</Tooltip>
2424
}
25-
buttonHoverClassName="text-gray-500 hover:text-white"
25+
buttonHoverClassName="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white"
2626
dataTest="button-save-dropdown"
2727
>
28-
<ul className="bg-gray-800 text-md text-white">
29-
<li className="hover:bg-gray-900">
28+
<ul className="bg-slate-200 dark:bg-gray-800 text-md text-black dark:text-white">
29+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
3030
<button
3131
type="button"
3232
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 = () => {
6060
Save as {language === 'yaml' ? 'YAML' : 'JSON'}
6161
</button>
6262
</li>
63-
<li className="hover:bg-gray-900">
63+
<li className="hover:bg-slate-300 dark:hover:bg-gray-900">
6464
<button
6565
type="button"
6666
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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const ShareButton: React.FunctionComponent<ShareButtonProps> = () => {
2626
return (
2727
<Tooltip content={'Share link'} placement="top" hideOnClick={true}>
2828
<button className="bg-inherit" onClick={handleShare} data-test="button-share">
29-
<FaShareAlt className="text-gray-500 hover:text-white" />
29+
<FaShareAlt className="text-gray-700 dark:text-gray-500 hover:text-black dark:hover:text-white" />
3030
</button>
3131
</Tooltip>
3232
);

‎apps/studio/src/components/Modals/NewFileModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface TemplateListItemProps {
2020

2121
const TemplateListItem: FunctionComponent<TemplateListItemProps> = ({ title, description: Description, onClick, isSelected }) => {
2222
const containerStyles = isSelected ? 'border-pink-500' : 'border-gray-200';
23-
const textStyles = isSelected ? 'text-pink-600' : 'text-gray-600';
23+
const textStyles = isSelected ? 'text-pink-600' : 'text-slate-200 dark:text-gray-600';
2424

2525
return (
2626
<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}`}>

0 commit comments

Comments
 (0)