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(`