NowChess/NowChess-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added dark and light mode

Browse Source
This commit is contained in:
shahdlala66
2026-04-22 08:19:16 +02:00
parent 91fa247696
commit c18026bce6
6 changed files with 319 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+46 -2
View File
@@ -5,13 +5,57 @@
box-sizing: border-box;
}
/* Light Mode (Default) */
html:not([data-theme='dark']),
html:not([data-theme='dark']) body {
background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
color: var(--color-text-primary);
}
html:not([data-theme='dark']) body::before {
display: none;
}
/* Dark Mode */
html[data-theme='dark'],
html[data-theme='dark'] body {
background: #0f1f2e;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
radial-gradient(2px 2px at 60px 70px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
radial-gradient(1px 1px at 50px 50px, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
radial-gradient(2px 2px at 90px 10px, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
radial-gradient(1px 1px at 130px 120px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
radial-gradient(2px 2px at 10px 90px, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
radial-gradient(1px 1px at 40px 120px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
background-repeat: repeat;
background-size: 150px 150px;
background-attachment: fixed;
color: var(--color-text-primary);
}
html[data-theme='dark'] body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(45, 90, 123, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(90, 111, 165, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(29, 53, 82, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
html,
body {
margin: 0;
min-height: 100%;
font-family: "Comic Sans MS", "Comic Sans", cursive;
background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
color: var(--color-text-primary);
position: relative;
}
button,