Add dark mode (#1556)

Co-authored-by: Gavin Mogan <[email protected]>

plugins/plugin-site/gatsby-config.mjs

@@ -1,5 +1,6 @@
 import dotenv from 'dotenv';
 import {dirname} from 'path';
+import fs from 'fs';
 import {fileURLToPath} from 'url';
 import algoliaQueries from './src/utils/algolia-queries.mjs';
 
@@ -27,7 +28,10 @@ Object.keys(process.env).forEach(key => {
     }
     element[splits.slice(-1)[0]] = process.env[key];
 });
-
+const resolvePath = fn => new URL(import.meta.resolve(fn));
+const darkCodeTheme = fs.readFileSync(resolvePath('github-syntax-dark/lib/github-dark.css'), 'utf8');
+const autoCodeTheme = `@media (prefers-color-scheme: dark){${darkCodeTheme}}`;
+fs.writeFileSync(resolvePath('github-syntax-dark/lib/github-auto.css'), autoCodeTheme);
 // This is the content of your gatsby-config.js
 // and what you need to provide as schema:
 const config = {
@@ -52,13 +56,15 @@ config.plugins = [
             githubBranch: 'master',
             githubRepo: 'jenkins-infra/plugin-site',
             reportAProblemTemplate: '4-bug.yml',
+            theme: 'auto',
             extraCss: [
                 '@import \'./styles/ubuntu-fonts.css\';',
                 '@import \'./styles/lato-fonts.css\';',
                 '@import \'./styles/roboto-fonts.css\';',
                 '@import \'./styles/base.css\';',
                 '@import \'./styles/font-icons.css\';',
-                '@import \'github-syntax-light/lib/github-light.css\';'
+                '@import \'github-syntax-light/lib/github-light.css\';',
+                '@import \'github-syntax-dark/lib/github-auto.css\';'
             ],
         },
     },

plugins/plugin-site/package.json

@@ -83,6 +83,7 @@
     "gatsby-remark-source-name": "1.0.0",
     "gatsby-transformer-asciidoc": "4.12.0",
     "gatsby-transformer-sharp": "5.12.3",
+    "github-syntax-dark": "0.5.0",
     "github-syntax-light": "0.5.0",
     "isomorphic-fetch": "3.0.0",
     "jest-environment-jsdom": "29.7.0",
@@ -105,7 +106,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@jenkinsci/gatsby-plugin-jenkins-layout": "1.5.0",
+    "@jenkinsci/gatsby-plugin-jenkins-layout": "1.6.0",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@typescript-eslint/eslint-plugin": "6.8.0",

plugins/plugin-site/postcss.config.js

@@ -2,7 +2,6 @@ module.exports = () => ({
     plugins: [
         require('postcss-import')({}), // Add support for sass-like '@import'
         require('postcss-url')(),
-        require('postcss-css-variables')(),
         require('postcss-calc')(),
         require('postcss-nesting')(), // Add support for sass-like nesting of rules
         require('postcss-pxtorem')({

plugins/plugin-site/src/components/ClipboardButton.module.css

@@ -5,9 +5,21 @@
   min-height: 2rem;
 }
 
+.copy-wrapper img {
+    opacity: 0.87;
+}
+
 .copy-success {
     position: absolute;
     right: 4rem;
     white-space: nowrap;
     line-height: 1rem;
 }
+
+
+@media (prefers-color-scheme: dark) {
+    .copy-wrapper img{
+        filter: invert(1);
+    }
+}
+

plugins/plugin-site/src/components/Filters.css

@@ -1,5 +1,5 @@
 .Filters--Container {
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--background);
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 3px;
     box-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.15);

plugins/plugin-site/src/components/SearchResults.css

@@ -1,9 +1,10 @@
 :root {
     --plugin-icon-width: 2.25em;
     --plugin-padding: 0.25em;
+    --search-background: #eae9e8;
 }
 #searchpage #grid-box {
-    background: #eae9e8;
+    background: var(--search-background);
 }
 .SearchResults--GridBox {
     display: flex;
@@ -13,11 +14,11 @@
     margin: 0 2rem 0;
 }
 .SearchResults--ItemBox {
-    background: #fff;
+    background: var(--background);
     border: 0.1rem solid #ccc;
     border-radius: 3px;
     box-sizing: border-box;
-    color: #666;
+    color: var(--bs-secondary);
     display: block;
     flex: 0 0 auto;
     font-size: 0.85rem;
@@ -49,7 +50,7 @@
         color: #666;
     }
     & a, & a:visited {
-        color: #59a; 
+        color: var(--link-color);
     }
     &:hover {
         text-decoration: none;
@@ -81,7 +82,7 @@
 .Plugin--TitleContainer {
     grid-area: title;
     & h4 {
-        color: #000;
+        color: var(--color);
         font-size: 1rem;
         font-weight: normal;
         line-height: 1.1rem;
@@ -99,7 +100,7 @@
     padding: 0;
 }
 .Plugin--VersionContainer {
-    color: #59a;
+    color: var(--link-color);
     font-size: 0.75rem;
     grid-area: version;
     line-height: 1rem;
@@ -117,7 +118,7 @@
     min-height: 1rem;
     overflow: hidden;
     & div {
-        color: #59a;
+        color: var(--link-color);
         display: inline;
         font-size: 0.75rem;
         line-height: 1rem;
@@ -155,7 +156,6 @@
     position: absolute;
     white-space: nowrap;
     & div {
-        color: #59a;
         font-size: 0.75rem;
         line-height: 1rem;
         margin-right: 0.5rem;

plugins/plugin-site/src/styles/base.css

@@ -106,18 +106,17 @@ h6 .anchor:focus ion-icon {
 	opacity:.5;
 }
 
-body a {color:#069}
-body a:hover {color:#09c}
-body a:active {color:#c00}
-
 .NoLabels > .Categories label > input {display:none}
 .NoLabels > .Categories label > span {margin-left:0 !important; color:#0275d8; cursor:pointer}
 
 h1.title {
   margin-right: 2rem;
 }
-
-body #grid-box .NoLabels {padding: 2rem 0; background:#e5f8ff}
+:root {
+--code-background: rgb(246, 248, 250);
+--no-labels-background: #e5f8ff;
+}
+body #grid-box .NoLabels {padding: 2rem 0; background:var(--no-labels-background)}
 body #grid-box .NoLabels .CategoryList {font-size:.875rem}
 body #grid-box .NoLabels .CategoryList label > span {margin-left:.5rem}
 body #grid-box .NoLabels .Entry-box {
@@ -535,7 +534,7 @@ body .item-finder.List a.item .Labels>span,
 body .item-finder.List a.item .Authors>div,
 .Tile .Authors>div {
   font-size: .75rem;
-  color: #59a;
+  color: var(--link-color);
   margin-right: .5rem;
   line-height: 1rem;
 }
@@ -971,7 +970,7 @@ a.card:hover {
 }
 
 .markdown-body pre, .code-wrapper pre {
-  background-color: rgb(246, 248, 250);
+  background-color: var(--code-background);
   padding: 16px;
   border-radius: 4px;
 }
@@ -992,3 +991,65 @@ a.card:hover {
     max-width: 700px;
   }
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    --color: #dee2e6;
+    --background: #212529;
+    --link-color: #6ea8fe;
+    --no-labels-background: #212529;
+    --code-background: #111;
+    --search-background: #313539;
+    --bs-body-color: #dee2e6;
+    --bs-body-color-rgb: 222,226,230;
+    --bs-body-bg: #212529;
+    --bs-body-bg-rgb: 33,37,41;
+    --bs-emphasis-color: #fff;
+    --bs-emphasis-color-rgb: 255,255,255;
+    --bs-secondary-color: rgba(222, 226, 230, 0.75);
+    --bs-secondary-color-rgb: 222,226,230;
+    --bs-secondary-bg: #343a40;
+    --bs-secondary-bg-rgb: 52,58,64;
+    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
+    --bs-tertiary-color-rgb: 222,226,230;
+    --bs-tertiary-bg: #2b3035;
+    --bs-tertiary-bg-rgb: 43,48,53;
+    --bs-primary-text-emphasis: #6ea8fe;
+    --bs-secondary-text-emphasis: #a7acb1;
+    --bs-success-text-emphasis: #75b798;
+    --bs-info-text-emphasis: #6edff6;
+    --bs-warning-text-emphasis: #ffda6a;
+    --bs-danger-text-emphasis: #ea868f;
+    --bs-light-text-emphasis: #f8f9fa;
+    --bs-dark-text-emphasis: #dee2e6;
+    --bs-primary-bg-subtle: #031633;
+    --bs-secondary-bg-subtle: #161719;
+    --bs-success-bg-subtle: #051b11;
+    --bs-info-bg-subtle: #032830;
+    --bs-warning-bg-subtle: #332701;
+    --bs-danger-bg-subtle: #2c0b0e;
+    --bs-light-bg-subtle: #343a40;
+    --bs-dark-bg-subtle: #1a1d20;
+    --bs-primary-border-subtle: #084298;
+    --bs-secondary-border-subtle: #41464b;
+    --bs-success-border-subtle: #0f5132;
+    --bs-info-border-subtle: #087990;
+    --bs-warning-border-subtle: #997404;
+    --bs-danger-border-subtle: #842029;
+    --bs-light-border-subtle: #495057;
+    --bs-dark-border-subtle: #343a40;
+    --bs-heading-color: inherit;
+    --bs-link-color: #6ea8fe;
+    --bs-link-hover-color: #8bb9fe;
+    --bs-link-color-rgb: 110,168,254;
+    --bs-link-hover-color-rgb: 139,185,254;
+    --bs-code-color: #e685b5;
+    --bs-highlight-color: #dee2e6;
+    --bs-highlight-bg: #664d03;
+    --bs-border-color: #495057;
+    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+    --bs-form-valid-color: #75b798;
+    --bs-form-valid-border-color: #75b798;
+    --bs-form-invalid-color: #ea868f;
+    --bs-form-invalid-border-color: #ea868f;
+  }
+}