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