From 40171081abcb0acb1b50be9391e59a14223b3ece Mon Sep 17 00:00:00 2001 From: Michael Nardolillo Date: Mon, 11 Jan 2021 21:56:48 +0100 Subject: [PATCH] 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 --- pages/api/auth/[...nextauth].js | 1 - src/css/index.css | 39 +++++++++++++++++++++++++++---- src/server/index.js | 1 + src/server/pages/index.js | 4 ++-- www/docs/configuration/options.md | 11 +++++++++ 5 files changed, 48 insertions(+), 8 deletions(-) diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js index e21d6ec003..45a28feb69 100644 --- 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 index a6c1b953ec..17f9e1a3f7 100644 --- 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 index 0d505b2c52..d358628451 100644 --- 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 index 200b8353b4..b804872c9c 100644 --- 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(`
${html}
`) + res.send(`
${html}
`) } return { diff --git a/www/docs/configuration/options.md b/www/docs/configuration/options.md index a712df66d2..b3c285bff1 100644 --- 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.