Style/custom dark theme

docs/_config.yml

@@ -24,18 +24,18 @@ description: >-
   Information about the OSV database and API.
 baseurl: "/osv.dev" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
-github_username:  google
+github_username: google
 heading_anchors: true
 
 # Build settings
 remote_theme: just-the-docs/just-the-docs
 plugins:
   - jekyll-feed
 
-color_scheme: better_contrast
+color_scheme: custom_dark
 markdown: kramdown
 
-logo: "/assets/logo.png"
+logo: "/assets/logo-dark.png"
 favicon_ico: "/assets/icon.png"
 
 callouts_level: quiet # or loud
@@ -65,4 +65,4 @@ nav_external_links:
     hide_icon: false # set to true to hide the external link icon - defaults to false
   - title: OSV-Scanner
     url: https://google.github.io/osv-scanner/
-    hide_icon: false # set to true to hide the external link icon - defaults to false
+    hide_icon: false # set to true to hide the external link icon - defaults to false

docs/_sass/color_schemes/_variables.scss

@@ -0,0 +1,30 @@
+$white: #fff !default;
+$grey-dk-000: #959396 !default;
+$grey-dk-100: #5c5962 !default;
+$grey-dk-200: #44434d !default;
+$grey-dk-250: #302d36 !default;
+$grey-dk-300: #27262b !default;
+$grey-lt-000: #f5f6fa !default;
+$grey-lt-100: #eeebee !default;
+$grey-lt-200: #ecebed !default;
+$grey-lt-300: #e6e1e8 !default;
+$purple-000: #7253ed !default;
+$purple-100: #5e41d0 !default;
+$purple-200: #4e26af !default;
+$purple-300: #381885 !default;
+$blue-000: #2c84fa !default;
+$blue-100: #2869e6 !default;
+$blue-200: #264caf !default;
+$blue-300: #183385 !default;
+$green-000: #41d693 !default;
+$green-100: #11b584 !default;
+$green-200: #009c7b !default;
+$green-300: #026e57 !default;
+$yellow-000: #ffeb82 !default;
+$yellow-100: #fadf50 !default;
+$yellow-200: #f7d12e !default;
+$yellow-300: #e7af06 !default;
+$red-000: #f77e7e !default;
+$red-100: #f96e65 !default;
+$red-200: #e94c4c !default;
+$red-300: #dd2e2e !default;

docs/_sass/color_schemes/custom_dark.scss

@@ -0,0 +1,24 @@
+@import "./variables";
+@import "../highlight/native.scss";
+
+$new-body-background-color: #2A2A2A;
+
+// Overriding dark default for just-the-docs styles
+$color-scheme: dark;
+$body-background-color: $new-body-background-color; // Replacing default $grey-dk-300
+$body-heading-color: $white; // Replacing default $grey-lt-000
+$body-text-color: $white; //Replacing default $grey-lt-300
+$link-color: #C9F5F7;
+$nav-child-link-color: $white; // Replacing default $grey-dk-000
+$sidebar-color: $new-body-background-color; //Replacing default $grey-dk-300
+$base-button-color: $grey-dk-250;
+$btn-primary-color: $blue-200;
+$code-background-color:#202020; // Important to match with .highlight background and .highlight.err background-color 
+$code-linenumber-color: #447fcf; // Important to match with .highlight.nf color
+$feedback-color: darken($sidebar-color, 3%);
+$table-background-color: lighten($new-body-background-color, 5%); // Replacing default $grey-dk-250
+$search-background-color: $new-body-background-color; // Replacing default $grey-dk-250
+$search-result-preview-color: $grey-dk-000;
+$border-color: #6A6A6A; // Replacing default $grey-dk-200
+
+

docs/_sass/color_schemes/better_contrast.scss → docs/_sass/highlight/better_contrast.scss

@@ -1,3 +1,4 @@
+// Keep it only as legacy theme
 // Code snippet colors
 .highlight .c {
     color: #514E56;

docs/_sass/highlight/native.scss

@@ -0,0 +1,289 @@
+// Based on https://github.com/dwayne/sass-pygments/blob/master/styles/scss/native.scss
+
+.highlight, pre.highlight {
+    .hll {
+      background-color: #404040;
+    }
+
+    color: #d0d0d0;
+    background: #202020;
+
+    .c {
+      color: #999999;
+      font-style: italic;
+    }
+
+    .err {
+      color: #d0d0d0; // Replacing default #a61717 with default text code for code block
+      background-color: #202020; // Replacing default #e3d2d2 with background for the code block
+    }
+
+    .esc, .g {
+      color: #d0d0d0;
+    }
+
+    .k {
+      color: #6ab825;
+      font-weight: bold;
+    }
+
+    .l, .n, .o, .x, .p {
+      color: #d0d0d0;
+    }
+
+    .ch, .cm {
+      color: #999999;
+      font-style: italic;
+    }
+
+    .cp {
+      color: #cd2828;
+      font-weight: bold;
+    }
+
+    .cpf, .c1 {
+      color: #999999;
+      font-style: italic;
+    }
+
+    .cs {
+      color: #e50808;
+      font-weight: bold;
+      background-color: #520000;
+    }
+
+    .gd {
+      color: #d22323;
+    }
+
+    .ge {
+      color: #d0d0d0;
+      font-style: italic;
+    }
+
+    .gr {
+      color: #d22323;
+    }
+
+    .gh {
+      color: #ffffff;
+      font-weight: bold;
+    }
+
+    .gi {
+      color: #589819;
+    }
+
+    .go {
+      color: #cccccc;
+    }
+
+    .gp {
+      color: #aaaaaa;
+    }
+
+    .gs {
+      color: #d0d0d0;
+      font-weight: bold;
+    }
+
+    .gu {
+      color: #ffffff;
+      text-decoration: underline;
+    }
+
+    .gt {
+      color: #d22323;
+    }
+
+    .kc, .kd, .kn {
+      color: #6ab825;
+      font-weight: bold;
+    }
+
+    .kp {
+      color: #6ab825;
+    }
+
+    .kr, .kt {
+      color: #6ab825;
+      font-weight: bold;
+    }
+
+    .ld {
+      color: #d0d0d0;
+    }
+
+    .m {
+      color: #3677a9;
+    }
+
+    .s {
+      color: #ed9d13;
+    }
+
+    .na {
+      color: #bbbbbb;
+    }
+
+    .nb {
+      color: #24909d;
+    }
+
+    .nc {
+      color: #447fcf;
+      text-decoration: underline;
+    }
+
+    .no {
+      color: #40ffff;
+    }
+
+    .nd {
+      color: #ffa500;
+    }
+
+    .ni {
+      color: #d0d0d0;
+    }
+
+    .ne {
+      color: #bbbbbb;
+    }
+
+    .nf {
+      color: #447fcf;
+    }
+
+    .nl {
+      color: #d0d0d0;
+    }
+
+    .nn {
+      color: #447fcf;
+      text-decoration: underline;
+    }
+
+    .nx, .py {
+      color: #d0d0d0;
+    }
+
+    .nt {
+      color: #6ab825;
+      font-weight: bold;
+    }
+
+    .nv {
+      color: #40ffff;
+    }
+
+    .ow {
+      color: #6ab825;
+      font-weight: bold;
+    }
+
+    .w {
+      color: #666666;
+    }
+
+    .mb, .mf, .mh, .mi, .mo {
+      color: #3677a9;
+    }
+
+    .sb, .sc, .sd, .s2, .se, .sh, .si {
+      color: #ed9d13;
+    }
+
+    .sx {
+      color: #ffa500;
+    }
+
+    .sr, .s1, .ss {
+      color: #ed9d13;
+    }
+
+    .bp {
+      color: #24909d;
+    }
+
+    .vc, .vg, .vi {
+      color: #40ffff;
+    }
+
+    .il {
+      color: #3677a9;
+    }
+  }
+
+  /* Comment */
+  /* Error */
+  /* Escape */
+  /* Generic */
+  /* Keyword */
+  /* Literal */
+  /* Name */
+  /* Operator */
+  /* Other */
+  /* Punctuation */
+  /* Comment.Hashbang */
+  /* Comment.Multiline */
+  /* Comment.Preproc */
+  /* Comment.PreprocFile */
+  /* Comment.Single */
+  /* Comment.Special */
+  /* Generic.Deleted */
+  /* Generic.Emph */
+  /* Generic.Error */
+  /* Generic.Heading */
+  /* Generic.Inserted */
+  /* Generic.Output */
+  /* Generic.Prompt */
+  /* Generic.Strong */
+  /* Generic.Subheading */
+  /* Generic.Traceback */
+  /* Keyword.Constant */
+  /* Keyword.Declaration */
+  /* Keyword.Namespace */
+  /* Keyword.Pseudo */
+  /* Keyword.Reserved */
+  /* Keyword.Type */
+  /* Literal.Date */
+  /* Literal.Number */
+  /* Literal.String */
+  /* Name.Attribute */
+  /* Name.Builtin */
+  /* Name.Class */
+  /* Name.Constant */
+  /* Name.Decorator */
+  /* Name.Entity */
+  /* Name.Exception */
+  /* Name.Function */
+  /* Name.Label */
+  /* Name.Namespace */
+  /* Name.Other */
+  /* Name.Property */
+  /* Name.Tag */
+  /* Name.Variable */
+  /* Operator.Word */
+  /* Text.Whitespace */
+  /* Literal.Number.Bin */
+  /* Literal.Number.Float */
+  /* Literal.Number.Hex */
+  /* Literal.Number.Integer */
+  /* Literal.Number.Oct */
+  /* Literal.String.Backtick */
+  /* Literal.String.Char */
+  /* Literal.String.Doc */
+  /* Literal.String.Double */
+  /* Literal.String.Escape */
+  /* Literal.String.Heredoc */
+  /* Literal.String.Interpol */
+  /* Literal.String.Other */
+  /* Literal.String.Regex */
+  /* Literal.String.Single */
+  /* Literal.String.Symbol */
+  /* Name.Builtin.Pseudo */
+  /* Name.Variable.Class */
+  /* Name.Variable.Global */
+  /* Name.Variable.Instance */
+  /* Literal.Number.Integer.Long */