feat: use dark code theme.

YvesCoding · Aug 16, 2019 · a0d0e4f · a0d0e4f
1 parent 4e9215c
commit a0d0e4f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 84 deletions.
diff --git a/packages/antdsite/src/default-theme/assets/highlight.less b/packages/antdsite/src/default-theme/assets/highlight.less
@@ -1,28 +1,16 @@
 /**
-* prism.js default theme for JavaScript, CSS and HTML
-* Based on dabblet (http://dabblet.com)
-* @author Lea Verou
-*/
-
-pre code {
-  display: block;
-  background: white;
-  color: @site-text-color;
-  line-height: 2;
-  border: 1px solid #e9e9e9;
-  padding: 16px 32px;
-  border-radius: @border-radius-sm;
-  font-size: @font-size-base;
-  white-space: pre;
-  font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
+ * prism.js Dark theme for JavaScript, CSS and HTML
+ * Based on the slides of the talk “/Reg(exp){2}lained/”
+ * @author Lea Verou
+ */
 
-code[class*='language-'],
+pre code[class*='language-'],
 pre[class*='language-'] {
-  color: black;
+  color: white;
   background: none;
-  font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  direction: ltr;
+  text-shadow: 0 -0.1em 0.2em black;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -40,57 +28,36 @@ pre[class*='language-'] {
   hyphens: none;
 }
 
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-code[class*='language-']::selection,
-code[class*='language-'] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
 @media print {
   code[class*='language-'],
   pre[class*='language-'] {
     text-shadow: none;
   }
 }
 
-/* Code blocks */
 pre[class*='language-'] {
-  padding: 12px 20px;
-  margin: 16px 0;
-  overflow: auto;
+  background: hsl(30, 20%, 25%);
 }
 
-:not(pre) > code[class*='language-'],
+/* Code blocks */
 pre[class*='language-'] {
-  background: #f2f4f5;
-}
-
-/* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border: 0.3em solid hsl(30, 20%, 40%);
+  border-radius: 0.5em;
+  box-shadow: 1px 1px 0.5em black inset;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: slategray;
+  color: hsl(30, 20%, 50%);
 }
 
 .token.punctuation {
-  color: #999;
+  opacity: 0.7;
 }
 
 .namespace {
@@ -102,9 +69,8 @@ pre[class*='language-'] {
 .token.boolean,
 .token.number,
 .token.constant,
-.token.symbol,
-.token.deleted {
-  color: #f81d22;
+.token.symbol {
+  color: hsl(350, 40%, 70%);
 }
 
 .token.selector,
@@ -113,30 +79,26 @@ pre[class*='language-'] {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #0b8235;
+  color: hsl(75, 70%, 60%);
 }
 
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
-.style .token.string {
-  color: #0b8235;
+.style .token.string,
+.token.variable {
+  color: hsl(40, 90%, 60%);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  color: #008dff;
-}
-
-.token.function {
-  color: #f81d22;
+  color: hsl(350, 40%, 70%);
 }
 
 .token.regex,
-.token.important,
-.token.variable {
+.token.important {
   color: #e90;
 }
 
@@ -152,20 +114,26 @@ pre[class*='language-'] {
   cursor: help;
 }
 
+.token.deleted {
+  color: red;
+}
+
+/////////
+
 .gatsby-highlight {
-  background: #f2f4f5;
+  // background: #f2f4f5;
   position: relative;
 }
 
 .gatsby-highlight pre[class*='language-'] {
-  background-color: transparent;
+  // background-color: transparent;
   border: 0;
   -webkit-overflow-scrolling: touch;
 }
 
 .gatsby-highlight pre[class*='language-']::before {
   border-radius: 0 0 4px 4px;
-  color: rgba(0, 0, 0, 0.65);
+  // color: rgba(0, 0, 0, 0.65);
   font-size: 0.75rem;
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   letter-spacing: 0.075em;

diff --git a/packages/antdsite/src/default-theme/assets/markdown.less b/packages/antdsite/src/default-theme/assets/markdown.less
@@ -1,5 +1,5 @@
 .markdown {
-  color: @site-text-color;
+  // color: @site-text-color;
   font-size: 14px;
   line-height: 2;
 
@@ -24,7 +24,7 @@
 }
 
 .markdown h1.__internal {
-  color: @site-heading-color;
+  // color: @site-heading-color;
   font-weight: 500;
   margin-bottom: 20px;
   margin-top: -3.6rem;
@@ -43,7 +43,7 @@
 .markdown h4.__internal,
 .markdown h5.__internal,
 .markdown h6.__internal {
-  color: @site-heading-color;
+  // color: @site-heading-color;
   font-family: Lato, @font-family;
   font-weight: 500;
   clear: both;
@@ -72,7 +72,7 @@
 .markdown hr {
   height: 1px;
   border: 0;
-  background: #e9e9e9;
+  // background: #e9e9e9;
   margin: 16px 0;
   clear: both;
 }
@@ -118,48 +118,48 @@
   padding: 12px 20px;
   margin: 16px 0;
   overflow: auto;
-  background: #f2f4f5;
+  // background: #f2f4f5;
   font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 }
 
 .markdown pre code {
   border: none;
-  background: #f2f4f5;
+  // background: #f2f4f5;
   margin: 0;
   padding: 0;
   line-height: 2;
   font-size: @font-size-base;
-  color: @site-text-color;
+  // color: @site-text-color;
   overflow: auto;
 }
 
 .markdown > table {
   border-collapse: collapse;
   border-spacing: 0;
   empty-cells: show;
-  border: 1px solid @site-border-color-split;
+  // border: 1px solid @site-border-color-split;
   width: 100%;
   margin: 8px 0 16px;
 }
 
 .markdown > table th {
   white-space: nowrap;
-  color: #5c6b77;
+  // color: #5c6b77;
   font-weight: 500;
-  background: rgba(0, 0, 0, 0.02);
+  // background: rgba(0, 0, 0, 0.02);
 }
 
 .markdown > table th,
 .markdown > table td {
-  border: 1px solid @site-border-color-split;
+  // border: 1px solid @site-border-color-split;
   padding: 16px 24px;
   text-align: left;
 }
 
 .markdown blockquote {
   font-size: 90%;
-  color: @site-text-color-secondary;
-  border-left: 4px solid @site-border-color-split;
+  // color: @site-text-color-secondary;
+  // border-left: 4px solid @site-border-color-split;
   padding-left: 0.8em;
   margin: 1em 0;
 }
@@ -175,7 +175,7 @@
 }
 
 .markdown .waiting {
-  color: #ccc;
+  // color: #ccc;
   cursor: not-allowed;
 }
 
@@ -188,10 +188,10 @@
   font-weight: 400;
 
   i {
-    color: @site-text-color-secondary;
+    // color: @site-text-color-secondary;
 
     &:hover {
-      color: @primary-color;
+      // color: @primary-color;
     }
   }