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

koperagen · web-flow · commit 51e95825717a · 2022-10-04T23:08:25.000+03:00
Add a way of explicit switching to dark color scheme.
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;

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`--link-hover: #1a466c;`
`15`	`15`	`}`
`16`	`16`
`17`		`-:root[theme="dark"], :root [data-jp-theme-light="false"]{`
	`17`	`+:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{`
`18`	`18`	`--background: #303030;`
`19`	`19`	`--background-odd: #3c3c3c;`
`20`	`20`	`--background-hover: #464646;`