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="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/samuelmeuli/nbtohtml">View on GitHub</a>
+ <a href="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/samuelmeuli/nbtohtml" class="footer-link">
+ View on GitHub
+ </a>
  </footer>
  </body>
 </html>