Skip to content

Commit 225b8df

Browse files
congmulcongmul
committed
Update editor theme
1 parent e868bde commit 225b8df

File tree

9 files changed

+212
-5
lines changed

9 files changed

+212
-5
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>OAS Editor</title>
88
</head>
9-
<body>
9+
<body data-bs-theme="light">
1010
<div id="root"></div>
1111
<script type="module" src="/src/main.tsx"></script>
1212
</body>

‎src/components/Editor/components/MonacoEditor.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Editor from '@monaco-editor/react';
22
import Spinner from 'react-bootstrap/Spinner';
33
import { SpectralLinter, applyErrorMarkers } from '../../../utils';
4+
import { EditorTheme, EditorThemeData } from './monaco-editor.const';
45

56
interface MonacoEditorTypes {
67
editorRef: any
@@ -10,6 +11,10 @@ interface MonacoEditorTypes {
1011
}
1112
const MonacoEditor:React.FC<MonacoEditorTypes> = ({ editorRef, monacoRef, content, setContent }) => {
1213
const { lintScan } = SpectralLinter();
14+
function handleEditorWillMount(monaco:any){
15+
monaco.editor.defineTheme(EditorTheme.LIGHT, EditorThemeData[EditorTheme.LIGHT]);
16+
monaco.editor.defineTheme(EditorTheme.DARK, EditorThemeData[EditorTheme.DARK]);
17+
}
1318
function handleEditorDidMount(editor:any, monaco:any) {
1419
editorRef.current = editor;
1520
monacoRef.current = monaco;
@@ -26,7 +31,10 @@ const MonacoEditor:React.FC<MonacoEditorTypes> = ({ editorRef, monacoRef, conten
2631
return(<>
2732
{
2833
<Editor
34+
beforeMount={handleEditorWillMount}
2935
onMount={handleEditorDidMount}
36+
// theme={EditorTheme.DARK}
37+
theme={EditorTheme.LIGHT}
3038
height="100%"
3139
defaultLanguage="json"
3240
language='json'

‎src/components/Editor/components/monaco-editor.const.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export enum EditorTheme {
2+
LIGHT = 'LIGHT',
3+
DARK = 'DARK'
4+
}
5+
6+
export const EditorThemeData = {
7+
[EditorTheme.LIGHT]: {
8+
base: 'vs',
9+
inherit: true,
10+
colors: {
11+
'editor.background': '#ffffff',
12+
'editor.lineHighlightBackground': '#F3F3F3',
13+
},
14+
rules: [{ token: '', background: '#ffffff' }],
15+
},
16+
[EditorTheme.DARK]: {
17+
base: 'vs-dark',
18+
inherit: true,
19+
colors: {
20+
'editor.background': '#252f3f',
21+
'editor.lineHighlightBackground': '#1f2a37',
22+
},
23+
rules: [{ token: '', background: '#252f3f' }],
24+
}
25+
}

‎src/dark-style.scss

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/* DARK mode color for Swagger ui => */
2+
.swagger-ui, .swagger-ui .topbar, .swagger-ui .info {
3+
background-color: #2e2e2e;
4+
color: #e0e0e0;
5+
}
6+
7+
/* Adjusting header colors */
8+
.swagger-ui .topbar {
9+
background-color: #1e1e1e;
10+
}
11+
12+
.swagger-ui .info .title, .swagger-ui .info .version, .swagger-ui .info .description {
13+
color: #e0e0e0;
14+
p{
15+
color: #e0e0e0;
16+
}
17+
}
18+
19+
/* Adjusting the scheme and path colors */
20+
.swagger-ui .scheme-container, .swagger-ui .opblock-tag, .swagger-ui .opblock-summary {
21+
background-color: #444;
22+
color: #fff;
23+
p{
24+
color: #e0e0e0;
25+
}
26+
.opblock-summary-path-description-wrapper{
27+
span, div {color: #e0e0e0;}
28+
}
29+
}
30+
31+
.swagger-ui .opblock-summary {
32+
background-color: #3a3a3a;
33+
}
34+
35+
/* Adjusting the responses and code blocks */
36+
.swagger-ui .response-col_status, .swagger-ui .response-col_description, .swagger-ui .opblock-body pre, .swagger-ui .opblock-body pre span {
37+
background-color: #333;
38+
color: #ddd;
39+
}
40+
.no-margin .opblock-body{
41+
.opblock-description-wrapper .opblock-description .renderedMarkdown p, .opblock-section{
42+
color: #ddd;
43+
p{
44+
color: #ddd;
45+
}
46+
}
47+
}
48+
// .responses-wrapper .responses-inner .model-example, .tabitem{
49+
// color: #ddd;
50+
// }
51+
.swagger-ui .tab li{
52+
color: #ddd;
53+
}
54+
.swagger-ui .model, .swagger-ui .model .model-title{
55+
color: #ddd;
56+
}
57+
.swagger-ui .prop-type{
58+
color: #ddd;
59+
}
60+
.swagger-ui .model .property.primitive{
61+
color: #ddd;
62+
}
63+
.swagger-ui .prop-format{
64+
color: #ddd;
65+
}
66+
.swagger-ui svg{
67+
fill:#ddd;
68+
}
69+
/* Adjusting the parameter and response headers */
70+
.swagger-ui .parameters-col_description, .swagger-ui .parameters-col_name, .swagger-ui .parameters-col_in, .swagger-ui .parameters-col_type {
71+
background-color: #3a3a3a;
72+
color: #ddd;
73+
p{
74+
color: #ddd;
75+
}
76+
}
77+
.swagger-ui .info li{
78+
color: #e0e0e0;
79+
}
80+
/* Adjusting button colors */
81+
.swagger-ui .btn {
82+
background-color: #5a5a5a;
83+
color: #e0e0e0;
84+
border: none;
85+
p{
86+
color: #e0e0e0;
87+
}
88+
}
89+
.swagger-ui .parameter__name {
90+
color: #e0e0e0;
91+
}
92+
.swagger-ui .parameter__in{
93+
color: #e0e0e0;
94+
}
95+
.swagger-ui .response-col_links{
96+
color: #e0e0e0;
97+
}
98+
.swagger-ui .responses-inner h4{
99+
color: #e0e0e0;
100+
}
101+
.swagger-ui table thead tr th{
102+
color: #e0e0e0;
103+
}
104+
.swagger-ui table .headers td{
105+
color: #e0e0e0;
106+
}
107+
.swagger-ui .btn:hover {
108+
background-color: #6a6a6a;
109+
}
110+
111+
/* Adjusting the dropdown menu */
112+
.swagger-ui .dropdown-menu {
113+
background-color: #3a3a3a;
114+
color: #ddd;
115+
p{
116+
color: #ddd;
117+
}
118+
}
119+
120+
/* Adjusting input and textarea colors */
121+
.swagger-ui input, .swagger-ui textarea {
122+
background-color: #3a3a3a;
123+
color: #ddd;
124+
border: 1px solid #555;
125+
p{
126+
color: #ddd;
127+
}
128+
}
129+
130+
.swagger-ui input::placeholder, .swagger-ui textarea::placeholder {
131+
color: #888;
132+
p{
133+
color: #888;
134+
}
135+
}
136+
137+
/* Adjusting the model rendering */
138+
.swagger-ui .model-box {
139+
background-color: #444;
140+
color: #ddd;
141+
p{
142+
color: #ddd;
143+
}
144+
}
145+
146+
/* <= DARK mode color for Swagger ui */

‎src/sass/_mixins.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
@mixin export-to-css-vars($map) {
2-
:host, :root, ::before, ::after {
2+
body[data-bs-theme="light"], body[data-bs-theme="light"]::before, body[data-bs-theme="light"]::after {
3+
@each $key, $value in $map {
4+
--#{$key}: #{$value};
5+
}
6+
}
7+
}
8+
9+
@mixin export-to-css-vars-dark($map) {
10+
body[data-bs-theme="dark"], body[data-bs-theme="dark"]::before, body[data-bs-theme="dark"]::after {
311
@each $key, $value in $map {
412
--#{$key}: #{$value};
513
}

‎src/sass/_variables.scss

+16-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,19 @@ $colors: (
1111
color-text-secondary: #FFFFFF,
1212
neutral-01: #FFFFFF,
1313
neutral-08: #AFAFAF
14-
)
14+
);
15+
16+
$colors-dark: (
17+
color-background-default: #191919,
18+
color-background-tertiary: #FFFFFF,
19+
color-background-border:#696969,
20+
color-background-hover: #303030,
21+
color-background-container: #252525,
22+
color-background-success: #21712D,
23+
color-background-danger: #C52A1A,
24+
color-background-warning: #FFBF1F,
25+
color-text-body: #D1D1D1,
26+
color-text-secondary: #FFFFFF,
27+
neutral-01: #FFFFFF,
28+
neutral-08: #AFAFAF
29+
);

‎src/sass/components/_header.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
header{
22
height: 100%;
33
padding: 15px;
4-
border-bottom: 1px solid #d2d2d2;
4+
border-bottom: 1px solid var(--color-background-border);
55
.header-wrapper{
66
display: flex;
77
align-items: center;

‎src/sass/components/_leftMenu.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
display: flex;
1111
align-items: flex-end;
1212
.collapse-handle-icon{
13-
border-top: 0.0625rem solid #f2f2f2;
13+
border-top: 0.0625rem solid var(--color-background-border);
1414
width: 100%;
1515
padding: 10px 12px 10px 12px;
1616
text-align: right;

‎src/sass/index.scss

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "./variables";
33
@import "./mixins";
44
@include export-to-css-vars($colors);
5+
@include export-to-css-vars-dark($colors-dark);
56
@import "../node_modules/bootstrap/scss/bootstrap";
67
@import "swagger-ui-react/swagger-ui.css";
78

@@ -12,6 +13,10 @@
1213
@import "./components/header";
1314
@import "./components/footer";
1415

16+
body{
17+
background-color: var(--color-background-container);
18+
color: var(--color-text-body);
19+
}
1520
.app-wrapper{
1621
display: flex;
1722
height: calc(100vh - 110px);

0 commit comments

Comments
 (0)