web ui: Tweak colors in the dark theme to improve contrast ratio (#11068)

* Tweak colors in the dark theme to improve contrast

Some colors from the dark theme used in the query editor have a very low
contrast ratio with the background.

Signed-off-by: Jorge Luis Betancourt Gonzalez <jorge-luis.betancourt@trivago.com>

* Avoid duplicated function call when in dark mode

Co-authored-by: Julius Volz <julius.volz@gmail.com>
Signed-off-by: Jorge Luis Betancourt Gonzalez <jorge-luis.betancourt@trivago.com>

* Apply styles for the matching bracket when focused in dark mode

Signed-off-by: Jorge Luis Betancourt Gonzalez <jorge-luis.betancourt@trivago.com>

* Improve style of the matching brackets when focused

Signed-off-by: Jorge Luis Betancourt Gonzalez <jorge-luis.betancourt@trivago.com>

Co-authored-by: Julius Volz <julius.volz@gmail.com>

web/ui/react-app/src/pages/graph/CMTheme.tsx

@@ -19,8 +19,6 @@ export const baseTheme = EditorView.theme({
   },
 
   '.cm-matchingBracket': {
-    color: '#000',
-    backgroundColor: '#dedede',
     fontWeight: 'bold',
     outline: '1px dashed transparent',
   },
@@ -82,7 +80,6 @@ export const baseTheme = EditorView.theme({
   '.cm-completionMatchedText': {
     textDecoration: 'none',
     fontWeight: 'bold',
-    color: '#0066bf',
   },
 
   '.cm-selectionMatch': {
@@ -105,12 +102,10 @@ export const baseTheme = EditorView.theme({
     fontFamily: 'codicon',
     paddingRight: '0',
     opacity: '1',
-    color: '#007acc',
   },
 
   '.cm-completionIcon-function, .cm-completionIcon-method': {
     '&:after': { content: "'\\ea8c'" },
-    color: '#652d90',
   },
   '.cm-completionIcon-class': {
     '&:after': { content: "'○'" },
@@ -123,7 +118,6 @@ export const baseTheme = EditorView.theme({
   },
   '.cm-completionIcon-constant': {
     '&:after': { content: "'\\eb5f'" },
-    color: '#007acc',
   },
   '.cm-completionIcon-type': {
     '&:after': { content: "'𝑡'" },
@@ -136,7 +130,6 @@ export const baseTheme = EditorView.theme({
   },
   '.cm-completionIcon-keyword': {
     '&:after': { content: "'\\eb62'" },
-    color: '#616161',
   },
   '.cm-completionIcon-namespace': {
     '&:after': { content: "'▢'" },
@@ -187,6 +180,31 @@ export const lightTheme = EditorView.theme(
         backgroundColor: '#add6ff',
       },
     },
+
+    '.cm-matchingBracket': {
+      color: '#000',
+      backgroundColor: '#dedede',
+    },
+
+    '.cm-completionMatchedText': {
+      color: '#0066bf',
+    },
+
+    '.cm-completionIcon': {
+      color: '#007acc',
+    },
+
+    '.cm-completionIcon-constant': {
+      color: '#007acc',
+    },
+
+    '.cm-completionIcon-function, .cm-completionIcon-method': {
+      color: '#652d90',
+    },
+
+    '.cm-completionIcon-keyword': {
+      color: '#616161',
+    },
   },
   { dark: false }
 );
@@ -220,6 +238,26 @@ export const darkTheme = EditorView.theme(
         backgroundColor: '#767676',
       },
     },
+
+    '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': {
+      backgroundColor: '#616161',
+    },
+
+    '.cm-completionMatchedText': {
+      color: '#7dd3fc',
+    },
+
+    '.cm-completionIcon, .cm-completionIcon-constant': {
+      color: '#7dd3fc',
+    },
+
+    '.cm-completionIcon-function, .cm-completionIcon-method': {
+      color: '#d8b4fe',
+    },
+
+    '.cm-completionIcon-keyword': {
+      color: '#cbd5e1 !important',
+    },
   },
   { dark: true }
 );
@@ -239,3 +277,19 @@ export const promqlHighlighter = HighlightStyle.define([
   { tag: tags.invalid, color: 'red' },
   { tag: tags.comment, color: '#888', fontStyle: 'italic' },
 ]);
+
+export const darkPromqlHighlighter = HighlightStyle.define([
+  { tag: tags.name, color: '#000' },
+  { tag: tags.number, color: '#22c55e' },
+  { tag: tags.string, color: '#fca5a5' },
+  { tag: tags.keyword, color: '#14bfad' },
+  { tag: tags.function(tags.variableName), color: '#14bfad' },
+  { tag: tags.labelName, color: '#ff8585' },
+  { tag: tags.operator },
+  { tag: tags.modifier, color: '#14bfad' },
+  { tag: tags.paren },
+  { tag: tags.squareBracket },
+  { tag: tags.brace },
+  { tag: tags.invalid, color: '#ff3d3d' },
+  { tag: tags.comment, color: '#9ca3af', fontStyle: 'italic' },
+]);

web/ui/react-app/src/pages/graph/ExpressionInput.tsx

@@ -15,7 +15,7 @@ import {
   closeBrackets,
   closeBracketsKeymap,
 } from '@codemirror/autocomplete';
-import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme';
+import { baseTheme, lightTheme, darkTheme, promqlHighlighter, darkPromqlHighlighter } from './CMTheme';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faSpinner, faGlobeEurope, faIndent, faCheck } from '@fortawesome/free-solid-svg-icons';
@@ -117,8 +117,14 @@ const ExpressionInput: FC<CMExpressionInputProps> = ({
           queryHistory
         ),
       });
+
+    let highlighter = syntaxHighlighting(theme === 'dark' ? darkPromqlHighlighter : promqlHighlighter);
+    if (theme === 'dark') {
+      highlighter = syntaxHighlighting(darkPromqlHighlighter);
+    }
+
     const dynamicConfig = [
-      enableHighlighting ? syntaxHighlighting(promqlHighlighter) : [],
+      enableHighlighting ? highlighter : [],
       promqlExtension.asExtension(),
       theme === 'dark' ? darkTheme : lightTheme,
     ];

web/ui/react-app/src/themes/_shared.scss

@@ -114,7 +114,7 @@ button.execute-btn {
 }
 
 input[type='checkbox']:checked + label {
-  color: #286090;
+  color: $checked-checkbox-color;
 }
 
 .custom-control-label {

web/ui/react-app/src/themes/dark.scss

@@ -11,12 +11,14 @@ $config-yaml-color: $black;
 $config-yaml-bg: $gray-500;
 $config-yaml-border: $gray-700;
 
-$query-stats-color: $secondary;
+$query-stats-color: lighten($secondary, 20%);
 
 $metrics-explorer-bg: $dropdown-link-hover-bg;
 
 $clear-time-btn-bg: $secondary;
 
+$checked-checkbox-color: #60a5fa;
+
 .bootstrap-dark {
   @import './shared';
 }

web/ui/react-app/src/themes/light.scss

@@ -16,6 +16,8 @@ $metrics-explorer-bg: #efefef;
 
 $clear-time-btn-bg: $white;
 
+$checked-checkbox-color: #286090;
+
 .bootstrap {
   @import './shared';
 }