Added a perfect dark theme

Signed-off-by: Valentin Popov <info@valentineus.link>

_scss/base/_highlight.scss

@@ -1,20 +1,4 @@
-$color00: #000000;
+$color00: rgb(255, 0, 0);
-$color01: #000080;
+$color01: rgb(255, 255, 204);
-$color02: #0000FF;
-$color03: #008080;
-$color04: #008800;
-$color05: #555555;
-$color06: #800080;
-$color07: #888888;
-$color08: #999999;
-$color09: #a61717;
-$color10: #aa0000;
-$color11: #aaaaaa;
-$color12: #bbbbbb;
-$color13: #ddffdd;
-$color14: #e3d2d2;
-$color15: #FF0000;
-$color16: #ffdddd;
-$color17: #ffffcc;
 
 @import 'highlight/main';

_scss/base/_sakura.scss

@@ -1,8 +1,9 @@
 $color-bg-alt: rgba(0, 0, 0, .09);
-$color-bg: rgba(235, 237, 236, 1);
+$color-bg: rgb(30, 32, 33);
-$color-blossom: rgba(76, 88, 112, 1);
+$color-blossom: rgb(77, 99, 140);
-$color-fade: rgba(162, 169, 175, 1);
+$color-fade: rgb(40, 54, 84);
-$color-text: rgba(61, 61, 59, 1);
+$color-html:rgb(24, 26, 27);
+$color-text: rgb(245, 245, 245);
 
 $font-family-sans-serif: '-apple-system', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;
 $font-size-base: 1.6rem;

_scss/components/_core.scss

@@ -8,6 +8,8 @@
 }
 
 html {
+  background-color: $color-html;
+  background-image: url('/assets/background.svg');
   height: 100%;
   overflow-y: scroll;
 }

_scss/highlight/_main.scss

@@ -1,36 +1,22 @@
 .highlight {
   .c {
-    color: $color04;
     font-style: italic;
   }
 
   .c1 {
-    color: $color04;
     font-style: italic;
   }
 
   .cm {
-    color: $color04;
     font-style: italic;
   }
 
-  .cp {
-    color: $color03;
-  }
-
   .cs {
-    color: $color04;
+    font-style: italic;
-    font-weight: bold;
   }
 
   .err {
-    background-color: $color14;
+    border: 1px solid $color00;
-    color: $color09;
-  }
-
-  .gd {
-    background-color: $color16;
-    color: $color00;
   }
 
   .ge {
@@ -38,107 +24,62 @@
   }
 
   .gh {
-    color: $color08;
+    font-weight: bold;
-  }
-
-  .gi {
-    background-color: $color13;
-    color: $color00;
-  }
-
-  .go {
-    color: $color07;
   }
 
   .gp {
-    color: $color05;
+    font-weight: bold;
-  }
-
-  .gr {
-    color: $color10;
   }
 
   .gs {
     font-weight: bold;
   }
 
-  .gt {
-    color: $color10;
-  }
-
   .gu {
-    color: $color11;
+    font-weight: bold;
   }
 
   .hll {
-    background-color: $color17;
+    background-color: $color01;
-  }
-
-  .il {
-    color: $color02;
   }
 
   .k {
-    color: $color01;
     font-weight: bold;
   }
 
   .kc {
-    color: $color01;
     font-weight: bold;
   }
 
   .kd {
-    color: $color01;
     font-weight: bold;
   }
 
   .kn {
-    color: $color01;
-    font-weight: bold;
-  }
-
-  .kp {
-    color: $color01;
     font-weight: bold;
   }
 
   .kr {
-    color: $color01;
     font-weight: bold;
   }
 
-  .kt {
+  .nc {
-    color: $color01;
     font-weight: bold;
   }
 
-  .m {
+  .ne {
-    color: $color02;
+    font-weight: bold;
   }
 
-  .mf {
+  .ni {
-    color: $color02;
+    font-weight: bold;
   }
 
-  .mh {
+  .nn {
-    color: $color02;
+    font-weight: bold;
-  }
-
-  .mi {
-    color: $color02;
-  }
-
-  .mo {
-    color: $color02;
-  }
-
-  .na {
-    color: $color15;
   }
 
   .nt {
-    color: $color01;
     font-weight: bold;
   }
 
@@ -147,54 +88,52 @@
   }
 
   .s {
-    color: $color02;
+    font-style: italic;
   }
 
   .s1 {
-    color: $color02;
+    font-style: italic;
   }
 
   .s2 {
-    color: $color02;
+    font-style: italic;
   }
 
   .sb {
-    color: $color02;
+    font-style: italic;
   }
 
   .sc {
-    color: $color06;
+    font-style: italic;
   }
 
   .sd {
-    color: $color02;
+    font-style: italic;
   }
 
   .se {
-    color: $color02;
+    font-style: italic;
+    font-weight: bold;
   }
 
   .sh {
-    color: $color02;
+    font-style: italic;
   }
 
   .si {
-    color: $color02;
+    font-style: italic;
+    font-weight: bold;
   }
 
   .sr {
-    color: $color02;
+    font-style: italic;
   }
 
   .ss {
-    color: $color02;
+    font-style: italic;
   }
 
   .sx {
-    color: $color02;
+    font-style: italic;
-  }
-
-  .w {
-    color: $color12;
   }
 }

assets/background.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Background</title>
+    <desc>It's the background.</desc>
+    <defs></defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="#000000">
+            <polygon points="5 0 6 0 0 6 0 5"></polygon>
+            <polygon points="6 5 6 6 5 6"></polygon>
+        </g>
+    </g>
+</svg>