Merge pull request #174 from Kotlin/notebook-dark-theme

Add a way of explicit switching to dark color scheme.
Kotlin · Oct 4, 2022 · 51e9582 · 51e9582
2 parents 272da20 + cffe404
commit 51e9582
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/core/src/main/kotlin/org/jetbrains/kotlinx/dataframe/io/html.kt b/core/src/main/kotlin/org/jetbrains/kotlinx/dataframe/io/html.kt
@@ -154,10 +154,10 @@ internal fun AnyFrame.toHtmlData(
     }
     val body = getResourceText("/table.html", "ID" to rootId)
     val script = scripts.joinToString("\n") + "\n" + getResourceText("/renderTable.js", "___ID___" to rootId)
-    return HtmlData("", body, script)
+    return HtmlData("", body, script, configuration.useDarkColorScheme)
 }
 
-public data class HtmlData(val style: String, val body: String, val script: String) {
+public data class HtmlData(val style: String, val body: String, val script: String, val useDarkColorScheme: Boolean) {
     override fun toString(): String = """
         <html>
         <head>
@@ -166,27 +166,39 @@ public data class HtmlData(val style: String, val body: String, val script: Stri
             </style>
         </head>
         <body>
-            $body
+            <div${darkSchemeAttribute()}>
+                $body
+            </div>
         </body>
         <script>
             $script
         </script>
         </html>
     """.trimIndent()
 
+    private fun darkSchemeAttribute(): String {
+        return if (useDarkColorScheme) " class=\"dataframe_dark\"" else ""
+    }
+
     public fun toJupyter(): MimeTypedResult = HTML(toString())
 
     public operator fun plus(other: HtmlData): HtmlData =
-        HtmlData(style + "\n" + other.style, body + "\n" + other.body, script + "\n" + other.script)
+        HtmlData(
+            style + "\n" + other.style,
+            body + "\n" + other.body,
+            script + "\n" + other.script,
+            useDarkColorScheme || other.useDarkColorScheme
+        )
 }
 
 internal fun HtmlData.print() = println(this)
 
-internal fun initHtml(includeJs: Boolean = true, includeCss: Boolean = true): HtmlData =
+internal fun initHtml(includeJs: Boolean = true, includeCss: Boolean = true, useDarkColorScheme: Boolean = false): HtmlData =
     HtmlData(
         style = if (includeCss) getResources("/table.css") else "",
         script = if (includeJs) getResourceText("/init.js") else "",
-        body = ""
+        body = "",
+        useDarkColorScheme = useDarkColorScheme,
     )
 
 public fun <T> DataFrame<T>.html(): String = toHTML(extraHtml = initHtml()).toString()
@@ -205,7 +217,7 @@ public fun <T> DataFrame<T>.toHTML(
     } else "<p>$footer</p>"
 
     val tableHtml = toHtmlData(configuration, cellRenderer)
-    val html = tableHtml + HtmlData("", bodyFooter, "")
+    val html = tableHtml + HtmlData("", bodyFooter, "", configuration.useDarkColorScheme)
 
     return if (extraHtml != null) extraHtml + html else html
 }
@@ -217,6 +229,7 @@ public data class DisplayConfiguration(
     var decimalFormat: RendererDecimalFormat = RendererDecimalFormat.DEFAULT,
     var isolatedOutputs: Boolean = flagFromEnv("LETS_PLOT_HTML_ISOLATED_FRAME"),
     internal val localTesting: Boolean = flagFromEnv("KOTLIN_DATAFRAME_LOCAL_TESTING"),
+    var useDarkColorScheme: Boolean = false,
 ) {
     public companion object {
         public val DEFAULT: DisplayConfiguration = DisplayConfiguration()

diff --git a/core/src/main/kotlin/org/jetbrains/kotlinx/dataframe/jupyter/JupyterHtmlRenderer.kt b/core/src/main/kotlin/org/jetbrains/kotlinx/dataframe/jupyter/JupyterHtmlRenderer.kt
@@ -23,7 +23,8 @@ internal inline fun <reified T : Any> JupyterHtmlRenderer.render(
         reifiedDisplayConfiguration,
         extraHtml = initHtml(
             includeJs = reifiedDisplayConfiguration.isolatedOutputs,
-            includeCss = true
+            includeCss = true,
+            useDarkColorScheme = reifiedDisplayConfiguration.useDarkColorScheme
         ),
         contextRenderer
     ) { footer }

diff --git a/core/src/main/resources/table.css b/core/src/main/resources/table.css
@@ -14,7 +14,7 @@
     --link-hover: #1a466c;
 }
 
-:root[theme="dark"], :root [data-jp-theme-light="false"]{
+:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
     --background: #303030;
     --background-odd: #3c3c3c;
     --background-hover: #464646;