nzambello/nzambello.dev
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: light theme colors, default to dark theme

Browse source
This commit is contained in:
Nicola Zambello 2023-07-16 18:48:04 +02:00
parent 4e1e19761d
commit 575591fe2e
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
1 changed files with 24 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/styles/global.css
View file

@ -3,14 +3,14 @@
[data-theme="light"],
:root[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #20a235;
--primary-hover: #1d8e2f;
--primary-focus: rgba(21, 32, 23, 0.25);
--primary: #0c6c3b;
--primary-hover: #107920;
--primary-focus: rgba(16, 121, 32, 0.25);
--primary-inverse: #ffffff;
--secondary: #fff;
--text-color: #222;
--background-color: #f6f1e7;
--accordion-border-color: rgba(32, 162, 53, 0.25);
--accordion-border-color: rgba(26, 33, 27, 0.25);
--bg-color: #f6f1e7;
--item-bg-color: #fff;
--item-bg-color-var: #eee;
@ -21,32 +21,29 @@
--neumorph-shadow-lighter-inset: #fff;
}
/* Amber Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
--secondary: #343434;
--background-color: #222;
--accordion-border-color: rgba(255, 179, 0, 0.25);
--bg-color: #222;
--item-bg-color: #343434;
--item-bg-color-var: #272727;
--text-color: #fff;
--box-shadow: 17.71597862px 17.71597862px 53.14793396px 0px rgba(0, 0, 0, 0.6);
--neumorph-shadow-darker: #000;
--neumorph-shadow-darker-inset: #000;
--neumorph-shadow-lighter: #555;
--neumorph-shadow-lighter-inset: #555;
}
:root:not([data-theme]) {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
--secondary: #343434;
--background-color: #222;
--accordion-border-color: rgba(255, 179, 0, 0.25);
--bg-color: #222;
--item-bg-color: #343434;
--item-bg-color-var: #272727;
--text-color: #fff;
--box-shadow: 17.71597862px 17.71597862px 53.14793396px 0px rgba(0, 0, 0, 0.6);
--neumorph-shadow-darker: #000;
--neumorph-shadow-darker-inset: #000;
--neumorph-shadow-lighter: #555;
--neumorph-shadow-lighter-inset: #555;
}
/* Amber Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"],
:root:not([data-theme]),
:root[data-theme="dark"] {
--primary: #ffb300;
--primary-hover: #ffc107;
@ -78,8 +75,8 @@
}
body {
font-family: 'Ubuntu', sans-serif;
font-display: swap;
font-family: 'Ubuntu', sans-serif;
}
::-moz-selection,
@ -102,10 +99,10 @@ samp {
}
.skip-link {
padding: 5px 10px;
position: absolute;
top: 0;
left: 0;
padding: 5px 10px;
transform: translateY(-100%);
transition: transform 0.3s;
}