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

💄 change colorpalette of darkmode

Browse source 
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
Sid 2024-08-23 10:33:04 +02:00
parent 2be581e547
commit 2e5b785932
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
9 changed files with 48 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/ThemeIcon.astro
View file

@ -13,7 +13,7 @@
background: none;
}
.sun { fill: transparent; }
.moon { fill: #9AD3BB; }
.moon { fill: #cdd6f4; }
:global(.dark) .sun { fill: #3B2C29; }

28
src/styles/global.css
View file

@ -5,12 +5,12 @@
--light-3: #A48B82; /* Cappuccino Accents */
--light-hover: #A48B82; /* Cappuccino Accents (for hover states) */
--light-link: #B08968; /* Caramel Macchiato Links */
--dark-bg: #0F1A1C; /* Deep Ocean Background */
--dark-1: #9AD3BB; /* Mint Foam Text */
--dark-2: #3A6F7F; /* Coral Reef Accent */
--dark-3: #2B4F60; /* Seaweed Highlight */
--dark-hover: #1A333F; /* Lagoon Hover */
--dark-link: #7FCDCD; /* Aquamarine Links */
--dark-bg: #1e1e2e; /* Midnight Navy */
--dark-1: #cdd6f4; /* Lavender Mist */
--dark-2: #8f5cf4; /* Amethyst Glow */
--dark-3: #6f7aaa; /* Soft Sand */
--dark-hover: #b4c0f4; /* Periwinkle Glow */
--dark-link: #89b4fa; /* Sky Blue */
}
html {
@ -25,6 +25,7 @@ html.dark {
body {
font-family: Verdana, sans-serif;
/*"Noto Sans Mono", monospace*/
}
p {
@ -236,22 +237,29 @@ pre {
}
blockquote {
background-color: #11111b;
padding: 0 0 0 10px;
border-left: 5px solid var(--dark-1);
border-left: 5px solid var(--dark-link);
}
.dark blockquote {
background-color: #E6D5C8;
padding: 0 0 0 10px;
border-left: 5px solid var(--light-1);
border-left: 5px solid var(--light-link);
}
blockquote p {
font-size: medium;
line-height: 32px;
}
::selection{
background-color: var(--dark-1);
background-color: var(--dark-1);
color: var(--dark-bg);
}
.dark ::selection{
background-color: var(--light-1);
background-color: var(--light-1);
color: var(--light-bg);
}