From 8c57553ada0cccbd0057a7e697b6978414fae2d2 Mon Sep 17 00:00:00 2001 From: Neo Date: Thu, 5 Sep 2024 23:24:01 +0000 Subject: [PATCH] Add dark mode support Implemented dark mode across all pages, allowing users to toggle between light and dark themes. The default theme is determined by the operating system or browser settings. A toggle button in the navigation bar enables users to switch themes, using sun and moon icons from Font Awesome. User preferences are stored in cookies and local storage to ensure consistency across sessions and pages. The changes include: - Added a before_request function to load theme preference from cookies or set a default based on user agent. - Updated CSS to support dark mode styling. - Modified base.html to include a theme toggle button and corresponding JavaScript for theme switching. Fixes #FLAS-2 --- flaskr/__init__.py | 10 +++++++++- flaskr/static/style.css | 22 ++++++++++++++++++++++ flaskr/templates/base.html | 28 ++++++++++++++++++++++++++++ 3 files changed, 59 insertions(+), 1 deletion(-) diff --git a/flaskr/__init__.py b/flaskr/__init__.py index 4bf718b0..b92e3fe4 100644 --- a/flaskr/__init__.py +++ b/flaskr/__init__.py @@ -1,6 +1,6 @@ import os -from flask import Flask +from flask import Flask, request, g def create_app(test_config=None): @@ -31,6 +31,14 @@ def create_app(test_config=None): def hello(): return "Hello, World!" + @app.before_request + def load_theme_preference(): + theme = request.cookies.get('theme') + if theme: + g.theme = theme + else: + g.theme = 'dark' if request.user_agent.platform in ['android', 'iphone'] and request.user_agent.browser in ['chrome', 'safari'] and request.user_agent.string.find('DarkMode') != -1 else 'light' + # register the database commands from . import db diff --git a/flaskr/static/style.css b/flaskr/static/style.css index 1c888fe8..40bf852d 100644 --- a/flaskr/static/style.css +++ b/flaskr/static/style.css @@ -152,3 +152,25 @@ input[type=submit] { input[type=submit]:hover { background-color: #2c5f8a; } + +body.dark-mode { + background: #121212; + color: #e0e0e0; +} + +body.dark-mode a { + color: #bb86fc; +} + +body.dark-mode nav { + background: #333; +} + +body.dark-mode .flash { + background: #333; + border-color: #bb86fc; +} + +body.dark-mode .post .about { + color: #999; +} diff --git a/flaskr/templates/base.html b/flaskr/templates/base.html index f09e9268..feff0fb3 100644 --- a/flaskr/templates/base.html +++ b/flaskr/templates/base.html @@ -1,9 +1,15 @@ {% block title %}{% endblock %} - Flaskr +