refactor: CSS rules to support IDE themes (#548)

- Added CSS rules to toggle arrow icons based on the IDE theme. - Fixes code diff color for high contrast themes. Related to the migration from tab-based to arrow-based navigation for Code Issue panel (see PR [#540](snyk/snyk-ls#540)).
snyk · Jun 13, 2024 · 9237abd · 9237abd
1 parent b698279
commit 9237abd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt b/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt
@@ -48,8 +48,26 @@ class OpenFileLoadHandlerGenerator(snykFile: SnykFile) {
         return n.coerceIn(0, 255)
     }
 
+    fun getCodeDiffColors(baseColor: Color, isHighContrast: Boolean): Pair<Color, Color> {
+        val addedColor = if (isHighContrast) {
+            Color(28, 68, 40) // high contrast green
+        } else {
+            Color(shift(baseColor.red, 0.75), baseColor.green, shift(baseColor.blue, 0.75))
+        }
+
+        val removedColor = if (isHighContrast) {
+            Color(84, 36, 38)  // high contrast red
+        } else {
+            Color(shift(baseColor.red, 1.25), shift(baseColor.green, 0.85), shift(baseColor.blue, 0.85))
+        }
+        return Pair(addedColor, removedColor)
+    }
+
     fun generate(jbCefBrowser: JBCefBrowserBase): CefLoadHandlerAdapter {
         val openFileQuery = JBCefJSQuery.create(jbCefBrowser)
+        val isDarkTheme = EditorColorsManager.getInstance().isDarkEditor
+        val isHighContrast = EditorColorsManager.getInstance().globalScheme.name.contains("High contrast", ignoreCase = true)
+
         openFileQuery.addHandler { openFile(it) }
 
         return object : CefLoadHandlerAdapter() {
@@ -91,16 +109,7 @@ class OpenFileLoadHandlerGenerator(snykFile: SnykFile) {
                     browser.executeJavaScript(script, browser.url, 0)
 
                     val baseColor = UIUtil.getTextFieldBackground()
-                    val addedColor = Color(
-                        shift(baseColor.red, 0.75),
-                        baseColor.green,
-                        shift(baseColor.blue, 0.75)
-                    )
-                    val removedColor = Color(
-                        shift(baseColor.red, 1.25),
-                        shift(baseColor.green, 0.85),
-                        shift(baseColor.blue, 0.85)
-                    )
+                    val (addedColor, removedColor) = getCodeDiffColors(baseColor, isHighContrast)
 
                     val textColor = toCssHex(JBColor.namedColor("Label.foreground", JBColor.BLACK))
                     val linkColor = toCssHex(JBColor.namedColor("Link.activeForeground", JBColor.BLUE))
@@ -131,6 +140,11 @@ class OpenFileLoadHandlerGenerator(snykFile: SnykFile) {
                             for (let [property, value] of Object.entries(properties)) {
                                 document.documentElement.style.setProperty(property, value);
                             }
+
+                            // Add theme class to body
+                            const isDarkTheme = ${isDarkTheme};
+                            const isHighContrast = ${isHighContrast};
+                            document.body.classList.add(isHighContrast ? 'high-contrast' : (isDarkTheme ? 'dark' : 'light'));
                         })();
                         """
                     browser.executeJavaScript(themeScript, browser.url, 0)

diff --git a/src/main/resources/stylesheets/snyk_code_suggestion.scss b/src/main/resources/stylesheets/snyk_code_suggestion.scss
@@ -95,3 +95,13 @@ a,
 .ignore-action-container {
   display: none;
 }
+
+.light .dark-only,
+.high-contrast.high-contrast-light .dark-only {
+  display: none;
+}
+
+.dark .light-only,
+.high-contrast:not(.high-contrast-light) .light-only {
+  display: none;
+}