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
This commit is contained in:
Neo 2024-09-05 23:24:01 +00:00 committed by Jose Palazon
parent 206f4f4d72
commit 8c57553ada
3 changed files with 59 additions and 1 deletions

View file

@ -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;
}