Merge pull request #4921 from alphagov/spike-css-custom-properties-us…

…er-preference

[SPIKE] Allow an app to respect system preference, or override them with app preference it would store

packages/govuk-frontend-review/src/app.mjs

@@ -62,6 +62,7 @@ export default async () => {
   app.set('query parser', 'simple')
 
   // Set up middleware
+  app.use(middleware.theme)
   app.use('/docs', middleware.docs)
   app.use(middleware.assets)
   app.use(middleware.request)

packages/govuk-frontend-review/src/common/middleware/index.mjs

@@ -6,3 +6,4 @@ export { default as banner } from './banner.mjs'
 export { default as docs } from './docs.mjs'
 export { default as request } from './request.mjs'
 export { default as robots } from './robots.mjs'
+export { default as theme } from './theme.mjs'

packages/govuk-frontend-review/src/common/middleware/theme.mjs

@@ -0,0 +1,16 @@
+import express from 'express'
+
+const router = express.Router()
+
+/**
+ * Configure view with the relevant theme based on query params
+ */
+router.use((req, res, next) => {
+  const { query } = req
+
+  res.locals.govukFrontendTheme = query.theme
+
+  next()
+})
+
+export default router

packages/govuk-frontend-review/src/views/layouts/_generic.njk

@@ -1,6 +1,6 @@
 {% extends "govuk/template.njk" %}
 
-{% set htmlClasses = 'govuk-template--dark' %}
+{% set htmlClasses = ('govuk-theme--' + govukFrontendTheme) if govukFrontendTheme %}
 
 {% block head %}
   <link rel="stylesheet" href="/stylesheets/app.min.css">

packages/govuk-frontend/src/govuk/core/_all.scss

@@ -1,4 +1,5 @@
 @import "govuk-frontend-properties";
+@import "theme";
 @import "links";
 @import "lists";
 @import "typography";

packages/govuk-frontend/src/govuk/core/_govuk-frontend-properties.scss

@@ -9,26 +9,4 @@
   }
 
   --govuk-font-family: #{$govuk-font-family};
-  --govuk-brand-colour: #{$govuk-brand-colour};
-  --govuk-text-colour: #{$govuk-text-colour};
-  --govuk-canvas-background-colour: #{$govuk-canvas-background-colour};
-  --govuk-body-background-colour: #{$govuk-body-background-colour};
-  --govuk-print-text-colour: #{$govuk-print-text-colour};
-  --govuk-secondary-text-colour: #{$govuk-secondary-text-colour};
-  --govuk-focus-colour: #{$govuk-focus-colour};
-  --govuk-focus-text-colour: #{$govuk-focus-text-colour};
-  --govuk-error-colour: #{$govuk-error-colour};
-  --govuk-success-colour: #{$govuk-success-colour};
-  --govuk-border-colour: #{$govuk-border-colour};
-  --govuk-input-border-colour: #{$govuk-input-border-colour};
-  --govuk-hover-colour: #{$govuk-hover-colour};
-  --govuk-link-colour: #{$govuk-link-colour};
-  --govuk-link-visited-colour: #{$govuk-link-visited-colour};
-  --govuk-link-hover-colour: #{$govuk-link-hover-colour};
-  --govuk-link-active-colour: #{$govuk-link-active-colour};
-
-  @include govuk-media-query($media-type: print) {
-    --govuk-text-colour: #{$govuk-print-text-colour};
-    --govuk-font-family: #{$govuk-font-family-print};
-  }
 }

packages/govuk-frontend/src/govuk/core/_theme.scss

@@ -0,0 +1,69 @@
+// This would likely go in a proper 'settings' file
+// and default to `false`.
+$govuk-theme-from-system: true !default;
+
+@mixin _govuk-theme-light() {
+  color-scheme: light;
+
+  --govuk-brand-colour: #{$govuk-brand-colour};
+  --govuk-text-colour: #{$govuk-text-colour};
+  --govuk-canvas-background-colour: #{$govuk-canvas-background-colour};
+  --govuk-body-background-colour: #{$govuk-body-background-colour};
+  --govuk-print-text-colour: #{$govuk-print-text-colour};
+  --govuk-secondary-text-colour: #{$govuk-secondary-text-colour};
+  --govuk-focus-colour: #{$govuk-focus-colour};
+  --govuk-focus-text-colour: #{$govuk-focus-text-colour};
+  --govuk-error-colour: #{$govuk-error-colour};
+  --govuk-success-colour: #{$govuk-success-colour};
+  --govuk-border-colour: #{$govuk-border-colour};
+  --govuk-input-border-colour: #{$govuk-input-border-colour};
+  --govuk-hover-colour: #{$govuk-hover-colour};
+  --govuk-link-colour: #{$govuk-link-colour};
+  --govuk-link-visited-colour: #{$govuk-link-visited-colour};
+  --govuk-link-hover-colour: #{$govuk-link-hover-colour};
+  --govuk-link-active-colour: #{$govuk-link-active-colour};
+}
+
+@mixin _govuk-theme-dark() {
+  @supports (color-scheme: dark) {
+    color-scheme: dark;
+
+    --govuk-canvas-background-colour: #333333;
+    --govuk-body-background-colour: #222222;
+    --govuk-text-colour: #ffffff;
+    --govuk-secondary-text-colour: #cccccc;
+    --govuk-link-colour: #add8e6;
+    --govuk-link-visited-colour: #ffb6c1;
+    --govuk-link-hover-colour: #00ffff;
+    --govuk-link-active-colour: #ffffff;
+  }
+}
+
+@include govuk-exports("govuk/core/theme") {
+  :root {
+    @include _govuk-theme-light;
+
+    @if $govuk-theme-from-system {
+      @include govuk-media-query($media-type: screen, $and: "(prefers-color-scheme: dark)") {
+        &:not(.govuk-theme--light) {
+          @include _govuk-theme-dark;
+        }
+      }
+    }
+  }
+
+  // Prevent dark theme to leak into print if some variables don't get overridden
+  // reducing the risk of printing big areas of black
+  @include govuk-media-query($media-type: screen) {
+    .govuk-theme--dark {
+      @include _govuk-theme-dark;
+    }
+  }
+
+  @include govuk-media-query($media-type: print) {
+    :root {
+      --govuk-text-colour: #{$govuk-print-text-colour};
+      --govuk-font-family: #{$govuk-font-family-print};
+    }
+  }
+}

packages/govuk-frontend/src/govuk/objects/_template.scss

@@ -46,21 +46,4 @@
     // Set the overall body of the page back to the typical background colour.
     background-color: var(--govuk-body-background-colour);
   }
-
-
-  @include govuk-media-query($media-type: screen) {
-    .govuk-template--dark {
-      color-scheme: dark;
-
-      --govuk-canvas-background-colour: #333;
-      --govuk-hover-colour: #333;
-      --govuk-body-background-colour: #222;
-      --govuk-text-colour: #fff;
-      --govuk-secondary-text-colour: #ccc;
-      --govuk-link-colour: lightblue;
-      --govuk-link-visited-colour: lightpink;
-      --govuk-link-hover-colour: aqua;
-      --govuk-link-active-colour: #fff;
-    }
-  }
 }