From ca706be5d51fff19b1a75f02bb49ae8ecc3664c4 Mon Sep 17 00:00:00 2001 From: Shaun Collins Date: Sat, 12 Dec 2020 20:26:01 -0500 Subject: [PATCH] #51 update theme with url query parameter. Also fixed a nested comment alternating style issue --- app.js | 15 +++++++++++++++ dist/css/styles.css | 36 ++++++++++++++++++------------------ 2 files changed, 33 insertions(+), 18 deletions(-) diff --git a/app.js b/app.js index ef86f15..4e74f0a 100644 --- a/app.js +++ b/app.js @@ -93,6 +93,21 @@ if(config.use_compression) { app.use(cookieParser()) +const themeMiddleware = (req, res, next) => { + let themeOverride = req.query.theme + if( themeOverride) { + // Convert Dark to dark since the stylesheet has it lower case + themeOverride = themeOverride.toLowerCase(); + // This override here will set it for the current request + req.cookies.theme = themeOverride + // this will set it for future requests + res.cookie('theme', themeOverride, {maxAge: 31536000, httpOnly: true}) + } + next(); +} + +app.use(themeMiddleware) + if(config.use_view_cache) { app.set('view cache', true) } diff --git a/dist/css/styles.css b/dist/css/styles.css index 0233771..7eca346 100644 --- a/dist/css/styles.css +++ b/dist/css/styles.css @@ -146,29 +146,29 @@ body.dark .comment .comment .comment .comment .comment .comment .comment .commen background: var(--darkbg); } body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--darkbg); + background: var(--darkbglight); } body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--darkbglight); + background: var(--darkbg); } body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--darkbg); + background: var(--darkbglight); } body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--darkbglight); + background: var(--darkbg); } body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--darkbg); + background: var(--darkbglight); } body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--darkbglight); -} -body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { background: var(--darkbg); } -body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { +body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { background: var(--darkbglight); } +body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { + background: var(--darkbg); +} body.dark .comment .meta .created a { color: #7b7b7b; } @@ -715,29 +715,29 @@ input[type="submit"]:hover, background: var(--whitebg); } .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--whitebg); + background: var(--lightgray); } .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--lightgray); + background: var(--whitebg); } .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--whitebg); + background: var(--lightgray); } .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--lightgray); + background: var(--whitebg); } .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--whitebg); + background: var(--lightgray); } .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { - background: var(--lightgray); -} -.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { background: var(--whitebg); } -.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { +.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { background: var(--lightgray); } +.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { + background: var(--whitebg); +} /* POST */ #post .info { float: left;