Skip to content

Commit

Permalink
feat(theme): add support for light theme
Browse files Browse the repository at this point in the history
rahulyadav-57 committed Oct 24, 2024

Verified

This commit was signed with the committer’s verified signature.
rahulyadav-57 Rahul Yadav
1 parent 24cd8b1 commit 5704d1a
Showing 26 changed files with 270 additions and 69 deletions.
1 change: 1 addition & 0 deletions commitlint.config.ts
Original file line number Diff line number Diff line change
@@ -38,6 +38,7 @@ const Configuration: UserConfig = {
'build', // Build scripts or configuration
'ci', // Continuous integration
'release', // Release related changes
'theme', // Theme changes
'other', // Other changes
],
],
8 changes: 4 additions & 4 deletions src/components/project/NewProject/NewProject.module.scss
Original file line number Diff line number Diff line change
@@ -56,10 +56,7 @@

[class*='ant-radio-button-checked'] {
border: solid 1px transparent;
background-image: linear-gradient(rgb(20, 20, 20), rgb(20, 20, 20)),
var(--primary-gradient);
background-origin: border-box;
background-clip: content-box, border-box;
background: var(--primary);
border-radius: var(--border-radius);

&::before {
@@ -72,6 +69,9 @@
background: #000;
z-index: -1;
border-radius: inherit;
[data-theme='light'] & {
background: var(--primary);
}
}
}
}
6 changes: 6 additions & 0 deletions src/components/shared/LogView/LogView.module.scss
Original file line number Diff line number Diff line change
@@ -57,4 +57,10 @@
display: inline-block;
margin-left: 0.5rem;
}
[class*='xterm-cursor-outline'] {
outline-color: var(--text-color) !important;
}
[class*='xterm-cursor-bar'] {
box-shadow: 1px 0 0 var(--text-color) inset !important;
}
}
2 changes: 1 addition & 1 deletion src/components/shared/LogView/LogView.tsx
Original file line number Diff line number Diff line change
@@ -37,7 +37,7 @@ const LogView: FC<Props> = ({ filter }) => {
grey: '\x1b[38;5;243m',
success: '\x1b[38;5;40m',
error: '\x1b[38;5;196m',
warning: '\x1b[38;5;226m',
warning: '\x1b[38;5;214m',
info: '\x1b[38;5;33m',
reset: '\x1b[0m',
};
74 changes: 74 additions & 0 deletions src/components/shared/ThemeProvider/ThemeProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { ConfigProvider, theme as antdTheme } from 'antd';
import {
ReactNode,
createContext,
useContext,
useEffect,
useState,
} from 'react';

type Theme = 'light' | 'dark';

interface ThemeContextProps {
theme: Theme;
toggleTheme: () => void;
}

export const ThemeContext = createContext<ThemeContextProps | undefined>(
undefined,
);

export const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};

export const ThemeProvider = ({ children }: { children: ReactNode }) => {
// Initialize theme based on local storage or system preference
const [theme, setTheme] = useState<Theme>(() => {
if (typeof window === 'undefined') {
return 'dark';
}
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
return savedTheme as Theme;
}
const prefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
return prefersDark ? 'dark' : 'light';
});

// Apply the theme to the HTML element and save it in localStorage
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}, [theme]);

const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};

// Ant Design's theme configuration
const antdConfig = {
token: {
colorPrimary: '#0098ea',
colorError: '#C84075',
fontFamily: 'var(--font-body)',
borderRadius: 4,
},
algorithm:
theme === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
};

return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<ConfigProvider theme={antdConfig}>{children}</ConfigProvider>
</ThemeContext.Provider>
);
};

export default ThemeProvider;
1 change: 1 addition & 0 deletions src/components/shared/ThemeProvider/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { ThemeContext, default, useTheme } from './ThemeProvider';
1 change: 1 addition & 0 deletions src/components/shared/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { default as Layout } from './Layout';
export { default as LogView } from './LogView';
export { default as ThemeProvider } from './ThemeProvider';
9 changes: 7 additions & 2 deletions src/components/template/ProjectTemplate/ProjectTemplate.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable react/no-children-prop */
import { NewProject } from '@/components/project';
import { useTheme } from '@/components/shared/ThemeProvider';
import AppIcon from '@/components/ui/icon';
import { AppConfig } from '@/config/AppConfig';
import { projectExamples } from '@/constant/projectExamples';
@@ -9,7 +10,10 @@ import Link from 'next/link';
import { FC, useEffect, useState } from 'react';
import Markdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark as darkTheme } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import {
oneDark as darkTheme,
oneLight as lightTheme,
} from 'react-syntax-highlighter/dist/cjs/styles/prism';
import s from './ProjectTemplate.module.scss';

function LinkRenderer({
@@ -35,6 +39,7 @@ const ProjectTemplate: FC = () => {
contract: string;
content: string;
}>({ contract: '', content: '' });
const { theme } = useTheme();

const getContent = async () => {
const link = examples[currentExample].link;
@@ -166,7 +171,7 @@ const ProjectTemplate: FC = () => {
PreTag="div"
children={String(children).replace(/\n$/, '')}
language={match[1]}
style={darkTheme}
style={theme === 'dark' ? darkTheme : lightTheme}
/>
) : (
<code {...rest} className={className}>
8 changes: 6 additions & 2 deletions src/components/ui/icon/index.tsx
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ import {
import { BsShare } from 'react-icons/bs';

import { BsFillPlayFill } from 'react-icons/bs';
import { FaRegClone } from 'react-icons/fa';
import { FaMoon, FaRegClone, FaSun } from 'react-icons/fa';
import { FiEdit2, FiEye } from 'react-icons/fi';
import { GoTriangleDown, GoTriangleRight, GoTriangleUp } from 'react-icons/go';
import { GrClear } from 'react-icons/gr';
@@ -69,7 +69,9 @@ export type AppIconType =
| 'Import'
| 'Reload'
| 'Share'
| 'Save';
| 'Save'
| 'Moon'
| 'Sun';

export interface AppIconInterface {
name: AppIconType;
@@ -110,6 +112,8 @@ const Components = {
Reload: AiOutlineReload,
Share: BsShare,
Save: AiOutlineSave,
Moon: FaMoon,
Sun: FaSun,
};

const AppIcon: FC<AppIconInterface> = ({ name, className = '' }) => {
34 changes: 28 additions & 6 deletions src/components/workspace/ABIUi/ABIUi.module.scss
Original file line number Diff line number Diff line change
@@ -12,6 +12,9 @@
height: 1px;
margin: 0 auto;
background-color: #373636;
[data-theme='light'] & {
background-color: #e0e0e0;
}
}
&.tact {
display: flex;
@@ -30,6 +33,9 @@
background: rgba(14, 14, 16, 0.9);
border-radius: 5px;
padding: 5px;
[data-theme='light'] & {
background: rgba(255, 255, 255, 0.9);
}

> div {
border-left: 0 !important;
@@ -62,27 +68,40 @@
border: 0;
box-shadow: none;
background: #232222;
[data-theme='light'] & {
background: #d6d6d6;
}
&:hover {
color: var(--text-color);
background-color: var(--grey--50);
}
}
}
&.Setter {
.btnAction {
border: solid 1px transparent;
background-image: linear-gradient(rgb(20, 20, 20), rgb(20, 20, 20)),
var(--primary-gradient);
background-origin: border-box;
background-clip: content-box, border-box;
background: var(--primary);
box-shadow: none;
z-index: 0;

&:hover {
border-color: transparent;
color: #fff;
color: var(--text-color);

&:before {
background: #101010;
[data-theme='light'] & {
background: var(--btn-primary-hover);
}
}
}
& span,
&:hover span [data-theme='light'] & {
color: #fff;
}
&:disabled {
opacity: 0.5;
color: #fff;
color: var(--text-color);
}

&:before {
@@ -95,6 +114,9 @@
background: #000;
z-index: -1;
border-radius: inherit;
[data-theme='light'] & {
background: var(--primary);
}
}
}
}
6 changes: 3 additions & 3 deletions src/components/workspace/BottomPanel/BottomPanel.module.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.root {
background-color: #181717;
background-color: var(--dark-800);
height: 100%;
z-index: 1000;
position: relative;
@@ -43,11 +43,11 @@
justify-content: center;
.icon {
path {
stroke: #fff;
stroke: var(--text-color);
}
}
&:hover {
background-color: var(--grey);
background-color: var(--grey--70);
}
}
}
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
height: 100vh;
overflow-y: auto;
.heading {
color: #ccc;
color: var(--color-light);
text-align: center;
display: block;
font-size: 0.875rem;
@@ -28,6 +28,9 @@
background: rgba(14, 14, 16, 0.9);
border-radius: 5px;
padding: 2px;
[data-theme='light'] & {
background: rgba(255, 255, 255, 0.9);
}
> div {
border-left: 0 !important;
}
@@ -42,11 +45,11 @@
}
.connectedWallet {
font-size: 0.8rem;
color: #ccc;
color: var(--color-light);
margin-top: 1rem;
span {
font-size: 0.9rem;
color: #fff;
color: var(--text-color);
}
}
.contractAddress {
3 changes: 3 additions & 0 deletions src/components/workspace/Editor/Editor.module.scss
Original file line number Diff line number Diff line change
@@ -14,6 +14,9 @@
justify-content: space-between;
font-size: 0.8rem;
padding: 0.2rem 1rem;
[data-theme='light'] & {
background-color: rgba(255, 255, 255, 0.7);
}
.vimStatuBar {
font-family: monospace;
}
4 changes: 3 additions & 1 deletion src/components/workspace/Editor/Editor.tsx
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ import EditorDefault, { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import { FC, useEffect, useRef, useState } from 'react';
// import { useLatest } from 'react-use';
import { useTheme } from '@/components/shared/ThemeProvider';
import { useFile, useFileTab } from '@/hooks';
import { useProject } from '@/hooks/projectV2.hooks';
import { useLatest } from 'react-use';
@@ -23,6 +24,7 @@ const Editor: FC<Props> = ({ className = '' }) => {
const { activeProject } = useProject();
const { getFile, saveFile: storeFileContent } = useFile();
const { fileTab, updateFileDirty } = useFileTab();
const { theme } = useTheme();

const { isFormatOnSave, getSettingStateByKey } = useSettingAction();

@@ -249,7 +251,7 @@ const Editor: FC<Props> = ({ className = '' }) => {
<EditorDefault
className={s.editor}
path={fileTab.active ?? ''}
theme="vs-theme-dark"
theme={theme === 'dark' ? 'vs-theme-dark' : 'light'}
// height="90vh"
defaultLanguage={fileTypeFromFileName(fileTab.active ?? '')}
// defaultLanguage={`func`}
7 changes: 5 additions & 2 deletions src/components/workspace/Tabs/Tabs.module.scss
Original file line number Diff line number Diff line change
@@ -60,7 +60,7 @@

&.isActive {
background: var(--black-500);
color: #ffffff;
color: var(--text-color);
.close {
visibility: visible;
}
@@ -76,6 +76,9 @@

&:hover {
background-color: #403d3d;
[data-theme='light'] & {
background-color: #f7f7f7;
}
}
&.isDirty {
.closeIcon {
@@ -92,7 +95,7 @@
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
background: var(--text-color);
margin-right: 5px;
position: absolute;
left: 0;
10 changes: 5 additions & 5 deletions src/components/workspace/WorkSpace/WorkSpace.module.scss
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@
div[class*='gutter-horizontal'] {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
cursor: col-resize;
background-color: #141416;
background-color: var(--splitter-bg);
}
}
.splitVertical {
@@ -23,7 +23,7 @@
div[class*='gutter-vertical'] {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
cursor: row-resize;
background-color: #17171a;
background-color: var(--splitter-bg);
}
}
div[class*='gutter'] {
@@ -38,7 +38,7 @@
// padding-top: 0.5rem;
// flex: 0 0 250px;
// width: 250px;
background-color: #141416;
background-color: var(--sidebar-bg);
overflow-x: hidden !important;
overflow-y: auto !important;
:global(.onboarding-active) & {
@@ -55,7 +55,7 @@
justify-content: space-between;
}
.heading {
color: #ccc;
color: var(--color-light);
text-align: center;
display: block;
font-size: 0.875rem;
@@ -68,7 +68,7 @@
gap: 0.3rem;
}
.globalAction {
color: #ccc;
color: var(--color-light);
display: flex;
justify-content: space-between;
padding: 0.5rem;
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@
cursor: pointer;
opacity: 0.6;
position: relative;
color: #fff;
color: var(--text-color);
display: flex;
user-select: none;
display: flex;
@@ -33,7 +33,6 @@
&:hover {
opacity: 1;
color: var(--primary);
background: rgba(0, 0, 0, 0.7);
&::before {
display: block;
}
@@ -51,6 +50,21 @@
text-align: center;
}
}
.themeSwitch {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem auto;
align-items: center;
border-radius: 50%;
height: 3rem;
width: 3rem;

> svg {
width: 1.4rem;
height: 1.4rem;
}
}
.clone {
font-size: 1.3rem;
}
@@ -60,11 +74,15 @@
padding: 1rem 0;
&:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
[data-theme='light'] & {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
}
> div {
margin: 0 !important;
}
}

.resetAmount {
display: flex;
align-items: center;
29 changes: 28 additions & 1 deletion src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { ThemeContext } from '@/components/shared/ThemeProvider';
import { AppLogo, Tooltip } from '@/components/ui';
import AppIcon, { AppIconType } from '@/components/ui/icon';
import { AppData } from '@/constant/AppData';
import { useSettingAction } from '@/hooks/setting.hooks';
import { Form, Input, Popover, Select, Switch } from 'antd';
import Link from 'next/link';
import { FC, useEffect } from 'react';
import { FC, useContext, useEffect } from 'react';
import s from './WorkspaceSidebar.module.scss';

export type WorkSpaceMenu = 'code' | 'build' | 'test-cases' | 'setting';
@@ -42,6 +43,7 @@ const WorkspaceSidebar: FC<Props> = ({

const editorMode = getSettingStateByKey('editorMode');
const isExternalMessage = getSettingStateByKey('isExternalMessage');
const themeContext = useContext(ThemeContext);

const menuItems: MenuItem[] = [
{
@@ -109,6 +111,16 @@ const WorkspaceSidebar: FC<Props> = ({
/>
</Form.Item>
</div>
<div className={s.settingItem}>
<Form.Item label="Light Mode" valuePropName="checked">
<Switch
checked={themeContext?.theme === 'light'}
onChange={() => {
themeContext?.toggleTheme();
}}
/>
</Form.Item>
</div>
<div className={s.settingItem}>
<Form.Item
label="Auto Build & Deploy in Sandbox"
@@ -214,11 +226,26 @@ const WorkspaceSidebar: FC<Props> = ({
</Link>
</Tooltip>
))}

<Popover placement="rightTop" title="Setting" content={settingContent}>
<div className={s.action}>
<AppIcon className={s.icon} name="Setting" />
</div>
</Popover>
<Tooltip title="Switch Theme" placement="right">
<div
className={`${s.themeSwitch} ${s.action} ${s.isActive}`}
onClick={() => {
themeContext?.toggleTheme();
}}
>
{themeContext?.theme == 'dark' ? (
<AppIcon name="Moon" />
) : (
<AppIcon name="Sun" />
)}
</div>
</Tooltip>
</div>
</div>
);
Original file line number Diff line number Diff line change
@@ -39,6 +39,7 @@
display: flex;
align-items: center;
font-size: 1.1rem;
color: var(--color-danger);
}
.projects {
.name {
1 change: 1 addition & 0 deletions src/interfaces/setting.interface.ts
Original file line number Diff line number Diff line change
@@ -5,4 +5,5 @@ export interface SettingInterface {
tonAmountForInteraction?: string;
editorMode: 'default' | 'vim';
isExternalMessage?: boolean;
theme?: 'light' | 'dark';
}
19 changes: 3 additions & 16 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { Layout } from '@/components/shared';
import { Layout, ThemeProvider } from '@/components/shared';
import { AppConfig } from '@/config/AppConfig';
import { IDEProvider } from '@/state/IDE.context';
import '@/styles/theme.scss';
import { THEME } from '@tonconnect/ui';
import { TonConnectUIProvider } from '@tonconnect/ui-react';
import { WebContainer } from '@webcontainer/api';
import { ConfigProvider, theme } from 'antd';
import mixpanel from 'mixpanel-browser';
import type { AppProps } from 'next/app';
import Head from 'next/head';
@@ -23,8 +22,6 @@ export default function App({
Component,
pageProps: { ...pageProps },
}: AppProps) {
const { darkAlgorithm } = theme;

useEffect(() => {
if (process.env.NEXT_PUBLIC_DISABLE_WEBCONTAINER) return;
(async () => {
@@ -86,17 +83,7 @@ export default function App({
</Head>
<RecoilRoot>
<IDEProvider>
<ConfigProvider
theme={{
token: {
colorPrimary: '#0098ea',
colorError: '#C84075',
fontFamily: 'var(--font-body)',
borderRadius: 4,
},
algorithm: darkAlgorithm,
}}
>
<ThemeProvider>
<TonConnectUIProvider
uiPreferences={{ theme: THEME.LIGHT }}
manifestUrl="https://ide.ton.org/assets/ton/tonconnect-manifest.json"
@@ -105,7 +92,7 @@ export default function App({
<Component {...pageProps} />
</Layout>
</TonConnectUIProvider>
</ConfigProvider>
</ThemeProvider>
</IDEProvider>
</RecoilRoot>
</>
1 change: 1 addition & 0 deletions src/state/IDE.context.tsx
Original file line number Diff line number Diff line change
@@ -33,6 +33,7 @@ const defaultSetting = {
autoBuildAndDeploy: true,
editorMode: 'default' as const,
isExternalMessage: false,
theme: 'dark' as const,
};

const defaultState = {
13 changes: 9 additions & 4 deletions src/styles/components/file-icons.scss
Original file line number Diff line number Diff line change
@@ -33,10 +33,15 @@
content: '';
background-image: url('/images/icon/file/default_folder_opened.svg');
}
.show-file-icons .file-icon::before,
.show-file-icons .txt-ext-file-icon.ext-file-icon.file-icon::before {
color: #d4d7d6;
content: '\E01A';
.show-file-icons .file-icon,
.show-file-icons .txt-ext-file-icon.ext-file-icon.file-icon {
&::before {
color: #d4d7d6;
content: '\E01A';
[data-theme='light'] & {
color: #4d5a5e;
}
}
}
.show-file-icons .bat-lang-file-icon.file-icon::before {
color: #519aba;
2 changes: 1 addition & 1 deletion src/styles/components/project.scss
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
top: -1px;
right: -1px;
bottom: -2px;
background: var(--primary-gradient);
background: var(--primary);
z-index: -1;
opacity: 0.6;
}
61 changes: 46 additions & 15 deletions src/styles/global.scss
Original file line number Diff line number Diff line change
@@ -1,38 +1,65 @@
:root {
--primary: #0098ea;
--brand-color-2: rgba(19, 226, 218, 1);
--font-title: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--text-color: #f7f7f7;
--bg-color: #000;
--color-light: #ccc;
--black-500: #0e0e10;
--grey: #4f4e4e;
--light-grey: #7e7d7d;
--grey-500: #1a1a1a;
--grey-900: #232328;
--grey-1000: #131212;
--color-danger: #c84075;
--color-warning: #d19228;
--border-radius: 5px;
--btn-primary: #0098ea;
--btn-primary-hover: #00a6ff;
--btn-disabled: rgba(255, 255, 255, 0.1);
--menu-bg: rgba(0, 0, 0, 0.7);
--sidebar-bg: #141416;
--splitter-bg: #141416;
--grey--10: rgba(46, 46, 51, 0.1);
--grey--50: rgba(46, 46, 51, 0.5);
--grey--70: rgba(46, 46, 51, 0.7);

--bg-color-dark: #000;
--color-danger: #c84075;
--color-warning: #d19228;
--border-radius: 5px;
--dark-800: #181717;
--dark-hover: linear-gradient(
0deg,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.6) 100%
);
--primary-gradient: linear-gradient(45deg, #2d83ec, #1ac9ff);
--grey-900: #232328;
--modal-bg: linear-gradient(
0deg,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.5) 100%
),
#232328;
--btn-primary: #0098ea;
--btn-primary-hover: #00a6ff;
--btn-disabled: rgba(255, 255, 255, 0.1);
}

/* Light theme styles */
[data-theme='light'] {
--text-color: #000;
--bg-color: #f7f7f7;
--black-500: #dcdada;
--btn-disabled: rgba(0, 0, 0, 0.1);
--menu-bg: rgba(255, 255, 255, 0.6);
--sidebar-bg: #e8e8e8;
--color-light: #454444;
--splitter-bg: #bbbbbb;
--grey--10: rgba(208, 208, 225, 0.1);
--grey--50: #e8e8e8;
--grey--70: #dcdada;
--dark-800: #eaeaea;
--grey-900: #f2f2f2;
--dark-hover: linear-gradient(
0deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.6) 100%
);
--modal-bg: linear-gradient(
0deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.5) 100%
),
#eaeaea;
}

html {
@@ -44,14 +71,18 @@ body {
font-family: var(--font-body);
letter-spacing: 0.02em;
color: var(--text-color);
background: var(--bg-color-dark);
background: var(--bg-color);
line-height: 1.4;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
*::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #000000;
[data-theme='light'] & {
background-color: #f7f7f7;
}
}

*::-webkit-scrollbar {
7 changes: 6 additions & 1 deletion src/styles/lib/form.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
.ant-select {
.ant-select-selector {
background-color: rgba(0, 0, 0, 0.4) !important;
border: 0 !important;
box-shadow: none !important;
[data-theme='dark'] & {
background-color: rgba(0, 0, 0, 0.4) !important;
}
}
}
div.ant-form-item {
@@ -35,6 +37,9 @@ div.ant-form-item {
background-color: rgba(0, 0, 0, 1);
height: 35px;
box-shadow: none;
[data-theme='light'] & {
background-color: rgba(204, 204, 204, 0.4);
}
&:focus {
border-color: #454545;
}

0 comments on commit 5704d1a

Please sign in to comment.