Skip to content

Commit 42018aa

Browse files
Gerome-ElassaadGerome-Elassaad
committed
Add comprehensive light mode styling for CodeMirror editor
1 parent d3e9ae2 commit 42018aa

1 file changed

Lines changed: 71 additions & 4 deletions

File tree

‎app/styles/components/editor.scss‎

Lines changed: 71 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,78 @@
7171
--cm-searchMatch-backgroundColor: rgba(234, 92, 0, 0.4);
7272
}
7373

74-
/* Light theme overrides (if needed) */
74+
/* Light theme overrides */
7575
html[data-theme='light'] {
76-
--codinit-elements-editor-gutter-textColor: #237893;
77-
--codinit-elements-editor-gutter-activeLineTextColor: #111;
78-
--codinit-elements-editor-activeLineBackgroundColor: rgba(0, 0, 0, 0.04);
76+
/* Base colors */
77+
--cm-backgroundColor: #ffffff; /* editor background */
78+
--cm-textColor: #1f2937; /* primary text */
79+
80+
/* Gutter */
81+
--cm-gutter-backgroundColor: #ffffff;
82+
--cm-gutter-textColor: #9ca3af; /* muted gray */
83+
--cm-gutter-activeLineTextColor: #374151;
84+
85+
/* Fold Gutter */
86+
--cm-foldGutter-textColor: #9ca3af;
87+
--cm-foldGutter-textColorHover: #374151;
88+
89+
/* Active Line */
90+
--cm-activeLineBackgroundColor: rgba(0, 0, 0, 0.04); /* subtle */
91+
92+
/* Cursor */
93+
--cm-cursor-width: 2px;
94+
--cm-cursor-backgroundColor: #6b7280;
95+
96+
/* Matching Brackets */
97+
--cm-matching-bracket: rgba(59, 130, 246, 0.25);
98+
99+
/* Selection */
100+
--cm-selection-backgroundColorFocused: #3b82f6;
101+
--cm-selection-backgroundOpacityFocused: 0.25;
102+
103+
--cm-selection-backgroundColorBlured: #93c5fd;
104+
--cm-selection-backgroundOpacityBlured: 0.2;
105+
106+
/* Panels */
107+
--cm-panels-borderColor: rgba(0, 0, 0, 0.06);
108+
109+
/* Search */
110+
--cm-search-backgroundColor: #ffffff;
111+
--cm-search-textColor: #374151;
112+
113+
--cm-search-closeButton-backgroundColor: transparent;
114+
--cm-search-closeButton-backgroundColorHover: rgba(0, 0, 0, 0.08);
115+
116+
--cm-search-closeButton-textColor: #6b7280;
117+
--cm-search-closeButton-textColorHover: #1f2937;
118+
119+
--cm-search-button-backgroundColor: #f3f4f6;
120+
--cm-search-button-backgroundColorHover: rgba(0, 0, 0, 0.08);
121+
122+
--cm-search-button-textColor: #374151;
123+
--cm-search-button-textColorHover: #1f2937;
124+
125+
--cm-search-button-borderColor: transparent;
126+
--cm-search-button-borderColorHover: rgba(0, 0, 0, 0.15);
127+
128+
--cm-search-button-borderColorFocused: rgba(59, 130, 246, 0.8);
129+
130+
--cm-search-input-backgroundColor: #f9fafb;
131+
--cm-search-input-textColor: #1f2937;
132+
--cm-search-input-borderColor: rgba(0, 0, 0, 0.12);
133+
--cm-search-input-borderColorFocused: rgba(59, 130, 246, 0.9);
134+
135+
/* Tooltip */
136+
--cm-tooltip-backgroundColor: #ffffff;
137+
--cm-tooltip-textColor: #1f2937;
138+
139+
--cm-tooltip-backgroundColorSelected: rgba(59, 130, 246, 0.2);
140+
--cm-tooltip-textColorSelected: #1f2937;
141+
142+
--cm-tooltip-borderColor: rgba(0, 0, 0, 0.08);
143+
144+
/* Search highlight */
145+
--cm-searchMatch-backgroundColor: rgba(245, 101, 101, 0.4);
79146
}
80147

81148
/* Dark theme overrides */

0 commit comments

Comments
 (0)