Merge pull request #6 from aromalanil/dark-mode

🌑 Added DarkMode for Body and Code
aromalanil · Sep 5, 2020 · 8ebf048 · 8ebf048
2 parents 6543f09 + 1cff214
commit 8ebf048
Show file tree

Hide file tree

Showing 11 changed files with 289 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markdown-editor",
-  "version": "1.6.4",
+  "version": "1.8.0",
   "description": "A react app to preview and edit Markdown",
   "private": true,
   "author": {

diff --git a/public/index.html b/public/index.html
@@ -46,6 +46,8 @@
   <meta property="twitter:image"
     content="https://raw.githubusercontent.com/aromalanil/Markdown-Editor/master/public/demo.webp">
 
+
+    <link rel="stylesheet" id="code-stylesheet" href="%PUBLIC_URL%/styles/light.css">
 </head>
 
 <body>

diff --git a/public/styles/dark.css b/public/styles/dark.css
@@ -0,0 +1,123 @@
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+     color: #f8f8f2;
+     background: none;
+     text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+     font-size: 1em;
+     text-align: left;
+     white-space: pre;
+     word-spacing: normal;
+     word-break: normal;
+     word-wrap: normal;
+
+     -moz-tab-size: 4;
+     -o-tab-size: 4;
+     tab-size: 4;
+
+     -webkit-hyphens: none;
+     -moz-hyphens: none;
+     -ms-hyphens: none;
+     hyphens: none;
+ }
+
+ /* Code blocks */
+ pre[class*="language-"] {
+     padding: 1em;
+     margin: .5em 0;
+     overflow: auto;
+     border-radius: 0.3em;
+ }
+
+ :not(pre) > code[class*="language-"],
+ pre[class*="language-"] {
+     background: #272822;
+ }
+
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+     padding: .1em;
+     border-radius: .3em;
+     white-space: normal;
+ }
+
+ .token.comment,
+ .token.prolog,
+ .token.doctype,
+ .token.cdata {
+     color: #8292a2;
+ }
+
+ .token.punctuation {
+     color: #f8f8f2;
+ }
+
+ .token.namespace {
+     opacity: .7;
+ }
+
+ .token.property,
+ .token.tag,
+ .token.constant,
+ .token.symbol,
+ .token.deleted {
+     color: #f92672;
+ }
+
+ .token.boolean,
+ .token.number {
+     color: #ae81ff;
+ }
+
+ .token.selector,
+ .token.attr-name,
+ .token.string,
+ .token.char,
+ .token.builtin,
+ .token.inserted {
+     color: #a6e22e;
+ }
+
+ .token.operator,
+ .token.entity,
+ .token.url,
+ .language-css .token.string,
+ .style .token.string,
+ .token.variable {
+     color: #f8f8f2;
+ }
+
+ .token.atrule,
+ .token.attr-value,
+ .token.function,
+ .token.class-name {
+     color: #e6db74;
+ }
+
+ .token.keyword {
+     color: #66d9ef;
+ }
+
+ .token.regex,
+ .token.important {
+     color: #fd971f;
+ }
+
+ .token.important,
+ .token.bold {
+     font-weight: bold;
+ }
+ .token.italic {
+     font-style: italic;
+ }
+
+ .token.entity {
+     cursor: help;
+ }
+
diff --git a/src/styles/github.css → public/styles/light.css b/src/styles/github.css → public/styles/light.css
@@ -9,11 +9,6 @@ pre {
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
-  line-height: 1.45;
-  padding: 0.8em;
-  overflow: auto;
-  font-size: 0.9em;
-  border-radius: 6px;
   background:  #f6f8fa;
 
   -moz-tab-size: 8;
@@ -29,12 +24,8 @@ pre {
 /* Inline code */
 :not(pre) > code {
   color: inherit;
-  font-size: 85%;
-  border-radius: 0.3em;
   white-space: normal;
   background: #f5f5f5;
-  padding: 0.2em 0.4em;
-  margin: 0;
   background-color: rgba(27, 31, 35, 0.05);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,8 @@ @@
       <meta property="twitter:image"
         content="https://raw.githubusercontent.com/aromalanil/Markdown-Editor/master/public/demo.webp">
+        <link rel="stylesheet" id="code-stylesheet" href="%PUBLIC_URL%/styles/light.css">
     </head>
     <body>
@@ Expand Down @@