alexohneander/sim_free
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat(frontend): add default Dark Theme

Browse Source
This commit is contained in:
Alex Wellnitz 2024-09-21 09:52:43 +02:00
parent e9ae53d5a5
commit 9e78610488
2 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/app/globals.css
View File

@ -1,42 +1,47 @@
:root { /* :root {
--background: #ffffff; --background: #ffffff;
--foreground: #171717; --foreground: #171717;
} } */
@media (prefers-color-scheme: dark) { /* @media (prefers-color-scheme: dark) {
:root { :root {
--background: #0a0a0a; --background: #0a0a0a;
--foreground: #ededed; --foreground: #ededed;
} }
} */
:root {
--background: #0a0a0a;
--foreground: #ededed;
} }
html, html,
body { body {
max-width: 100vw; max-width: 100vw;
overflow-x: hidden; overflow-x: hidden;
} }
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
@media (prefers-color-scheme: dark) { /* @media (prefers-color-scheme: dark) { */
html { html {
color-scheme: dark; color-scheme: dark;
}
} }
/* } */

16
frontend/src/app/page.module.css
View File

@ -16,16 +16,16 @@
font-family: var(--font-geist-sans); font-family: var(--font-geist-sans);
} }
@media (prefers-color-scheme: dark) { /* @media (prefers-color-scheme: dark) { */
.page { .page {
--gray-rgb: 255, 255, 255; --gray-rgb: 255, 255, 255;
--gray-alpha-200: rgba(var(--gray-rgb), 0.145); --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
--gray-alpha-100: rgba(var(--gray-rgb), 0.06); --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
--button-primary-hover: #ccc; --button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a; --button-secondary-hover: #1a1a1a;
}
} }
/* } */
.main { .main {
display: flex; display: flex;