Website dark mode support

This close #701.

_config.yml

@@ -95,7 +95,7 @@ menu:
   - title: 'Examples'
     url: 'examples/'
     slug: '/examples'
-  - title: 'Showcases'
+  - title: 'Showcase'
     url: 'showcase/'
     slug: '/showcase'
   - title: 'Docs'

source/docs/getstarted/lifecycle/index.md

@@ -19,8 +19,11 @@ Barba's default behavior:
 
 Here is a small diagram that describe **Barba's main concept** when navigating between two pages:
 
-<a href="/assets/diagram/lifecycle.png" target="_blank">
-  <img src="/assets/diagram/lifecycle.png" alt="Lifecycle diagram"/>
+<a href="/assets/diagram/lifecycle-light.svg" target="_blank" class="lifecycle-diagram light">
+  <img src="/assets/diagram/lifecycle-light.svg" alt="Lifecycle diagram"/>
+</a>
+<a href="/assets/diagram/lifecycle-dark.svg" target="_blank" class="lifecycle-diagram dark">
+  <img src="/assets/diagram/lifecycle-dark.svg" alt="Lifecycle diagram"/>
 </a>
 
 > Note that using the `sync` property will end in a different page lifecycle, see transition [sync mode](/docs/advanced/transitions/#Sync-mode).

source/showcase/index.md

@@ -1,12 +1,12 @@
 ---
-title: Showcases
+title: Showcase
 name: showcase
 namespace: showcase
 layout: components/page/page
 separator: true
 grid: true
 ---
 
-# Showcases
+# Showcase
 
 Our special gallery displays the best websites using Barba.js

themes/barba/layout/components/chrome/_header.scss

@@ -7,6 +7,10 @@
   background: $white;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background: $c-darkmode-light;
+  }
+
   @include mq(nav) {
     background: transparent;
   }
@@ -75,6 +79,7 @@
   z-index: 1000;
   display: flex;
   pointer-events: auto;
+  user-select: none;
 
   @include mq(m) {
     position: fixed;

themes/barba/layout/components/chrome/_menu-trigger.scss

@@ -41,6 +41,10 @@
   stroke-dashoffset: 160px;
   transition: stroke-dashoffset 0.6s $ease-out-quart;
 
+  @media (prefers-color-scheme: dark) {
+    stroke: $c-darkmode-links;
+  }
+
   [data-feature-order='0'] & {
     stroke: $c-menu-feature-0;
   }
@@ -108,6 +112,10 @@
   transform-origin: center center;
   transition: top 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
 
+  @media (prefers-color-scheme: dark) {
+    background: $c-darkmode-links;
+  }
+
   [data-feature-order='0'] & {
     background-color: $c-menu-feature-0;
   }

themes/barba/layout/components/chrome/_menu.scss

@@ -38,6 +38,10 @@
   transition: opacity 0.4s ease-in-out;
   cursor: pointer;
 
+  @media (prefers-color-scheme: dark) {
+    background: rgba($c-darkmode-light, 0.9);
+  }
+
   .is-open & {
     opacity: 1;
     pointer-events: initial;
@@ -58,6 +62,11 @@
   box-shadow: 10px 10px 10px 10px $c-blue-lighter;
   transform: translateX(110%);
 
+  @media (prefers-color-scheme: dark) {
+    background: rgba($c-darkmode-dark, 0.9);
+    box-shadow: 10px 10px 10px 10px $c-darkmode-dark;
+  }
+
   @include mq(m) {
     padding: 180px 50px 50px;
 
@@ -73,7 +82,6 @@
     left: 0;
     width: 100%;
     height: 10rem;
-    background: $white;
 
     @include mq(m) {
       height: 18rem;
@@ -109,8 +117,17 @@
   line-height: 1.2em;
   transition: color 0.2s ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    color: $c-darkmode-links;
+  }
+
   &.is-active {
     color: $black;
+    pointer-events: none;
+
+    @media (prefers-color-scheme: dark) {
+      color: currentcolor;
+    }
   }
 
   @media screen and (max-height: 850px) {
@@ -120,6 +137,10 @@
 }
 
 .menu__pages__item__link:not(.is-active) {
+  [data-feature-order='0'] & {
+    color: $c-menu-feature-0;
+  }
+
   [data-feature-order='1'] & {
     color: $c-menu-feature-1;
   }
@@ -143,6 +164,10 @@
   &:hover,
   &.is-active {
     color: $black;
+
+    @media (prefers-color-scheme: dark) {
+      color: currentcolor;
+    }
   }
 }
 
@@ -211,6 +236,10 @@
   color: $c-gray-medium;
   transition: color 0.2s ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    color: $c-darkmode-color;
+  }
+
   .menu-subpages__item:nth-child(1):hover &,
   .menu-subpages__item:nth-child(1).is-active & {
     color: $c-menu-feature-0;
@@ -268,10 +297,18 @@
   outline: 0;
   transition: background 0.2s ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    color: $c-darkmode-dark;
+  }
+
   &:hover {
     background: $c-blue-medium;
   }
 
+  [data-feature-order='0'] & {
+    background-color: $c-menu-feature-0;
+  }
+
   [data-feature-order='1'] & {
     background-color: $c-menu-feature-1;
   }
@@ -310,15 +347,15 @@
   align-items: center;
   height: 14px;
   margin-right: $spacing * 2;
-  color: $black;
+  color: currentcolor;
 }
 
 .menu-extra__twitter__icon {
   display: block;
   width: 16px;
   height: 13px;
   margin-right: $spacing / 2;
-  fill: $black;
+  fill: currentcolor;
 }
 
 .menu-extra__twitter__label {
@@ -335,6 +372,14 @@
   font-size: 1.1rem;
   letter-spacing: 0.1em;
 
+  a {
+    display: flex;
+
+    @media (prefers-color-scheme: dark) {
+      opacity: 0.8;
+    }
+  }
+
   a img {
     border-radius: 4px;
   }

themes/barba/layout/components/common/_bigtitle.scss

@@ -10,6 +10,7 @@
   min-height: 100vh;
   opacity: 0.07;
   pointer-events: none;
+  user-select: none;
 }
 
 .big-title__title {
@@ -24,6 +25,10 @@
   transform: rotate(90deg);
   transform-origin: left center;
 
+  @media (prefers-color-scheme: dark) {
+    color: $black;
+  }
+
   [class*='big-title--'][class*='--black'] & {
     color: $white;
   }

themes/barba/layout/components/common/_button.scss

@@ -107,12 +107,19 @@
 }
 
 [class*='button--'][class*='--fill'][class*='--black'] {
-  background: $black;
+  background: currentcolor;
   border-color: transparent;
+
+  @media (prefers-color-scheme: dark) {
+    .is-open & {
+      background: $c-darkmode-light;
+      border-color: $c-darkmode-light;
+    }
+  }
 }
 
 [class*='button--'][class*='--github'] {
-  color: $black;
+  color: currentcolor;
   font-size: 11px;
   font-weight: 300;
   transition:
@@ -121,7 +128,12 @@
     border-color 0.4s,
     transform 0.4s;
 
+  @media (prefers-color-scheme: dark) {
+    color: $c-darkmode-dark;
+  }
+
   span {
+    pointer-events: none;
     position: absolute;
     top: 50%;
     left: 100%;
@@ -132,7 +144,12 @@
     transition: opacity 0.4s ease-in-out;
 
     .is-open & {
+      pointer-events: auto;
       opacity: 1;
+
+      @media (prefers-color-scheme: dark) {
+        color: $c-darkmode-color;
+      }
     }
   }
 }

themes/barba/layout/components/common/_logo.scss

@@ -19,6 +19,10 @@
   }
 
   .base {
+    @media (prefers-color-scheme: dark) {
+      fill: rgba($c-darkmode-light, 0.7);
+    }
+
     .js__rect {
       opacity: 0;
     }

themes/barba/layout/components/docs/_docs-content.scss

@@ -162,6 +162,10 @@
       font-size: 1.2rem;
       border: 1px solid $c-gray-lighter;
 
+      @media (prefers-color-scheme: dark) {
+        border: 1px solid $c-darkmode-doc-table;
+      }
+
       @include mq(s) {
         padding: 0.7rem;
         font-size: 1.2rem;
@@ -212,6 +216,18 @@
     color: $c-blue-medium;
     white-space: nowrap;
 
+    @media (prefers-color-scheme: dark) {
+      color: $c-darkmode-links;
+
+      &:has(code) {
+        color: $c-darkmode-color;
+
+        &::before {
+          color: rgba($white, 0.7);
+        }
+      }
+    }
+
     &::before {
       content: '';
       position: absolute;

themes/barba/layout/components/docs/_docs-nav-lateral.scss

@@ -73,6 +73,10 @@
   transition: 0.2s $ease-out-quad;
   transition-property: color, background-color;
 
+  @media (prefers-color-scheme: dark) {
+    color: rgba($white, 0.8);
+  }
+
   @include mq(s) {
     &:hover {
       color: $white;

themes/barba/layout/components/docs/_docs-nav.scss

@@ -12,6 +12,10 @@
   background: $c-blue-lightest;
   transition: transform 0.3s $ease-out-quad;
 
+  @media (prefers-color-scheme: dark) {
+    background: $c-darkmode-dark;
+  }
+
   @include mq(m) {
     right: unset;
     width: 28vw;
@@ -64,6 +68,10 @@
 
     a {
       color: $gray-darker;
+
+      @media (prefers-color-scheme: dark) {
+        color: $c-darkmode-color;
+      }
     }
 
     &:last-child {