fix: #138 text of tooltip in text mode not readable when using a dark…

… theme
josdejong · Sep 9, 2022 · 5e7790e · 5e7790e
1 parent 60a65d9
commit 5e7790e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/src/lib/components/modes/textmode/TextMode.scss b/src/lib/components/modes/textmode/TextMode.scss
@@ -73,9 +73,17 @@
         padding: 0 $padding;
       }
 
-      :global(.cm-diagnostic) {
+      :global(.cm-tooltip) {
         font-size: var(--jse-font-size);
         font-family: var(--jse-font-family);
+        color: var(--jse-tooltip-color);
+        background: var(--jse-tooltip-background);
+        border: var(--jse-tooltip-border);
+      }
+
+      :global(.cm-diagnosticAction) {
+        background: var(--jse-tooltip-action-button-color);
+        background: var(--jse-tooltip-action-button-background);
       }
 
       :global(.cm-panels) {

diff --git a/src/lib/themes/jse-theme-dark.css b/src/lib/themes/jse-theme-dark.css
@@ -12,6 +12,13 @@
   --jse-modal-overlay-background: rgba(0, 0, 0, 0.5);
   --jse-modal-code-background: #2f2f2f;
 
+  /* tooltip in text mode */
+  --jse-tooltip-color: var(--jse-text-color);
+  --jse-tooltip-background: #4b4b4b;
+  --jse-tooltip-border: 1px solid #737373;
+  --jse-tooltip-action-button-color: inherit;
+  --jse-tooltip-action-button-background: #737373;
+
   /* panels: navigation bar, gutter, search box */
   --jse-panel-background: #333333;
   --jse-panel-background-border: 1px solid #464646;

diff --git a/src/lib/themes/jse-theme-default.css b/src/lib/themes/jse-theme-default.css
@@ -28,6 +28,13 @@
   --jse-modal-overlay-background: rgba(0, 0, 0, 0.3);
   --jse-modal-code-background: rgba(0, 0, 0, 0.05);
 
+  /* tooltip in text mode */
+  --jse-tooltip-color: var(--jse-text-color);
+  --jse-tooltip-background: var(--jse-modal-background);
+  --jse-tooltip-border: var(--jse-main-border);
+  --jse-tooltip-action-button-color: var(--jse-text-color-inverse);
+  --jse-tooltip-action-button-background: #4d4d4d;
+
   /* panels: navigation bar, gutter, search box */
   --jse-panel-background: #ebebeb;
   --jse-panel-color: var(--jse-text-color);