Add Asciidoctor Tabs darcula CSS theme (#1425)

asciidoctor · Oct 5, 2023 · c251b65 · c251b65
1 parent 082f5b1
commit c251b65
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -11,6 +11,7 @@ This document provides a high-level view of the changes introduced by release.
 
 - Downgrade to PlantUML 1.2023.5 to avoid problems with Ditaa, grapviz and icons (#1446)
 - Add Asciidoctor Tabs CSS also when converting to HTML (#1425)
+- Add Asciidoctor Tabs darcula CSS theme (#1425)
 
 === 0.40.4
 

diff --git a/src/main/java/org/asciidoc/intellij/editor/browser/BrowserPanel.java b/src/main/java/org/asciidoc/intellij/editor/browser/BrowserPanel.java
@@ -81,6 +81,9 @@ public class BrowserPanel implements Disposable {
   @Nullable
   private String myInlineCss;
   private String myTabsCss;
+
+  @Nullable
+  private String myTabsCssDarcula;
   @Nullable
   private String myInlineCssDarcula;
   @Nullable
@@ -134,6 +137,9 @@ public BrowserPanel() {
       try (InputStream is = JavaFxHtmlPanel.class.getResourceAsStream("darcula.css")) {
         myInlineCssDarcula = myInlineCss + IOUtils.toString(is, StandardCharsets.UTF_8);
       }
+      try (InputStream is = JavaFxHtmlPanel.class.getResourceAsStream("/tabs/data/css/tabs-darcula.css")) {
+        myTabsCssDarcula = IOUtils.toString(is, StandardCharsets.UTF_8);
+      }
       myAntoraCssLink = "<link rel=\"stylesheet\" data-default href=\"" + PreviewStaticServer.getStyleUrl("antora/preview.css") + "\">";
       myAntoraDarculaCssLink = "<link rel=\"stylesheet\" data-default href=\"" + PreviewStaticServer.getStyleUrl("antora/preview-darcula.css") + "\">";
       myFontAwesomeCssLink = "<link rel=\"stylesheet\" data-default href=\"" + PreviewStaticServer.getStyleUrl("font-awesome/css/font-awesome.min.css") + "\">";
@@ -406,9 +412,9 @@ private String prepareHtml(@NotNull String html, Project project, Map<String, St
 
     /* Add CSS line and JavaScript */
     if (isAntora) {
-      html = AsciiDocWrapper.enrichPage(html, (isDarcula() ? myAntoraDarculaCssLink : myAntoraCssLink) + myFontAwesomeCssLink + getCssLines(myTabsCss), myMermaidScript, myAsciidoctorTabsScript, attributes, project);
+      html = AsciiDocWrapper.enrichPage(html, (isDarcula() ? myAntoraDarculaCssLink : myAntoraCssLink) + myFontAwesomeCssLink + getCssLines(myTabsCss + (isDarcula() ? myTabsCssDarcula : "")), myMermaidScript, myAsciidoctorTabsScript, attributes, project);
     } else {
-      html = AsciiDocWrapper.enrichPage(html, getCssLines(isDarcula() ? myInlineCssDarcula : myInlineCss) + myFontAwesomeCssLink + myGoogleFontsCssLink + myDroidSansMonoCssLink + myDejavuCssLink, myMermaidScript, myAsciidoctorTabsScript, attributes, project);
+      html = AsciiDocWrapper.enrichPage(html, getCssLines(isDarcula() ? myInlineCssDarcula + myTabsCssDarcula : myInlineCss) + myFontAwesomeCssLink + myGoogleFontsCssLink + myDejavuCssLink, myMermaidScript, myAsciidoctorTabsScript, attributes, project);
     }
     html = html.replace("</body>", getScriptingLines() + "</body>");
     return html;

diff --git a/src/main/java/org/asciidoc/intellij/editor/jcef/AsciiDocJCEFHtmlPanel.java b/src/main/java/org/asciidoc/intellij/editor/jcef/AsciiDocJCEFHtmlPanel.java
@@ -249,6 +249,9 @@ public void onLoadEnd(CefBrowser browser, CefFrame frame, int httpStatusCode) {
       try (InputStream is = JavaFxHtmlPanel.class.getResourceAsStream("darcula.css")) {
         myInlineCssDarcula = myInlineCss + IOUtils.toString(is, StandardCharsets.UTF_8);
       }
+      try (InputStream is = JavaFxHtmlPanel.class.getResourceAsStream("/tabs/data/css/tabs-darcula.css")) {
+        myTabsCssDarcula = IOUtils.toString(is, StandardCharsets.UTF_8);
+      }
       myAntoraCssLink = "<link rel=\"stylesheet\" data-default href=\"" + PreviewStaticServer.getStyleUrl("antora/preview.css") + "\">";
       myAntoraDarculaCssLink = "<link rel=\"stylesheet\" data-default href=\"" + PreviewStaticServer.getStyleUrl("antora/preview-darcula.css") + "\">";
       myFontAwesomeCssLink = "<link rel=\"stylesheet\" data-default href=\"" + PreviewStaticServer.getStyleUrl("font-awesome/css/font-awesome.min.css") + "\">";
@@ -556,6 +559,8 @@ private String extractAndPatchAsciidoctorCss(String asciidoctorVersion) throws I
   @Nullable
   private String myTabsCss;
   @Nullable
+  private String myTabsCssDarcula;
+  @Nullable
   private String myInlineCssDarcula;
   @Nullable
   private String myFontAwesomeCssLink;
@@ -833,9 +838,9 @@ private String prepareHtml(@NotNull String html, @NotNull Map<String, String> at
     }
 
     if (isAntora()) {
-      html = AsciiDocWrapper.enrichPage(html, (isDarcula() ? myAntoraDarculaCssLink : myAntoraCssLink) + myFontAwesomeCssLink + AsciiDocHtmlPanel.getCssLines(myTabsCss), myMermaidScript, myAsciidoctorTabsScript, attributes, editor != null ? editor.getProject() : null);
+      html = AsciiDocWrapper.enrichPage(html, (isDarcula() ? myAntoraDarculaCssLink : myAntoraCssLink) + myFontAwesomeCssLink + AsciiDocHtmlPanel.getCssLines(myTabsCss + (isDarcula() ? myTabsCssDarcula : "")), myMermaidScript, myAsciidoctorTabsScript, attributes, editor != null ? editor.getProject() : null);
     } else {
-      html = AsciiDocWrapper.enrichPage(html, AsciiDocHtmlPanel.getCssLines(isDarcula() ? myInlineCssDarcula : myInlineCss) + myFontAwesomeCssLink + myGoogleFontsCssLink + myDejavuCssLink, myMermaidScript, myAsciidoctorTabsScript, attributes, editor != null ? editor.getProject() : null);
+      html = AsciiDocWrapper.enrichPage(html, AsciiDocHtmlPanel.getCssLines(isDarcula() ? myInlineCssDarcula + myTabsCssDarcula : myInlineCss) + myFontAwesomeCssLink + myGoogleFontsCssLink + myDejavuCssLink, myMermaidScript, myAsciidoctorTabsScript, attributes, editor != null ? editor.getProject() : null);
     }
 
     html = html.replaceAll("<head>", "<head>\n" +

diff --git a/src/main/resources/tabs/data/css/tabs-darcula.css b/src/main/resources/tabs/data/css/tabs-darcula.css
@@ -0,0 +1,25 @@
+/*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */
+
+.tablist > ul li {
+    background-color: #2c2c2c;
+}
+
+.tabs.is-loading .tablist li:not(:first-child),
+.tabs:not(.is-loading) .tablist li:not(.is-selected) {
+    background-color: #626262;
+}
+
+.tabs.is-loading .tablist li:first-child::after,
+.tabs:not(.is-loading) .tablist li.is-selected::after {
+    background-color: #2c2c2c;
+}
+
+.tabpanel {
+    background-color: #2c2c2c;
+}
+
+.tablist > ul li,
+.tabpanel {
+    border-color: #404040;
+}
+