Add styles for dark mode

samuelmeuli · Mar 18, 2020 · 3173160 · 3173160
1 parent c8f45ec
commit 3173160
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,7 @@
 - Built for server-side rendering (no DOM required)
 - Comes with built-in Markdown rendering and syntax highlighting
 - Implemented in Go for speed and portability
+- Sample styles support light and dark mode
 
 ## Example
 

diff --git a/examples/nbtohtml/chroma.css b/examples/nbtohtml/chroma.css
@@ -20,6 +20,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/* Chroma light theme: GitHub */
+
 /*!* Background *! .chroma { background-color: #ffffff }*/
 /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
@@ -92,3 +94,69 @@
 /* GenericTraceback */ .chroma .gt { color: #aa0000 }
 /* GenericUnderline */ .chroma .gl { text-decoration: underline }
 /* TextWhitespace */ .chroma .w { color: #bbbbbb }
+
+/* Chroma dark theme: Dracula */
+/* Remove this block if you do not wish to support dark mode */
+
+@media (prefers-color-scheme: dark) {
+	/*!* Background *! .chroma { color: #f8f8f2; background-color: #282a36 } */
+	/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+	/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+	/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #3d3f4a }
+	/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+	/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+	/* Keyword */ .chroma .k { color: #ff79c6 }
+	/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
+	/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
+	/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
+	/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
+	/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
+	/* KeywordType */ .chroma .kt { color: #8be9fd }
+	/* NameAttribute */ .chroma .na { color: #50fa7b }
+	/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
+	/* NameClass */ .chroma .nc { color: #50fa7b }
+	/* NameFunction */ .chroma .nf { color: #50fa7b }
+	/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
+	/* NameTag */ .chroma .nt { color: #ff79c6 }
+	/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
+	/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
+	/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
+	/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
+	/* LiteralString */ .chroma .s { color: #f1fa8c }
+	/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
+	/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
+	/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
+	/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
+	/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
+	/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
+	/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
+	/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
+	/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
+	/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
+	/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
+	/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
+	/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
+	/* LiteralNumber */ .chroma .m { color: #bd93f9 }
+	/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
+	/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
+	/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
+	/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
+	/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
+	/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
+	/* Operator */ .chroma .o { color: #ff79c6 }
+	/* OperatorWord */ .chroma .ow { color: #ff79c6 }
+	/* Comment */ .chroma .c { color: #6272a4 }
+	/* CommentHashbang */ .chroma .ch { color: #6272a4 }
+	/* CommentMultiline */ .chroma .cm { color: #6272a4 }
+	/* CommentSingle */ .chroma .c1 { color: #6272a4 }
+	/* CommentSpecial */ .chroma .cs { color: #6272a4 }
+	/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
+	/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
+	/* GenericDeleted */ .chroma .gd { color: #8b080b }
+	/* GenericEmph */ .chroma .ge { text-decoration: underline }
+	/* GenericHeading */ .chroma .gh { font-weight: bold }
+	/* GenericInserted */ .chroma .gi { font-weight: bold }
+	/* GenericOutput */ .chroma .go { color: #44475a }
+	/* GenericSubheading */ .chroma .gu { font-weight: bold }
+	/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+}
diff --git a/examples/nbtohtml/demo.css b/examples/nbtohtml/demo.css
@@ -1,28 +1,41 @@
 /* Page styles for the demo page */
 
+body {
+	--body-background: #eeeeee;
+	--footer-color: #555555;
+	--text-color: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		--body-background: #000000;
+		--footer-color: #807f7f;
+		--text-color: #ececec;
+	}
+}
+
 body {
 	margin: 0;
+	color: var(--text-color);
 	font-size: 15px;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial",
 		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	line-height: 1.5;
-	background: #eeeeee;
-}
-
-main {
-	max-width: 38rem;
-	margin: auto;
-	padding: 3rem;
-	background: #ffffff;
+	background: var(--body-background);
 }
 
 footer {
 	margin: 1.5rem 0;
-	color: #555555;
-	font-size: 80%;
 	text-align: center;
 }
 
-a {
-	color: inherit;
+.footer-link {
+	color: var(--footer-color);
+	font-size: 90%;
+}
+
+.notebook {
+	max-width: 42rem;
+	margin: auto;
+	padding: 3rem 3rem 3rem 2rem;
 }
diff --git a/examples/nbtohtml/notebook.css b/examples/nbtohtml/notebook.css
@@ -1,7 +1,31 @@
+/* Variables */
+
+/* Light mode */
+.notebook {
+	--box-background: #f5f5f5;
+	--box-border: #e0e0e0;
+	--notebook-background: #ffffff;
+	--output-error-background: #ffdddd;
+	--prompt-color: #afafaf;
+}
+
+/* Dark mode */
+/* Remove this block if you do not wish to support dark mode */
+@media (prefers-color-scheme: dark) {
+	.notebook {
+		--box-background: #171717;
+		--box-border: #575757;
+		--notebook-background: #2b2b2b;
+		--output-error-background: #3c0404;
+		--prompt-color: #afafaf;
+	}
+}
+
 /* General styles */
 
 .notebook {
 	box-sizing: border-box;
+	background: var(--notebook-background);
 }
 
 .notebook h1 {
@@ -30,11 +54,11 @@
 }
 
 .notebook thead tr {
-	border-bottom: 1px solid #bdbdbd;
+	border-bottom: 1px solid var(--box-border);
 }
 
 .notebook tbody tr:nth-child(even) {
-	background: #f5f5f5;
+	background: var(--box-background);
 }
 
 /* Text */
@@ -83,7 +107,7 @@
 
 .notebook .input-prompt,
 .notebook .output-prompt {
-	color: #afafaf;
+	color: var(--prompt-color);
 }
 
 /* Boxes (e.g. for code and errors) */
@@ -99,8 +123,8 @@
 /* Grey boxes */
 .notebook .cell-code .input,
 .notebook .cell-raw .input {
-	background: #f5f5f5;
-	border: 1px solid #e0e0e0;
+	background: var(--box-background);
+	border: 1px solid var(--box-border);
 }
 
 /* Adjust spacing of prompts next to boxes (so text is aligned) */
@@ -113,7 +137,7 @@
 
 /* Error box */
 .notebook .output-error {
-	background: #ffdddd;
+	background: var(--output-error-background);
 }
 
 /* Black ANSI color */

diff --git a/examples/nbtohtml/template.html b/examples/nbtohtml/template.html
@@ -42,7 +42,9 @@
 			{{ .NotebookHTML }}
 		</main>
 		<footer>
-			<a href="https://github.com/samuelmeuli/nbtohtml">View on GitHub</a>
+			<a href="https://github.com/samuelmeuli/nbtohtml" class="footer-link">
+				View on GitHub
+			</a>
 		</footer>
 	</body>
 </html>