[styles] Reworked colors for syntax highlighting

2 files changed, 95 insertions, 43 deletions

diff --git a/src/darkmode.css b/src/darkmode.css
index 7a8ad3a..59aaffc 100644
--- a/src/darkmode.css
+++ b/src/darkmode.css
@@ -2,23 +2,34 @@
   --bg-color: #262626;
   --fg-color: #ffeede;
 
-  --a-color: #cd81a7;
-  --a-hover-color: #eeaacd;
-  --accent-line-color: #d47408;
-  --alternating-row-color: #353535;
-  --bg-selection-color: #81949f;
-  --blockquote-color: #919191;
-  --blockquote-border-color: #919191;
-  --body-bg: #000000;
-  --border-color: #777;
-  --code-bg-color: #414141;
-  --em-color: #e17b08;
-  --fg-selection-color: #001121;
-  --header-color: #d49408;
-  --pre-bg-color: #414141;
-  --strong-color: #c35b5b;
-  --table-border-color: #777;
-  --tr-bg-color: #262626;
+  --a-color:                 #cd81a7;
+  --a-hover-color:           #eeaacd;
+  --accent-line-color:       #d47408;
+  --alternating-row-color:   #353535;
+  --bg-selection-color:      #81949f;
+  --blockquote-color:        #919191;
+  --blockquote-border-color: var(--blockquote-color);
+  --body-bg:                 #000000;
+  --border-color:            #777;
+  --code-bg-color:           #414141;
+  --em-color:                #e17b08;
+  --fg-selection-color:      #001121;
+  --header-color:            #d49408;
+  --pre-bg-color:            #414141;
+  --strong-color:            #c35b5b;
+  --table-border-color:      var(--border-color);
+  --tr-bg-color:             var(--bg-color);
+  
+  /* https://github.com/morhetz/gruvbox/blob/master/autoload/gruvbox.vim */
+  --hi-fg:      #fbf1c7;
+  --hi-bg:      #1d2021;
+  --hic-gray:   #928374;
+  --hic-red:    #fb4934;
+  --hic-green:  #b8bb26;
+  --hic-yellow: #fabd2f;
+  --hic-purple: #d3869b;
+  --hic-aqua:   #8ec07c;
+  --hic-orange: #fe8019;
 }
 
   /* This selects the link images, next to headings */
diff --git a/src/styles.css b/src/styles.css
index b24a355..fd6feea 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -55,23 +55,54 @@
   --bg-color: white;
   --fg-color: black;
 
-  --a-color: #336700;
-  --a-hover-color: #3ea100;
-  --accent-line-color: #004080;
-  --alternating-row-color: #eef0f2;
-  --bg-selection-color: #338fff;
-  --blockquote-color: #6a737d;
+  --a-color:                 #336700;
+  --a-hover-color:           #3ea100;
+  --accent-line-color:       #004080;
+  --alternating-row-color:   #eef0f2;
+  --bg-selection-color:      #338fff;
+  --blockquote-color:        #6a737d;
   --blockquote-border-color: #dfe2e5;
-  --body-bg: #dbdbdb;
-  --border-color: black;
-  --code-bg-color: #e2e4e6;
-  --em-color: black;
-  --fg-selection-color: white;
-  --header-color: #006b8f;
-  --pre-bg-color: #f6f8fa;
-  --strong-color: black;
-  --table-border-color: black;
-  --tr-bg-color: #fff;
+  --body-bg:                 #dbdbdb;
+  --border-color:            black;
+  --code-bg-color:           #e2e4e6;
+  --em-color:                black;
+  --fg-selection-color:      white;
+  --header-color:            #006b8f;
+  --pre-bg-color:            #f6f8fa;
+  --strong-color:            black;
+  --table-border-color:      black;
+  --tr-bg-color:             white;
+
+  /* https://github.com/morhetz/gruvbox/blob/master/autoload/gruvbox.vim */
+  --hi-fg:      #282828;
+  --hi-bg:      #f9f5d7;
+  --hic-gray:   #928374;
+  --hic-red:    #fb4934;
+  --hic-green:  #79740e;
+  --hic-yellow: #b57614;
+  --hic-purple: #8f3f71;
+  --hic-aqua:   #427b58;
+  --hic-orange: #af3a03;
+
+  --hi-comment:      var(--hic-gray);
+  --hi-const:        var(--hic-purple);
+  --hi-string:       var(--hic-green);
+  --hi-char:         var(--hic-purple);
+  --hi-number:       var(--hic-purple);
+  --hi-bool:         var(--hic-purple);
+  --hi-float:        var(--hic-purple);
+  --hi-function:     var(--hic-green);
+  --hi-statement:    var(--hic-red);
+  --hi-conditional:  var(--hic-red);
+  --hi-repeat:       var(--hic-red);
+  --hi-operator:     var(--hi-fg);
+  --hi-keyword:      var(--hic-red); /* Label and Exception are keywords */
+  --hi-preproc:      var(--hic-aqua);
+  --hi-type:         var(--hic-yellow);
+  --hi-storageclass: var(--hic-orange);
+  --hi-structure:    var(--hic-aqua);
+  --hi-typedef:      var(--hic-aqua);
+  --hi-ignore:       var(--hi-fg);
 }
 
 /* Global */
@@ -471,14 +502,24 @@ dt { font-size: 1.2em; }
         padding: 0.2em 0 0.2em 0.2em !important;
       }
 
-/* Syntax highlighting (colours are inspired from gruvbox) */
+/* Syntax highlighting */
 
-/* Constant, Chars         */ .SH-cst, .SH-chr { color: #d787af; }
-/* Comment                 */ .SH-com          { color: #8a8a8a; }
-/* Keyword                 */ .SH-kwd          { color: #d75f5f; }
-/* Second keyword color    */ .SH-kwd2         { color: #ff8700; }
-/* Third keyword color     */ .SH-kwd3         { color: #87af87; }
-/* Type                    */ .SH-typ          { color: #ffaf00; }
-/* Class                   */ .SH-cls          { color: #87afaf; }
-/* Function names, Strings */ :not(.SH-cls) > .SH-fnc, .SH-str { color: #afaf00; }
-.SH-none { color: var(--fg-color); }
+.HI-comment      { color: var(--hic-gray); }
+.HI-const        { color: var(--hic-purple); }
+.HI-string       { color: var(--hic-green); }
+.HI-char         { color: var(--hic-purple); }
+.HI-number       { color: var(--hic-purple); }
+.HI-bool         { color: var(--hic-purple); }
+.HI-float        { color: var(--hic-purple); }
+.HI-function     { color: var(--hic-green); }
+.HI-statement    { color: var(--hic-red); }
+.HI-conditional  { color: var(--hic-red); }
+.HI-repeat       { color: var(--hic-red); }
+.HI-operator     { color: var(--fg-color); }
+.HI-keyword      { color: var(--hic-red); /* Label and Exception are keywords */ }
+.HI-preproc      { color: var(--hic-aqua); }
+.HI-type         { color: var(--hic-yellow); }
+.HI-storageclass { color: var(--hic-orange); }
+.HI-structure    { color: var(--hic-aqua); }
+.HI-typedef      { color: var(--hic-aqua); }
+.HI-ignore       { color: var(--fg-color); }