docs: support dark mode

docs/source/sw.js

@@ -9,6 +9,7 @@ const urlsToCache = [
   '/fonts/icomoon.ttf?e8nnma'
 ]
 const blackList = [
+  /chrome-extension:/,
   /google-analytics.com.*collect/
 ]
 
@@ -29,7 +30,14 @@ self.addEventListener('fetch', event => {
   if (
     event.request.method !== 'GET' || blackList.some(regex => regex.exec(event.request.url))
   ) return network(event.request)
-  event.respondWith(networkAndSave(event.request).catch(() => cache(event.request)))
+  if (event.request.url.match(/\.githubusercontent\.com/)) {
+    // cache first
+    const pn = networkAndSave(event.request)
+    event.respondWith(cache(event.request).then(res => res || pn).catch(() => pn))
+  } else {
+    // network first
+    event.respondWith(networkAndSave(event.request).catch(() => cache(event.request)))
+  }
 })
 
 function cache (req) {

docs/themes/navy/layout/index.swig

@@ -25,13 +25,7 @@
   <div class="wrapper">
     <div class="inner">
       {{ page.content }}
-      <ul id="intro-cmd-wrap">
-        <li class="intro-code-item"><span class="hl">import</span> { Liquid } <span class="hl">from</span> 'liquidjs'</li>
-        <li class="intro-code-item"><span class="hl">const</span> engine = <span class="hl">new</span> Liquid()</li>
-        <li class="intro-code-item"><span class="hl">const</span> tpl = engine.parse(<span class="hl-str">'Welcome to &#x7b;&#x7b;v}}!'</span>)</li>
-        <li class="intro-code-item">engine.render(tpl, {v: "Liquid"}).then(console.log)</li>
-        <li class="intro-code-item"><span class="hl-comment">// Outputs "Welcome to Liquid!"</span></li>
-      </ul>
+      <div id="intro-cmd-wrap" class="highlight typescript"><pre><span class="line"><span class="keyword">import</span> { Liquid } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"><span class="keyword">const</span> tpl = engine.parse(<span class="string">'Welcome to {{v}}!'</span>)</span><br><span class="line">engine.render(tpl, {<span class="attr">v</span>: <span class="string">"Liquid"</span>}).then(<span class="built_in">console</span>.log)</span><br><span class="line"><span class="comment">// Outputs "Welcome to Liquid!"</span></span><br></pre></div>
       <div id="intro-get-started-wrap">
         <a href="tutorials/setup.html" id="intro-get-started-link">{{ __('index.get_started') }}</a>
       </div>

docs/themes/navy/source/css/_partial/base.styl

@@ -21,15 +21,28 @@ input, button, select
   border: 0
 
 body
-  background: color-navy
+  background: var(--color-navy)
   font-size: font-size
   font-family: font-sans
-  color: color-default
+  color: var(--color-default)
   text-rendering: optimizeLegibility
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
   overflow-x: hidden
 
+a
+  color: var(--color-link)
+  text-decoration: none
+  &:hover
+    color: var(--color-link-hover)
+    text-decoration: underline
+  @media print
+    color: var(--color-default)
+    text-decoration: underline
+    &:after
+      content: " (" attr(href) ")"
+      font-size: 80%
+
 @media screen and (max-device-width: 480px)
   body
     -webkit-text-size-adjust: none;
@@ -44,10 +57,8 @@ body
     padding: 0 gutter-width
 
 #content-wrap
-  background: #fff
-  border-top: 1px solid darken(color-navy, 5%)
-  border-bottom: 1px solid darken(color-navy, 5%)
-  margin: -1px 0
+  background: var(--color-content-bg)
+  overflow: hidden
   
 .video-container
   text-align: center

docs/themes/navy/source/css/_partial/footer.styl

@@ -3,7 +3,7 @@
   padding: 24px 0
   color: rgba(255, 255, 255, 0.6)
   position: relative
-  background: color-navy
+  background: var(--color-navy)
   text-align: center
   @media mq-normal
     padding: 40px 0

docs/themes/navy/source/css/_partial/header.styl

@@ -36,7 +36,7 @@ logo-size = 36px
 #search-input-wrap
   display: none
   padding-left: 6px
-  border-bottom: 1px solid color-gray
+  border-bottom: 1px solid var(--color-gray)
   &.on
     display: inline-block
   > i, > span, #search-input
@@ -59,7 +59,7 @@ logo-size = 36px
   text-decoration: none
   line-height: logo-size
   opacity: 0.7
-  transition: 0.2s
+  transition: opacity 0.2s, color 0.2s
   display: inline-block
   padding: 0 15px
   i
@@ -68,7 +68,8 @@ logo-size = 36px
     opacity: 1
   &:hover
     opacity: 1
-    color: color-link-hover
+    color: var(--color-link-hover)
+    text-decoration: none
 
 #lang-select-wrap
 #github-link-wrap

docs/themes/navy/source/css/_partial/highlight.styl

@@ -1,21 +1,40 @@
 // https://github.com/chriskempson/tomorrow-theme
-highlight-background = #fff
-highlight-current-line = #efefef
-highlight-selection = #d6d6d6
-highlight-foreground = #4d4d4c
-highlight-comment = #8e908c
-highlight-red = #c82829
-highlight-orange = #f5871f
-highlight-yellow = #eab700
-highlight-green = #718c00
-highlight-aqua = #3e999f
-highlight-blue = #4271ae
-highlight-purple = #8959a8
+:root {
+    --highlight-background: #eee
+    --highlight-current-line: #efefef
+    --highlight-selection: #d6d6d6
+    --highlight-foreground: #4d4d4c
+    --highlight-comment: #8e908c
+    --highlight-red: #c82829
+    --highlight-orange: #f5871f
+    --highlight-yellow: #eab700
+    --highlight-green: #718c00
+    --highlight-aqua: #3e999f
+    --highlight-blue: #4271ae
+    --highlight-purple: #8959a8
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --highlight-background: #000000
+        --highlight-current-line: #2a2a2a
+        --highlight-selection: #424242
+        --highlight-foreground: #eaeaea
+        --highlight-comment: #969896
+        --highlight-red: #d54e53
+        --highlight-orange: #e78c45
+        --highlight-yellow: #e7c547
+        --highlight-green: #b9ca4a
+        --highlight-aqua: #70c0b1
+        --highlight-blue: #7aa6da
+        --highlight-purple: #c397d8
+    }
+}
 
 pre, code
   font-family: font-mono
-  color: highlight-foreground
-  background: #eee
+  color: var(--highlight-foreground)
+  background: var(--color-content-bg-hl)
 
 code
   padding: 0 5px
@@ -29,9 +48,9 @@ pre
     padding: 0
 
 .highlight
-  background: #eee
   padding: 10px 15px
-  color: highlight-foreground
+  color: var(--highlight-foreground)
+  background: var(--highlight-background)
   overflow: auto
   margin: 0
   table
@@ -42,12 +61,12 @@ pre
   figcaption
     clearfix()
     margin: -5px 0 5px
-    color: color-gray
+    color: var(--color-gray)
     a
       float: right
   pre
+    margin: 0
     padding: 0
-    border: none
     background: none
   .line
     height: 22px
@@ -55,7 +74,7 @@ pre
 pre
   .comment
   .title
-    color: highlight-comment
+    color: var(--highlight-comment)
   .variable
   .attribute
   .tag
@@ -68,27 +87,27 @@ pre
   .css .id
   .css .class
   .css .pseudo
-    color: highlight-red
+    color: var(--highlight-red)
   .number
   .preprocessor
   .built_in
   .literal
   .params
   .constant
-    color: highlight-orange
+    color: var(--highlight-orange)
   .class
   .ruby .class .title
   .css .rules .attribute
-    color: highlight-green
+    color: var(--highlight-green)
   .string
   .value
   .inheritance
   .header
   .ruby .symbol
   .xml .cdata
-    color: highlight-green
+    color: var(--highlight-green)
   .css .hexcolor
-    color: highlight-aqua
+    color: var(--highlight-aqua)
   .function
   .python .decorator
   .python .title
@@ -97,7 +116,7 @@ pre
   .perl .sub
   .javascript .title
   .coffeescript .title
-    color: highlight-blue
+    color: var(--highlight-blue)
   .keyword
   .javascript .function
-    color: highlight-purple
+    color: var(--highlight-purple)

docs/themes/navy/source/css/_partial/index.styl

@@ -30,7 +30,7 @@
     font-size: 18px
 
 #banner-start-command
-  background: lighten(color-navy, 10%)
+  background: var(--color-navy-lighter)
   padding: 0 15px
   color: #fff
   display: inline-block
@@ -41,20 +41,20 @@
 
 #banner-start-link
   color: #fff
-  background: color-link
+  background: var(--color-link)
   display: inline-block
   padding: 0 15px
   text-decoration: none
-  transition: 0.2s
+  transition: background 0.2s
   &:hover
-    background: color-link-hover
+    background: var(--color-link-hover)
 
 #banner-share
   display: block
   padding-bottom: 60px
 
 #intro-news-list
-  background-color: darken(color-navy, 10%)
+  background-color: var(--color-news-bg)
   margin: -1px 0
 
 #intro-news-flex
@@ -67,7 +67,7 @@
   padding: 24px 30px
   text-decoration: none
   &:hover
-    background-color: color-link-hover
+    background-color: var(--color-link-hover)
   @media mq-normal
     flex: 0 0 50%
     padding: 36px 30px
@@ -108,7 +108,7 @@
     padding-left: 70px
 
 .intro-feature-icon
-  color: color-link
+  color: var(--color-link)
   font-size: 36px
   margin-bottom: 6px;
   text-align: center
@@ -121,7 +121,7 @@
     width: @font-size
 
 .intro-feature-title
-  color: color-link
+  color: var(--color-link)
   font-size: 24px
 
 .intro-feature-desc
@@ -136,29 +136,21 @@
       color: black
     &:hover
       text-decoration: underline
+    @media (prefers-color-scheme: dark)
+      color: white
+      &:visited, &:hover
+        color: white
 
 #intro-cmd-wrap
   max-width: 700px
-  background: #eee
-  padding: 15px 0
+  padding: 15px 30px
+  font-size: 16px
+  pre
+    line-height: 32px
   overflow: auto
   margin: 50px auto 0;
   @media mq-normal
     margin: 70px auto 0;
-  li
-    font-size: 16px
-    font-family: font-mono
-    line-height: 2
-    padding: 0 30px
-
-.intro-code-item
-  white-space: pre
-  .hl
-    color: color-link
-  .hl-str
-    color: #9e0001ad
-  .hl-comment
-    color: #056d05b5
 
 #intro-get-started-wrap
   text-align: center
@@ -170,17 +162,17 @@
   font-size: 18px
   display: inline-block
   text-decoration: none
-  border: 3px solid lighten(color-link, 20%)
+  border: 3px solid var(--color-link-hover)
   padding: 12px 24px
   position: relative
-  transition: 0.2s
-  color: color-link
+  transition: background 0.2s, color 0.2s
+  color: var(--color-link)
   &:hover
-    background: lighten(color-link, 20%)
+    background: var(--color-link-hover)
     color: #fff
 
 #sponsors-wrap, #contributors-wrap
-  background: lighten(color-navy, 10%)
+  background: var(--color-navy-lighter)
   border-top: 1px solid #161d24
   border-bottom: 1px solid #161d24
   margin: -1px 0
@@ -210,29 +202,37 @@
         display: inline-block
         height: 72px
         width: 72px
-        background: color-gray
+        background: var(--color-gray)
         border-radius: 50%
         margin-bottom: 10px
   .description a
     color: #fff
     &:hover
       background: #fff
-      color: lighten(color-navy, 10%)
+      color: var(--color-navy-lighter)
 
 #sponsors-wrap
-  background: #fff
+  background: var(--color-content-bg)
   border: none
   text-align: right
   overflow: hidden;
   .inner
     h3
-      color: color-default
+      color: var(--color-default)
     p
-      color: color-gray
+      color: var(--color-gray)
     .open-collective
       margin: 0 auto
     .description a
       color: #333
       &:hover
-        background: color-navy
+        background: var(--color-navy)
         color: #fff
+    @media (prefers-color-scheme: dark)
+      p
+        color: var(--color-default)
+      .description a
+        color: #fff
+        &:hover
+          background: #fff
+          color: var(--color-navy-lighter)

docs/themes/navy/source/css/_partial/mobile_nav.styl

@@ -15,13 +15,13 @@ lang-select-height = 40px
   width: mobile-nav-width
   left: @width * -1
   height: 100%
-  background: color-navy
+  background: var(--color-navy)
   transition: transition-duration
   .mobile-nav-on &
     transform: translateX(100%)
 
 .mobile-sidebar-list
-  background: lighten(color-navy, 10%)
+  background: var(--color-navy-lighter)
 
 #mobile-nav-inner
   overflow-y: auto
@@ -85,7 +85,7 @@ lang-select-height = 40px
   text-overflow: ellipsis
 
 .mobile-nav-title
-  color: color-link
+  color: var(--color-link)
   font-weight: bold
   padding: 10px 15px
   line-height: 1
@@ -101,7 +101,7 @@ lang-select-height = 40px
   bottom: 0
   left: 0
   width: 100%
-  background: color-navy
+  background: var(--color-navy)
   border-top: 1px solid #444
 
 #mobile-lang-select-label

docs/themes/navy/source/css/_partial/page.styl

@@ -53,10 +53,10 @@ note-warn = hsl(0, 100%, 50%)
   margin-top: 13px
   font-size: 0.9em
   text-decoration: none
-  color: color-default
+  color: var(--color-default)
   display: block
   &:hover
-    color: color-link-hover
+    color: var(--color-link-hover)
 
 .article-header
   padding-bottom: 20px
@@ -67,20 +67,20 @@ note-warn = hsl(0, 100%, 50%)
   font-size: 36px
   font-weight: 300
   text-decoration: none
-  color: color-default
+  color: var(--color-default)
   transition: 0.2s
   a&:hover
-    color: color-link-hover
+    color: var(--color-link-hover)
   .post &
     float: none
 
 .article-date
-  color: color-gray
+  color: var(--color-gray)
   text-decoration: none
   display: inline-block
   margin-top: 1em
   &:hover
-    color: color-link-hover
+    color: var(--color-link-hover)
 
 .article-edit-link
   float: right
@@ -91,7 +91,7 @@ note-warn = hsl(0, 100%, 50%)
   transition: 0.2s
   display: none
   &:hover
-    color: color-link-hover
+    color: var(--color-link-hover)
   @media mq-normal
     display: block
 
@@ -107,7 +107,7 @@ note-warn = hsl(0, 100%, 50%)
 
 .article-content
   line-height: line-height
-  color: color-default
+  color: var(--color-default)
   @media print
     font-size: 12pt
   p, ol, ul, dl, table, blockquote, iframe, .highlight
@@ -116,7 +116,7 @@ note-warn = hsl(0, 100%, 50%)
     font-size: 2em
   h2
     font-size: 1.5em
-    border-bottom: 1px solid color-border
+    border-bottom: 1px solid var(--color-border)
     padding-bottom: 10px
     margin-bottom: 15px
   h3
@@ -127,19 +127,8 @@ note-warn = hsl(0, 100%, 50%)
     margin: 1em 0
   hr
     border-bottom: none;
-    border-top: 1px dashed color-border;
+    border-top: 1px dashed var(--color-border);
   a
-    color: color-link
-    text-decoration: none
-    &:hover
-      color: color-link-hover
-      text-decoration: underline
-    @media print
-      color: color-default
-      text-decoration: underline
-      &:after
-        content: " (" attr(href) ")"
-        font-size: 80%
     &[target="_blank"]
       position: relative
       &::after
@@ -175,7 +164,7 @@ note-warn = hsl(0, 100%, 50%)
   blockquote
     padding: 0 20px
     position: relative
-    border: 1px solid color-border
+    border: 1px solid var(--color-border)
     border-left: 5px solid #ddd
     footer
       margin: 1em 0
@@ -186,6 +175,8 @@ note-warn = hsl(0, 100%, 50%)
           padding: 0 0.3em
         a
           color: color-grey
+    @media (prefers-color-scheme: dark)
+      border-color: var(--color-gray)
   .note
     &.tip
       border-left-color: note-tip
@@ -207,7 +198,7 @@ note-warn = hsl(0, 100%, 50%)
       margin-top: 0
   table
     max-width: 100%
-    border: 1px solid color-border
+    border: 1px solid var(--color-border)
     th
       font-weight: bold
     th, td
@@ -215,12 +206,14 @@ note-warn = hsl(0, 100%, 50%)
     tr
       &:nth-child(2n)
         background: #eee
+        @media (prefers-color-scheme: dark)
+          background: var(--color-gray)
 
 .article-footer
   margin: 60px 0 0
-  border-top: 1px solid color-border
+  border-top: 1px solid var(--color-border)
   text-align: center
-  color: color-gray
+  color: var(--color-gray)
   line-height: 1em
   padding-top: 1em
   position: relative
@@ -228,13 +221,13 @@ note-warn = hsl(0, 100%, 50%)
     display: none
 
 $article-footer-link
-  color: color-link
+  color: var(--color-link)
   text-decoration: none
   font-weight: bold
   text-transform: uppercase
   position: absolute
   &:hover
-    color: color-link-hover
+    color: var(--color-link-hover)
   @media print
     display: none
   span

docs/themes/navy/source/css/_partial/playground.styl

@@ -1,5 +1,5 @@
 #playground
-  background: white
+  background: var(--color-content-bg)
   overflow: hidden
   .wrapper
     margin-bottom: 40px

docs/themes/navy/source/css/_partial/sidebar.styl

@@ -11,22 +11,22 @@
   margin-top: 40px
   padding: 10px 0
   font-weight: bold
-  color: color-link
+  color: var(--color-link)
   display: inline-block
-  border-top: 1px solid color-border
+  border-top: 1px solid var(--color-border)
   line-height: 1
 .sidebar-title:first-child
   margin-top: 0
 
 .sidebar-link
   display: block
-  color: color-default
+  color: var(--color-default)
   text-decoration: none
   padding: 7px 0
   line-height: 1
   position: relative
   width: 100%
   &.current
-    color: color-link
+    color: var(--color-link)
   &:hover
-    color: color-link-hover
+    color: var(--color-link-hover)

docs/themes/navy/source/css/_variables.styl

@@ -3,12 +3,36 @@ support-for-ie = false
 vendor-prefixes = webkit moz ms official
 
 // Colors
-color-default = #444
-color-gray = #999
-color-border = #e3e3e3
-color-navy = hsl(210, 25%, 12%)
-color-link = #0e83cd
-color-link-hover = lighten(color-link, 10%)
+:root {
+    --color-default: #444
+    --color-default-invert: #d1d2d4
+    --color-gray: #999
+    --color-border: #e3e3e3
+    --color-navy: hsl(210, 25%, 12%)
+    --color-content-bg: #fff
+    --color-content-bg-hl: #eee
+    --color-news-bg: darken(hsl(210, 25%, 12%), 5%)
+    --color-navy-lighter: lighten(hsl(210, 25%, 12%), 10%)
+    --color-link: #0e83cd
+    --color-link-hover: lighten(#0e83cd, 10%)
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-default: #d1d2d4
+        --color-default-invert: #444
+        --color-gray: invert(#999)
+        --color-border: invert(#e3e3e3)
+        --color-backgrond: #fff
+        --color-navy: hsl(210, 25%, 12%)
+        --color-news-bg: darken(hsl(210, 25%, 12%), 5%)
+        --color-content-bg-hl: #000
+        --color-navy-lighter: lighten(hsl(210, 25%, 12%), 10%)
+        --color-content-bg: #1c1c1c
+        --color-link: #0e83cd
+        --color-link-hover: lighten(#0e83cd, 10%)
+    }
+}
 
 // Typography
 font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif