Skip to content

Commit d76ea4f

Browse files
xyzqmxyzqm
committed
new light mode styles!
1 parent 142f802 commit d76ea4f

File tree

6 files changed

+343
-88
lines changed

6 files changed

+343
-88
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
"storybook-addon-gatsby": "^0.0.5",
143143
"storybook-dark-mode": "^2.0.5",
144144
"styled-components": "^5.3.5",
145-
"tailwindcss": "^3.1.3",
145+
"tailwindcss": "^3.4.1",
146146
"tippy.js": "^6.3.1",
147147
"ts-node": "^10.9.2",
148148
"twin.macro": "^2.7.0",
@@ -160,6 +160,7 @@
160160
"license": "MIT",
161161
"scripts": {
162162
"build": "cp ./content/problems.schema.json ./static/problems.schema.json && gatsby build",
163+
"dev": "gatsby develop",
163164
"develop": "gatsby develop",
164165
"format": "prettier --write .",
165166
"lint": "npm run eslint",

‎src/components/Editor/EditorSidebar/EditorSidebar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ export const EditorSidebar = (props): JSX.Element => {
278278
}
279279
};
280280
return (
281-
<div className="flex-col w-[250px]">
281+
<div className="flex-col w-[250px] border-r border-gray-200 dark:border-gray-800">
282282
<FileListSidebar
283283
{...props}
284284
activeFile={activeFile}

‎src/components/Editor/EditorSidebar/FileListSidebar.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@ export const FileListSidebar: React.FC<{
2828
};
2929

3030
return (
31-
<div
32-
className={'w-full bg-[#1E1E1E] border-r border-gray-800 overflow-y-auto'}
33-
>
34-
<div className="text-gray-300 text-sm font-medium border-b border-gray-800 flex items-center justify-between">
35-
<span className="px-4 py-2">Files</span>
31+
<div className={`w-full overflow-y-auto`}>
32+
<div className="text-gray-300 text-sm font-medium border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
33+
<span className="px-4 py-2 text-gray-600 dark:text-gray-300">
34+
Files
35+
</span>
3636
<div className="flex-shrink-0">
3737
<button
3838
className={classNames(
39-
'text-gray-400 hover:text-gray-300 hover:bg-gray-800 active:bg-gray-800',
39+
'text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 active:bg-gray-800',
4040
'px-3 py-2 font-medium text-sm focus:outline-none transition'
4141
)}
4242
onClick={() => onCloseAllFiles()}
@@ -48,8 +48,8 @@ export const FileListSidebar: React.FC<{
4848
<div className="h-1" />
4949
{files.map(file => (
5050
<div
51-
className={`flex items-center hover:bg-gray-800 text-gray-400 hover:text-gray-300 transition${
52-
activeFile?.path === file ? ' bg-gray-900' : ''
51+
className={`flex items-center hover:bg-gray-200 dark:hover:bg-gray-800 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition ${
52+
activeFile?.path === file ? 'bg-gray-100 dark:bg-gray-900' : ''
5353
}`}
5454
key={file}
5555
>
@@ -60,7 +60,7 @@ export const FileListSidebar: React.FC<{
6060
{file}
6161
</div>
6262
<button
63-
className="flex-shrink-0 focus:outline-none py-1 px-2 text-gray-600 hover:text-gray-300 transition"
63+
className="flex-shrink-0 focus:outline-none py-1 px-2 text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition"
6464
onClick={() => onCloseFile(file)}
6565
>
6666
<XIcon className="h-4 w-4" />
@@ -70,7 +70,7 @@ export const FileListSidebar: React.FC<{
7070
<div className="h-1" />
7171
<button
7272
className={classNames(
73-
'text-gray-400 hover:text-gray-300 hover:bg-gray-800 active:bg-gray-800',
73+
'text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-800',
7474
'px-4 py-2 font-medium text-sm focus:outline-none transition w-full'
7575
)}
7676
onClick={() => setIsFileModalOpen(true)}

‎src/components/Editor/EditorTabBar.tsx

+16-11
Original file line numberDiff line numberDiff line change
@@ -85,15 +85,15 @@ const EditorTabBar: React.FC<EditorTabBarProps> = ({
8585
);
8686
return (
8787
<>
88-
<div className="flex bg-gray-900">
88+
<div className="flex bg-gray-50 dark:bg-gray-950">
8989
<div className="flex-1">
9090
{tabs.map(tab => (
9191
<button
9292
key={tab.value}
9393
className={classNames(
9494
tab.value === activeTab
95-
? 'bg-[#1E1E1E] text-gray-200'
96-
: 'text-gray-400 hover:text-gray-300 hover:bg-gray-800 active:bg-gray-800',
95+
? 'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100'
96+
: 'text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-900',
9797
'px-4 py-2 font-medium text-sm focus:outline-none transition'
9898
)}
9999
onClick={() => onTabSelect(tab)}
@@ -103,19 +103,24 @@ const EditorTabBar: React.FC<EditorTabBarProps> = ({
103103
))}
104104
</div>
105105
</div>
106-
<div className={'flex bg-gray-900'}>
106+
<div
107+
className={
108+
'flex bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400'
109+
}
110+
>
107111
<button
108-
className={
109-
'text-gray-400 hover:text-gray-300 hover:bg-gray-800 active:bg-gray-800 px-3 py-2 text-sm font-medium focus:outline-none transition'
110-
}
112+
className={classNames(
113+
'hover:text-gray-800 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-800',
114+
'px-3 py-2 text-sm font-medium focus:outline-none transition'
115+
)}
111116
onClick={() => setOpen(true)}
112-
type={'button'}
117+
type="button"
113118
>
114119
Generate Quiz
115120
</button>
116121
<button
117122
className={classNames(
118-
'text-gray-400 hover:text-gray-300 hover:bg-gray-800 active:bg-gray-800',
123+
'hover:text-gray-800 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-800',
119124
'px-3 py-2 font-medium text-sm focus:outline-none transition'
120125
)}
121126
onClick={() => onFormatCode()}
@@ -125,7 +130,7 @@ const EditorTabBar: React.FC<EditorTabBarProps> = ({
125130
{useAtomValue(tabAtom) === 'problems' && (
126131
<button
127132
className={classNames(
128-
'text-gray-400 hover:text-gray-300 hover:bg-gray-800 active:bg-gray-800',
133+
'hover:text-gray-800 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-800',
129134
'px-3 py-2 font-medium text-sm focus:outline-none transition'
130135
)}
131136
onClick={() => setDialogOpen(true)}
@@ -136,7 +141,7 @@ const EditorTabBar: React.FC<EditorTabBarProps> = ({
136141
{githubInfo && octokit && file && branch && (
137142
<button
138143
className={classNames(
139-
'text-gray-400 hover:text-gray-300 hover:bg-gray-800 active:bg-gray-800',
144+
'hover:text-gray-800 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-800',
140145
'px-3 py-2 font-medium text-sm focus:outline-none transition'
141146
)}
142147
onClick={() => updateFile(file)}

‎src/components/Editor/MainEditorInterface.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
trueFileAtom,
1616
trueFilePathAtom,
1717
} from '../../atoms/editor';
18+
import { DarkModeContext } from '../../context/DarkModeContext';
1819
import EditorTabBar from './EditorTabBar';
1920
import { conf as mdxConf, language as mdxLang } from './mdx-lang';
2021

@@ -27,6 +28,7 @@ export const MainEditorInterface = ({ className }): JSX.Element => {
2728
const setTab = useSetAtom(baseTabAtom);
2829
const isEditingSolution = useAtomValue(editingSolutionAtom);
2930
const tab = useAtomValue(tabAtom);
31+
const darkMode = React.useContext(DarkModeContext);
3032

3133
const setMarkdown = (x: string | ((prev: string) => string)) => {
3234
if (!activeFile) return;
@@ -121,7 +123,7 @@ export const MainEditorInterface = ({ className }): JSX.Element => {
121123
onFormatCode={handleFormatCode}
122124
/>
123125
<Editor
124-
theme="vs-dark"
126+
theme={darkMode ? 'vs-dark' : 'light'}
125127
path={useAtomValue(trueFilePathAtom)}
126128
language={tab === 'content' ? 'custom-mdx' : 'json'}
127129
value={useAtomValue(trueFileAtom)}

0 commit comments

Comments
 (0)