Skip to content

Commit fe6c58d

Browse files
Gerome-ElassaadGerome-Elassaad
committed
darken code editor background for better contrast in dark mode
1 parent f52c610 commit fe6c58d

1 file changed

Lines changed: 31 additions & 16 deletions

File tree

‎app/styles/components/editor.scss‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
:root {
22
/* Base colors */
3-
--cm-backgroundColor: #0d1117; /* editor background */
4-
--cm-textColor: #f0f6fc; /* primary text */
3+
--cm-backgroundColor: #0d1117;
4+
/* editor background */
5+
--cm-textColor: #f0f6fc;
6+
/* primary text */
57

68
/* Gutter */
79
--cm-gutter-backgroundColor: #0d1117;
8-
--cm-gutter-textColor: #8b949e; /* muted gray */
10+
--cm-gutter-textColor: #8b949e;
11+
/* muted gray */
912
--cm-gutter-activeLineTextColor: #f0f6fc;
1013

1114
/* Fold Gutter */
1215
--cm-foldGutter-textColor: #8b949e;
1316
--cm-foldGutter-textColorHover: #f0f6fc;
1417

1518
/* Active Line */
16-
--cm-activeLineBackgroundColor: rgba(255, 255, 255, 0.04); /* subtle */
19+
--cm-activeLineBackgroundColor: rgba(255, 255, 255, 0.04);
20+
/* subtle */
1721

1822
/* Cursor */
1923
--cm-cursor-width: 2px;
@@ -74,20 +78,24 @@
7478
/* Light theme overrides */
7579
html[data-theme='light'] {
7680
/* Base colors */
77-
--cm-backgroundColor: #ffffff; /* editor background */
78-
--cm-textColor: #1f2937; /* primary text */
81+
--cm-backgroundColor: #ffffff;
82+
/* editor background */
83+
--cm-textColor: #1f2937;
84+
/* primary text */
7985

8086
/* Gutter */
8187
--cm-gutter-backgroundColor: #ffffff;
82-
--cm-gutter-textColor: #9ca3af; /* muted gray */
88+
--cm-gutter-textColor: #9ca3af;
89+
/* muted gray */
8390
--cm-gutter-activeLineTextColor: #374151;
8491

8592
/* Fold Gutter */
8693
--cm-foldGutter-textColor: #9ca3af;
8794
--cm-foldGutter-textColorHover: #374151;
8895

8996
/* Active Line */
90-
--cm-activeLineBackgroundColor: rgba(0, 0, 0, 0.04); /* subtle */
97+
--cm-activeLineBackgroundColor: rgba(0, 0, 0, 0.04);
98+
/* subtle */
9199

92100
/* Cursor */
93101
--cm-cursor-width: 2px;
@@ -147,12 +155,19 @@ html[data-theme='light'] {
147155

148156
/* Dark theme overrides - pure neutral gray */
149157
html[data-theme='dark'] {
150-
--cm-backgroundColor: #1f1f1f; /* Matches depth-2 for distinction from main background */
151-
--cm-gutter-backgroundColor: #1f1f1f; /* Consistent with editor background */
152-
--cm-activeLineBackgroundColor: rgba(255, 255, 255, 0.08); /* Subtle neutral highlight */
153-
--cm-selection-backgroundColorFocused: #cccccc; /* Neutral gray selection */
158+
--cm-backgroundColor: #09090b;
159+
/* Darker than depth-2 for contrast */
160+
--cm-gutter-backgroundColor: #09090b;
161+
/* Consistent with editor background */
162+
--cm-activeLineBackgroundColor: rgba(255, 255, 255, 0.08);
163+
/* Subtle neutral highlight */
164+
--cm-selection-backgroundColorFocused: #cccccc;
165+
/* Neutral gray selection */
154166
--cm-selection-backgroundOpacityFocused: 0.25;
155-
--cm-tooltip-backgroundColor: #252525; /* Matches depth-3 */
156-
--cm-tooltip-borderColor: rgba(153, 153, 153, 0.2); /* Neutral border */
157-
--cm-panels-borderColor: rgba(153, 153, 153, 0.1); /* Neutral panel borders */
158-
}
167+
--cm-tooltip-backgroundColor: #252525;
168+
/* Matches depth-3 */
169+
--cm-tooltip-borderColor: rgba(153, 153, 153, 0.2);
170+
/* Neutral border */
171+
--cm-panels-borderColor: rgba(153, 153, 153, 0.1);
172+
/* Neutral panel borders */
173+
}

0 commit comments

Comments
 (0)