feat(pages): add dark theme support (#1088)

* feat(pages): add dark theme support * docs: document theme option * chore: remove ts-check from dev app * style(pages): fix some text colors in dark mode
nextauthjs · Jan 11, 2021 · 1838e43 · 1838e43
1 parent 354d6c3
commit 1838e43
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 8 deletions.
diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js
@@ -1,4 +1,3 @@
-// @ts-check
 import NextAuth from "next-auth"
 import Providers from "next-auth/providers"
 

diff --git a/src/css/index.css b/src/css/index.css
@@ -1,16 +1,44 @@
 :root {
+  --border-width: 1px;
+  --border-radius: .3rem;
+  --color-error: #c94b4b;
+  --color-info: #157efb;
+}
+
+.__next-auth-theme-auto,
+.__next-auth-theme-light {
   --color-background: #fff;
+  --color-text: #000;
   --color-primary: #444;
   --color-control-border: #bbb;
   --color-button-active-background: #f9f9f9;
   --color-button-active-border: #aaa;
-  --border-width: 1px;
-  --border-radius: .3rem;
-  --color-error: #c94b4b;
-  --color-info: #157efb;
   --color-seperator: #ccc;
 }
 
+.__next-auth-theme-dark {
+  --color-background: #000;
+  --color-text: #fff;
+  --color-primary: #ccc;
+  --color-control-border: #555;
+  --color-button-active-background: #060606;
+  --color-button-active-border: #666;
+
+  --color-seperator: #444;
+}
+
+@media (prefers-color-scheme: dark) {
+  .__next-auth-theme-auto {
+    --color-background: #000;
+    --color-text: #fff;
+    --color-primary: #ccc;
+    --color-control-border: #555;
+    --color-button-active-background: #060606;
+    --color-button-active-border: #666;
+    --color-seperator: #444;
+  }
+}
+
 body {
   background-color: var(--color-background);
   margin: 0;
@@ -22,6 +50,7 @@ h1 {
   font-weight: 400;
   margin-bottom: 1.5rem;
   padding: 0 1rem;
+  color: var(--color-text);
 }
 
 form {
@@ -169,7 +198,7 @@ a.site {
     font-weight: 500;
     border-radius: 0.3rem;
     background: var(--color-info);
-    color: #fff;
+    color: var(--color-text);
 
     p {
       text-align: left;

diff --git a/src/server/index.js b/src/server/index.js
@@ -74,6 +74,7 @@ async function NextAuthHandler (req, res, userOptions) {
     req.options = {
       debug: false,
       pages: {},
+      theme: 'auto',
       // Custom options override defaults
       ...userOptions,
       // These computed settings can have values in userOptions but we override them

diff --git a/src/server/pages/index.js b/src/server/pages/index.js
@@ -6,11 +6,11 @@ import css from '../../css'
 
 /** Takes a request and response, and gives renderable pages */
 export default function renderPage (req, res) {
-  const { baseUrl, basePath, callbackUrl, csrfToken, providers } = req.options
+  const { baseUrl, basePath, callbackUrl, csrfToken, providers, theme } = req.options
 
   res.setHeader('Content-Type', 'text/html')
   function send (html) {
-    res.send(`<!DOCTYPE html><head><style type="text/css">${css()}</style><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div class="page">${html}</div></body></html>`)
+    res.send(`<!DOCTYPE html><head><style type="text/css">${css()}</style><meta name="viewport" content="width=device-width, initial-scale=1"></head><body class="__next-auth-theme-${theme}"><div class="page">${html}</div></body></html>`)
   }
 
   return {

diff --git a/www/docs/configuration/options.md b/www/docs/configuration/options.md
@@ -307,6 +307,17 @@ Set debug to `true` to enable debug messages for authentication and database ope
 
 ---
 
+### theme
+
+* **Default value**: `"auto"`
+* **Required**: *No*
+
+#### Description
+
+Changes the theme of [pages](/configuration/pages). Set to `"light"`, if you want to force pages to always be light. Set to `"dark"`, if you want to force pages to always be dark. Set to `"auto"`, (or leave this option out) if you want the pages to follow the preferred system theme. (Uses the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query.)
+
+---
+
 ## Advanced Options
 
 Advanced options are passed the same way as basic options, but may have complex implications or side effects. You should try to avoid using advanced options unless you are very comfortable using them.