8c57553ada
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
176 lines
2.4 KiB
CSS
176 lines
2.4 KiB
CSS
html {
|
|
font-family: 'Roboto', sans-serif;
|
|
background: #FEFAE0;
|
|
padding: 1rem;
|
|
}
|
|
|
|
body {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Roboto', sans-serif;
|
|
color: #377ba8;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
a {
|
|
color: #377ba8;
|
|
text-decoration: none;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid #E0E5B6;
|
|
}
|
|
|
|
nav {
|
|
background: #CCD5AE;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
nav h1 {
|
|
flex: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
nav h1 a {
|
|
text-decoration: none;
|
|
padding: 0.25rem 0.5rem;
|
|
color: #377ba8;
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav ul li a, nav ul li span, header .action {
|
|
display: block;
|
|
padding: 0.5rem;
|
|
color: #377ba8;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 1rem 1rem;
|
|
}
|
|
|
|
.content > header {
|
|
border-bottom: 1px solid #E0E5B6;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.content > header h1 {
|
|
flex: auto;
|
|
margin: 1rem 0 0.25rem 0;
|
|
}
|
|
|
|
.flash {
|
|
margin: 1em 0;
|
|
padding: 1em;
|
|
background: #FAEDCE;
|
|
border: 1px solid #377ba8;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.post > header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.post > header > div:first-of-type {
|
|
flex: auto;
|
|
}
|
|
|
|
.post > header h1 {
|
|
font-size: 1.5em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post .about {
|
|
color: slategray;
|
|
font-style: italic;
|
|
}
|
|
|
|
.post .body {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.content:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.content form {
|
|
margin: 1em 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content label {
|
|
font-weight: bold;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.content input, .content textarea {
|
|
margin-bottom: 1em;
|
|
padding: 0.5em;
|
|
border: 1px solid #E0E5B6;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.content textarea {
|
|
min-height: 12em;
|
|
resize: vertical;
|
|
}
|
|
|
|
input.danger {
|
|
color: #cc2f2e;
|
|
}
|
|
|
|
input[type=submit] {
|
|
align-self: start;
|
|
min-width: 10em;
|
|
background-color: #377ba8;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
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;
|
|
}
|