Merge pull request #5 from Al3bad/support-night-mode

Support code syntax highlighting in night mode Close #4
jhermsmeier · Jul 22, 2021 · 28e02df · 28e02df
2 parents 980ed11 + c40a552
commit 28e02df
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 7 deletions.
diff --git a/Contents/Resources/document.html b/Contents/Resources/document.html
@@ -2,15 +2,13 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
-    <link rel="stylesheet" type="text/css" href="github-markdown.css">
-    <link rel="stylesheet" type="text/css" href="github.css">
-    <!-- <link rel="stylesheet" type="text/css" href="highlight/styles/default.css"> -->
-    <!-- <link rel="stylesheet" type="text/css" href="highlight/styles/github.css"> -->
-    <link rel="stylesheet" type="text/css" href="highlight/styles/github-gist.css">
+    <!-- CSS -->
+    <link rel="stylesheet" media="all" href="github.css">
+    <!-- JS -->
     <script type="text/javascript" src="texzilla.js"></script>
     <script type="text/javascript" src="highlight/highlight.pack.js"></script>
     <script type="text/javascript" src="main.js"></script>
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
   </head>
   <body class="markdown-body" data-document>&nbsp;</body>
 </html>
diff --git a/Contents/Resources/github-dark-dimmed.min.css b/Contents/Resources/github-dark-dimmed.min.css
@@ -0,0 +1,62 @@
+.night-mode .hljs{ 
+  display:block;
+  overflow-x:auto;
+  padding:1em;
+  padding:3px 5px;
+  color:#adbac7;
+  background:#22272e;
+}
+
+
+.night-mode .hljs-doctag,
+.night-mode .hljs-keyword,
+.night-mode .hljs-meta .hljs-keyword,
+.night-mode .hljs-template-tag,
+.night-mode .hljs-template-variable,
+.night-mode .hljs-type,
+.night-mode .hljs-variable.language_{color:#f47067}
+
+.night-mode .hljs-title,
+.night-mode .hljs-title.class_,
+.night-mode .hljs-title.class_.inherited__,
+.night-mode .hljs-title.function_{color:#dcbdfb}
+
+.night-mode .hljs-attr,
+.night-mode .hljs-attribute,
+.night-mode .hljs-literal,
+.night-mode .hljs-meta,
+.night-mode .hljs-number,
+.night-mode .hljs-operator,
+.night-mode .hljs-selector-attr,
+.night-mode .hljs-selector-class,
+.night-mode .hljs-selector-id,
+.night-mode .hljs-variable{color:#6cb6ff}
+
+.night-mode .hljs-meta .hljs-string,
+.night-mode .hljs-regexp,
+.night-mode .hljs-string{color:#96d0ff}
+
+.night-mode .hljs-built_in,
+.night-mode .hljs-symbol{color:#f69d50}
+.night-mode .hljs-code,
+.night-mode .hljs-comment,
+.night-mode .hljs-formula{color:#768390}
+
+.night-mode .hljs-name,
+.night-mode .hljs-quote,
+.night-mode .hljs-selector-pseudo,
+.night-mode .hljs-selector-tag{color:#8ddb8c}
+
+.night-mode .hljs-subst{color:#adbac7}
+
+.night-mode .hljs-section{color:#316dca;font-weight:700}
+
+.night-mode .hljs-bullet{color:#eac55f}
+
+.night-mode .hljs-emphasis{color:#adbac7;font-style:italic}
+
+.night-mode .hljs-strong{color:#adbac7;font-weight:700}
+
+.night-mode .hljs-addition{color:#b4f1b4;background-color:#1b4721}
+
+.night-mode .hljs-deletion{color:#ffd8d3;background-color:#78191b}
diff --git a/...esources/highlight/styles/github-gist.css → Contents/Resources/github-gist.css b/...esources/highlight/styles/github-gist.css → Contents/Resources/github-gist.css
diff --git a/Contents/Resources/github-markdown-night-mode.css b/Contents/Resources/github-markdown-night-mode.css
@@ -0,0 +1,70 @@
+/*!
+  Theme: GitHub Dark Dimmed
+  Description: Dark dimmed theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+  
+  Edited by: @Al3bad
+
+  Colors taken from GitHub's CSS
+*/
+
+.night-mode, .night-mode .markdown-body {
+  background-color: #101010;
+  color: #dedede;
+}
+
+.night-mode .markdown-body a {
+  color: #0C63C7;
+}
+
+.night-mode .markdown-body hr {
+  background-color: #333;
+}
+
+.night-mode .markdown-body blockquote {
+  color: #999;
+  border-left-color: #333;
+}
+
+.night-mode .markdown-body kbd {
+  color: #333d56;
+  background-color: #fafbfc;
+  border-color: #d1d5da;
+  border-bottom-color: #c6cbd1;
+  box-shadow-color: #c6cbd1;
+}
+
+.night-mode .markdown-body h1 {
+  border-bottom-color: #333;
+}
+
+.night-mode .markdown-body h2 {
+  border-bottom-color: #333;
+}
+
+.night-mode .markdown-body h6 {
+  color: #999;
+}
+
+.night-mode .markdown-body table tr {
+  background-color: #101010;
+}
+
+.night-mode .markdown-body table, .night-mode .markdown-body th, .night-mode .markdown-body td {
+  border-color: #353535;
+}
+
+.night-mode .markdown-body table tr:nth-child(2n) {
+  background-color: #1e1e1e;
+}
+
+.night-mode .markdown-body img {
+  background-color: #fff;
+}
+
+.night-mode .markdown-body code,
+.night-mode .markdown-body pre {
+  background-color: #242422;
+}
diff --git a/Contents/Resources/github.css b/Contents/Resources/github.css
@@ -1,3 +1,8 @@
+@import 'github-markdown.css' screen and (min-width: 520px), print;
+@import 'github-gist.css' screen and (min-width: 520px), print;
+@import 'github-markdown-night-mode.css' screen;
+@import 'github-dark-dimmed.min.css' screen;
+
 html {
   background-color: white;
 }

diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Same thing for updates – iA Writer will prompt you if you want to replace the
 
 ## Features
 
-### Code Syntax Highlighting
+### Code Syntax Highlighting in both light & night modes
 
 <p align="center">
     <img src="screenshots/code.png" alt="Screenshot">