Make markdown preview inherit current IDE theme colors

plugins/markdown/resource/org/intellij/plugins/markdown/settings/default.css

@@ -678,8 +678,7 @@ span.user-del {
 }
 ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 10px;
-    border: 2px solid #f6f6f6;
-
+    /*border: 2px solid #f6f6f6;*/
     background-color: #959595;
 }
 ::-webkit-scrollbar-track {
@@ -692,5 +691,11 @@ span.user-del {
 
 ::-webkit-scrollbar-track:horizontal {
     -webkit-box-shadow: 0 -1px 0px #ededed;
+}
 
-}
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+::-webkit-scrollbar {
+    width: 7px;
+}

plugins/markdown/src/org/intellij/plugins/markdown/extensions/highlighter/MarkdownCodeFencePreviewHighlighter.kt

@@ -2,6 +2,7 @@
 package org.intellij.plugins.markdown.extensions.highlighter
 
 import com.intellij.lang.Language
+import com.intellij.openapi.editor.colors.EditorColorsManager
 import com.intellij.openapi.fileTypes.SyntaxHighlighterFactory
 import com.intellij.testFramework.LightVirtualFile
 import org.intellij.markdown.html.entities.EntityConverter
@@ -80,11 +81,14 @@ internal class MarkdownCodeFencePreviewHighlighter : MarkdownCodeFencePluginGene
     lexer.start(text)
 
     val html = StringBuilder(text.length)
+    val colorScheme = EditorColorsManager.getInstance().globalScheme
 
     while (lexer.tokenType != null) {
       val type = lexer.tokenType
       val highlights = highlighter.getTokenHighlights(type).lastOrNull()
-      val color = highlights?.defaultAttributes?.foregroundColor
+      val color = highlights?.let {
+        colorScheme.getAttributes(it)?.foregroundColor
+      } ?: highlights?.defaultAttributes?.foregroundColor
 
       val current = if (color != null) {
         //deprecated font tag is used since JavaFX HTML Viewer does not support span tag with style
@@ -102,4 +106,4 @@ internal class MarkdownCodeFencePreviewHighlighter : MarkdownCodeFencePluginGene
   private fun Color.toHex(): String = String.format("#%02x%02x%02x", red, green, blue)
 
   private fun escape(html: String) = EntityConverter.replaceEntities(html, processEntities = true, processEscapes = true)
-}
+}

plugins/markdown/src/org/intellij/plugins/markdown/settings/MarkdownApplicationSettings.java

@@ -29,7 +29,7 @@ public MarkdownApplicationSettings() {
     ApplicationManager.getApplication().getMessageBus().connect().subscribe(LafManagerListener.TOPIC, lafListener);
     // Let's init proper CSS scheme
     ApplicationManager.getApplication().invokeLater(() -> {
-      MarkdownLAFListener.reinit(StartupUiUtil.isUnderDarcula());
+      MarkdownLAFListener.reinit();
     });
   }
 
@@ -58,8 +58,7 @@ public void setMarkdownCssSettings(@NotNull MarkdownCssSettings settings) {
   @NotNull
   @Override
   public MarkdownCssSettings getMarkdownCssSettings() {
-    if (MarkdownCssSettings.DARCULA.getStylesheetUri().equals(myState.myCssSettings.getStylesheetUri())
-        || MarkdownCssSettings.DEFAULT.getStylesheetUri().equals(myState.myCssSettings.getStylesheetUri())) {
+    if (MarkdownCssSettings.DEFAULT.getStylesheetUri().equals(myState.myCssSettings.getStylesheetUri())) {
       return new MarkdownCssSettings(false,
                                      "",
                                      myState.myCssSettings.isTextEnabled(),

plugins/markdown/src/org/intellij/plugins/markdown/settings/MarkdownCssSettings.java

@@ -2,16 +2,14 @@
 package org.intellij.plugins.markdown.settings;
 
 import com.intellij.openapi.diagnostic.Logger;
-import com.intellij.util.ui.StartupUiUtil;
 import com.intellij.util.xmlb.annotations.Attribute;
 import org.jetbrains.annotations.NotNull;
 
 import java.net.URISyntaxException;
 import java.net.URL;
 
 public final class MarkdownCssSettings {
-  public static final MarkdownCssSettings DEFAULT = new MarkdownCssSettings(false);
-  public static final MarkdownCssSettings DARCULA = new MarkdownCssSettings(true);
+  public static final MarkdownCssSettings DEFAULT = new MarkdownCssSettings();
 
   @SuppressWarnings("FieldMayBeFinal")
   @Attribute("UriEnabled")
@@ -32,11 +30,7 @@ public final class MarkdownCssSettings {
   private String myStylesheetText;
 
   private MarkdownCssSettings() {
-    this(StartupUiUtil.isUnderDarcula());
-  }
-
-  private MarkdownCssSettings(boolean isDarcula) {
-    this(false, getPredefinedCssURI(isDarcula), false, "");
+    this(false, getDefaultCssURI(), false, "");
   }
 
   public MarkdownCssSettings(boolean uriEnabled, @NotNull String stylesheetUri, boolean textEnabled, @NotNull String stylesheetText) {
@@ -79,16 +73,19 @@ public boolean equals(Object o) {
     return true;
   }
 
+  /**
+   * @deprecated use {@link DEFAULT} instead
+   */
   @NotNull
+  @Deprecated
   public static MarkdownCssSettings getDefaultCssSettings(boolean isDarcula) {
-    return isDarcula ? DARCULA : DEFAULT;
+    return DEFAULT;
   }
 
   @NotNull
-  private static String getPredefinedCssURI(boolean isDarcula) {
-    final String fileName = isDarcula ? "darcula.css" : "default.css";
+  private static String getDefaultCssURI() {
     try {
-      final URL resource = MarkdownCssSettings.class.getResource(fileName);
+      final URL resource = MarkdownCssSettings.class.getResource("default.css");
       return resource != null ? resource.toURI().toString() : "";
     }
     catch (URISyntaxException e) {

plugins/markdown/src/org/intellij/plugins/markdown/settings/MarkdownLAFListener.java

@@ -7,33 +7,38 @@
 import com.intellij.openapi.util.text.StringUtil;
 import org.intellij.plugins.markdown.extensions.MarkdownCodeFencePluginGeneratingProvider;
 import org.jetbrains.annotations.NotNull;
-import org.jetbrains.annotations.Nullable;
-
-import javax.swing.*;
 
 class MarkdownLAFListener implements LafManagerListener {
   @Override
   public void lookAndFeelChanged(@NotNull LafManager source) {
-    final UIManager.LookAndFeelInfo newLookAndFeel = source.getCurrentLookAndFeel();
-    final boolean isNewLookAndFeelDarcula = isDarcula(newLookAndFeel);
-
-    reinit(isNewLookAndFeelDarcula);
+    reinit();
   }
 
   /**
    * Reinitialize plugin after change in look and feel.
    * <p>
    * For example, it would reinitialize preview and clear caches
+   * @deprecated use {@link #reinit()} instead
    */
+  @Deprecated
   public static void reinit(boolean isDarcula) {
+    reinit();
+  }
+
+  /**
+   * Reinitialize plugin after change in look and feel.
+   * <p>
+   * For example, it would reinitialize preview and clear caches
+   */
+  public static void reinit() {
     MarkdownCodeFencePluginGeneratingProvider.Companion.notifyLAFChanged();
-    updateCssSettingsForced(isDarcula);
+    updateCssSettingsForced();
   }
 
-  private static void updateCssSettingsForced(boolean isDarcula) {
+  private static void updateCssSettingsForced() {
     final MarkdownCssSettings currentCssSettings = MarkdownApplicationSettings.getInstance().getMarkdownCssSettings();
     final String stylesheetUri = StringUtil.isEmpty(currentCssSettings.getStylesheetUri())
-                                 ? MarkdownCssSettings.getDefaultCssSettings(isDarcula).getStylesheetUri()
+                                 ? MarkdownCssSettings.DEFAULT.getStylesheetUri()
                                  : currentCssSettings.getStylesheetUri();
 
     MarkdownApplicationSettings.getInstance().setMarkdownCssSettings(new MarkdownCssSettings(
@@ -47,11 +52,4 @@ private static void updateCssSettingsForced(boolean isDarcula) {
       .syncPublisher(MarkdownApplicationSettings.SettingsChangedListener.TOPIC)
       .settingsChanged(MarkdownApplicationSettings.getInstance());
   }
-
-  public static boolean isDarcula(@Nullable UIManager.LookAndFeelInfo laf) {
-    if (laf == null) {
-      return false;
-    }
-    return laf.getName().contains("Darcula");
-  }
-}
+}

plugins/markdown/src/org/intellij/plugins/markdown/ui/preview/MarkdownHtmlPanel.java

@@ -16,7 +16,11 @@
 public interface MarkdownHtmlPanel extends Disposable {
   List<String> SCRIPTS = ContainerUtil.immutableList("processLinks.js", "scrollToElement.js");
 
-  List<String> STYLES = ContainerUtil.immutableList("default.css", "darcula.css", PreviewStaticServer.INLINE_CSS_FILENAME);
+  List<String> STYLES = ContainerUtil.immutableList(
+    "default.css",
+    PreviewStaticServer.COLOR_THEME_CSS_FILENAME,
+    PreviewStaticServer.INLINE_CSS_FILENAME
+  );
 
   @NotNull
   JComponent getComponent();
@@ -63,9 +67,6 @@ static String migrateUriToHttp(@NotNull String uri) {
     if (uri.equals(MarkdownCssSettings.DEFAULT.getStylesheetUri())) {
       return PreviewStaticServer.getStyleUrl("default.css");
     }
-    else if (uri.equals(MarkdownCssSettings.DARCULA.getStylesheetUri())) {
-      return PreviewStaticServer.getStyleUrl("darcula.css");
-    }
     else {
       return uri;
     }

plugins/markdown/src/org/intellij/plugins/markdown/ui/preview/MarkdownPreviewFileEditor.java

@@ -378,13 +378,13 @@ private void updatePanelCssSettings(@NotNull MarkdownHtmlPanel panel, @NotNull M
     String styles = getCustomStyles();
 
     if (styles != null) {
-      panel.setCSS(styles, MarkdownCssSettings.getDefaultCssSettings(StartupUiUtil.isUnderDarcula()).getStylesheetUri());
+      panel.setCSS(styles, MarkdownCssSettings.DEFAULT.getStylesheetUri());
     }
     else {
       String inlineCss = cssSettings.isTextEnabled() ? cssSettings.getStylesheetText() : null;
       String customCssURI = cssSettings.isUriEnabled()
                             ? cssSettings.getStylesheetUri()
-                            : MarkdownCssSettings.getDefaultCssSettings(StartupUiUtil.isUnderDarcula()).getStylesheetUri();
+                            : MarkdownCssSettings.DEFAULT.getStylesheetUri();
 
       panel.setCSS(inlineCss, customCssURI);
     }

plugins/markdown/src/org/intellij/plugins/markdown/ui/preview/PreviewColorThemeStyles.kt

@@ -0,0 +1,96 @@
+// Copyright 2000-2020 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file.
+package org.intellij.plugins.markdown.ui.preview
+
+import com.intellij.openapi.editor.colors.EditorColors
+import com.intellij.openapi.editor.colors.EditorColorsManager
+import com.intellij.util.ui.UIUtil
+import java.awt.Color
+
+internal object PreviewColorThemeStyles {
+  /**
+   * This method will generate stylesheet with color rules for markdown elements,
+   * matching current IDE colors. Generated rules will override base rules from the
+   * default.css, so the preview elements will have (almost*) correct colors.
+   *
+   * *There will be no dedicated color for code blocks, if current IDE color theme defines same
+   * colors for UI panels and editor background (seems fine, though).
+   *
+   * @return String containing generated CSS rules.
+   */
+  @JvmStatic
+  fun createStylesheet(): String {
+    val panelBackground = UIUtil.getPanelBackground()
+    with (EditorColorsManager.getInstance().globalScheme) {
+      // For some reason background-color for ::-webkit-scrollbar-thumb
+      // doesn't work with [0..255] alpha values. Fortunately it works fine with [0..1] values.
+      // Default color from base stylesheets will be used, if the final value is null.
+      // (Generated rule will be invalid)
+      val scrollbarColor = getColor(EditorColors.SCROLLBAR_THUMB_COLOR)?.run {
+        "rgba($red, $blue, $green, ${alpha / 255.0})"
+      }
+      val contrastedForeground = defaultForeground.contrast(0.1)
+      val contrastedBackground = panelBackground.contrast(0.1)
+      val linkColor = getAttributes(EditorColors.REFERENCE_HYPERLINK_COLOR).foregroundColor
+      // language=CSS
+      return """
+        body {
+          background-color: ${defaultBackground.webRgba()};
+          color: ${defaultForeground.webRgba()};
+        }
+        a {
+          color: ${linkColor.webRgba()};
+        }
+        hr {
+          background-color: ${panelBackground.webRgba()};
+        }
+        h6 {
+          color: ${contrastedForeground.webRgba()};
+        }
+        pre {
+          background-color: ${panelBackground.webRgba()};
+        }
+        pre > code {
+          color: ${defaultForeground.webRgba()};
+        }
+        table tr {
+          color: ${defaultForeground.webRgba()};
+        }
+        table th, table td, table tr {
+          background-color: ${defaultBackground.webRgba()};
+          border-color: ${defaultBackground.contrast(0.85).webRgba()};
+        }
+        table tr:nth-child(even) td {
+          background-color: ${defaultBackground.contrast(0.93).webRgba()};
+        }
+        blockquote {
+          border-left-color: ${contrastedBackground.webRgba()};
+        }
+        blockquote > p {
+          color: ${contrastedForeground.webRgba()};
+        }
+        :checked + .radio-label {
+          border-color: ${panelBackground.webRgba()};
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: $scrollbarColor;
+        }
+      """.trimIndent()
+    }
+  }
+
+  private fun Color.webRgba() = "rgba($red, $green, $blue, $alpha)"
+
+  /**
+   * Simple linear contrast function.
+   *
+   * 0 < coefficient < 1 results in reduced contrast.
+   * coefficient > 1 results in increased contrast.
+   */
+  private fun Color.contrast(coefficient: Double) =
+    Color(
+      (coefficient * (red - 128) + 128).toInt(),
+      (coefficient * (green - 128) + 128).toInt(),
+      (coefficient * (blue - 128) + 128).toInt(),
+      alpha
+    )
+}

plugins/markdown/src/org/intellij/plugins/markdown/ui/preview/PreviewStaticServer.java

@@ -29,11 +29,14 @@
 
 public class PreviewStaticServer extends HttpRequestHandler {
   public static final String INLINE_CSS_FILENAME = "inline.css";
+  public static final String COLOR_THEME_CSS_FILENAME = "colors.css";
   private static final Logger LOG = Logger.getInstance(PreviewStaticServer.class);
   private static final String PREFIX = "/4f800f8a-bbed-4dd8-b03c-00449c9f6698/";
 
   private byte @Nullable [] myInlineStyleBytes = null;
   private long myInlineStyleTimestamp = 0;
+  private byte @Nullable [] myColorThemeStylesBytes = null;
+  private long myColorThemeStylesTimestamp = 0;
 
   public static PreviewStaticServer getInstance() {
     return HttpRequestHandler.Companion.getEP_NAME().findExtension(PreviewStaticServer.class);
@@ -68,6 +71,11 @@ public void setInlineStyle(@Nullable String inlineStyle) {
     myInlineStyleTimestamp = System.currentTimeMillis();
   }
 
+  public void setColorThemeStyles(@Nullable String overrides) {
+    myColorThemeStylesBytes = overrides == null ? null : overrides.getBytes(StandardCharsets.UTF_8);
+    myColorThemeStylesTimestamp = System.currentTimeMillis();
+  }
+
   @Override
   public boolean isSupported(@NotNull FullHttpRequest request) {
     return super.isSupported(request) && request.uri().startsWith(PREFIX);
@@ -99,7 +107,10 @@ public boolean process(@NotNull QueryStringDecoder urlDecoder,
     }
     else if ("styles".equals(contentType) && MarkdownHtmlPanel.STYLES.contains(fileName)) {
       if (INLINE_CSS_FILENAME.equals(fileName)) {
-        sendInlineStyle(request, context.channel());
+        sendStyleFromMemory(myInlineStyleBytes, myInlineStyleTimestamp, request, context.channel());
+      }
+      else if (COLOR_THEME_CSS_FILENAME.equals(fileName)) {
+        sendStyleFromMemory(myColorThemeStylesBytes, myColorThemeStylesTimestamp, request, context.channel());
       }
       else {
         sendResource(request,
@@ -115,22 +126,21 @@ else if ("styles".equals(contentType) && MarkdownHtmlPanel.STYLES.contains(fileN
     return true;
   }
 
-
-  private void sendInlineStyle(@NotNull HttpRequest request, @NotNull Channel channel) {
-    if (FileResponses.INSTANCE.checkCache(request, channel, myInlineStyleTimestamp)) {
+  private static void sendStyleFromMemory(@Nullable byte[] content, long timestamp, @NotNull HttpRequest request, @NotNull Channel channel) {
+    if (FileResponses.INSTANCE.checkCache(request, channel, timestamp)) {
       return;
     }
 
-    if (myInlineStyleBytes == null) {
+    if (content == null) {
       Responses.send(HttpResponseStatus.NOT_FOUND, channel, request);
       return;
     }
 
     FullHttpResponse response =
-      new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.OK, Unpooled.wrappedBuffer(myInlineStyleBytes));
+      new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.OK, Unpooled.wrappedBuffer(content));
     response.headers().set(HttpHeaderNames.CONTENT_TYPE, "text/css");
     response.headers().set(HttpHeaderNames.CACHE_CONTROL, "private, must-revalidate");
-    response.headers().set(HttpHeaderNames.LAST_MODIFIED, new Date(myInlineStyleTimestamp));
+    response.headers().set(HttpHeaderNames.LAST_MODIFIED, new Date(timestamp));
     Responses.send(response, channel, request);
   }