From 5922ef2241e4f22036058922d382fe8e37b2a18f Mon Sep 17 00:00:00 2001 From: SindreKjelsrud Date: Fri, 23 Aug 2024 13:40:00 +0200 Subject: [PATCH] :lipstick: new lightmode theme Signed-off-by: SindreKjelsrud --- README.md | 15 ++++---- public/jollyroger_light.svg | 2 +- public/socials/github_light.svg | 2 +- public/socials/grandlinewebring.light.svg | 2 +- public/socials/spotify_light.svg | 2 +- public/socials/xxiivvwebring_light.svg | 2 +- src/components/BlogHeader.astro | 2 +- src/components/ThemeIcon.astro | 2 +- src/styles/global.css | 43 ++++++++++++----------- 9 files changed, 39 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 6c46e4a..db94e7e 100644 --- a/README.md +++ b/README.md @@ -30,11 +30,13 @@ The webpage offers a variety of features including a blog, bookmarks, ways to re | Color | Hex | |-|-| -| Coffee Cream | ![#F7F0E8](https://via.placeholder.com/10/F7F0E8?text=+) `#F7F0E8` | -| Espresso Text | ![#3B2C29](https://via.placeholder.com/10/3B2C29?text=+) `#3B2C29` | -| Latte Secondary Text | ![#78605C](https://via.placeholder.com/10/78605C?text=+) `#78605C` | -| Cappuccino Accents | ![#A48B82](https://via.placeholder.com/10/A48B82?text=+) `#A48B82` | -| Caramel Macchiato | ![#B08968](https://via.placeholder.com/10/B08968?text=+) `#B08968` | +| Soft Pastel Green Background | ![#E6F5E5](https://via.placeholder.com/10/E6F5E5?text=+) `#E6F5E5` | +| Dark Olive Green Text | ![#2E4033](https://via.placeholder.com/10/2E4033?text=+) `#2E4033` | +| Sage Green Secondary Text | ![#5F7A6D](https://via.placeholder.com/10/5F7A6D?text=+) `#5F7A6D` | +| Mint Green Accents | ![#88A597](https://via.placeholder.com/10/88A597?text=+) `#88A597` | +| Mint Green Accents (for hover states) | ![#88A597](https://via.placeholder.com/10/88A597?text=+) `#88A597` | +| Darker Moss Green Links | ![#3B6656](https://via.placeholder.com/10/3B6656?text=+) `#3B6656` | +| Light Mint Blockquote | ![#CCE3CC](https://via.placeholder.com/10/CCE3CC?text=+) `#CCE3CC` | ### Dark mode @@ -43,9 +45,10 @@ The webpage offers a variety of features including a blog, bookmarks, ways to re | Midnight Navy | ![#1e1e2e](https://via.placeholder.com/10/1e1e2e?text=+) `#1e1e2e` | | Lavender Mist | ![#cdd6f4](https://via.placeholder.com/10/cdd6f4?text=+) `#cdd6f4` | | Amethyst Glow | ![#8f5cf4](https://via.placeholder.com/10/8f5cf4?text=+) `#8f5cf4` | -| Soft Sand | ![#f4e8cd](https://via.placeholder.com/10/f4e8cd?text=+) `#f4e8cd` | +| Dusty Lavender | ![#6f7aaa](https://via.placeholder.com/10/6f7aaa?text=+) `#6f7aaa` | | Periwinkle Glow | ![#b4c0f4](https://via.placeholder.com/10/b4c0f4?text=+) `#b4c0f4` | | Sky Blue | ![#89b4fa](https://via.placeholder.com/10/89b4fa?text=+) `#89b4fa` | +| Charcoal Abyss | ![#11111b](https://via.placeholder.com/10/11111b?text=+) `#11111b` | ## 📜 Versionlog diff --git a/public/jollyroger_light.svg b/public/jollyroger_light.svg index 409368c..7d266c9 100644 --- a/public/jollyroger_light.svg +++ b/public/jollyroger_light.svg @@ -4,6 +4,6 @@ - + diff --git a/public/socials/github_light.svg b/public/socials/github_light.svg index b62718f..7521394 100644 --- a/public/socials/github_light.svg +++ b/public/socials/github_light.svg @@ -1,5 +1,5 @@ - + \ No newline at end of file diff --git a/public/socials/grandlinewebring.light.svg b/public/socials/grandlinewebring.light.svg index c3e34ee..6c0e8db 100644 --- a/public/socials/grandlinewebring.light.svg +++ b/public/socials/grandlinewebring.light.svg @@ -4,6 +4,6 @@ - + diff --git a/public/socials/spotify_light.svg b/public/socials/spotify_light.svg index 041dc77..b30c5c0 100644 --- a/public/socials/spotify_light.svg +++ b/public/socials/spotify_light.svg @@ -8,7 +8,7 @@ - + diff --git a/public/socials/xxiivvwebring_light.svg b/public/socials/xxiivvwebring_light.svg index e7fa904..adfe494 100644 --- a/public/socials/xxiivvwebring_light.svg +++ b/public/socials/xxiivvwebring_light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/BlogHeader.astro b/src/components/BlogHeader.astro index 2b39cb4..02af413 100644 --- a/src/components/BlogHeader.astro +++ b/src/components/BlogHeader.astro @@ -6,7 +6,7 @@ import ThemeIcon from './ThemeIcon.astro'; const isDark = document.documentElement.classList.contains('dark'); const svgPath = document.getElementById('themePath'); if (svgPath) { - svgPath.setAttribute('stroke', isDark ? '#cdd6f4' : '#3B2C29'); + svgPath.setAttribute('stroke', isDark ? '#cdd6f4' : '#2E4033'); } }; diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro index 622243d..7d4dc71 100644 --- a/src/components/ThemeIcon.astro +++ b/src/components/ThemeIcon.astro @@ -12,7 +12,7 @@ border: 0; background: none; } - .sun { fill: #3B2C29; } + .sun { fill: #2E4033; } .moon { fill: transparent; } diff --git a/src/styles/global.css b/src/styles/global.css index 86010be..49c8b77 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,16 +1,21 @@ :root { - --light-bg: #F7F0E8; /* Coffee Cream Background */ - --light-1: #3B2C29; /* Espresso Text */ - --light-2: #78605C; /* Latte Secondary Text */ - --light-3: #A48B82; /* Cappuccino Accents */ - --light-hover: #A48B82; /* Cappuccino Accents (for hover states) */ - --light-link: #B08968; /* Caramel Macchiato 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 */ + --light-bg: #E6F5E5; /* Soft Pastel Green Background */ + --light-1: #2E4033; /* Dark Olive Green Text */ + --light-2: #5F7A6D; /* Sage Green Secondary Text */ + --light-3: #88A597; /* Mint Green Accents */ + --light-hover: #88A597; /* Mint Green Accents (for hover states) */ + --light-link: #3B6656; /* Darker Moss Green Links */ + --light-blockquote: #CCE3CC; /* Light Mint Blockquote */ + --dark-bg: #1e1e2e; /* Midnight Navy */ + --dark-1: #cdd6f4; /* Lavender Mist */ + --dark-2: #8f5cf4; /* Amethyst Glow */ + --dark-3: #6f7aaa; /* Dusty Lavender */ + --dark-hover: #b4c0f4; /* Periwinkle Glow */ + --dark-link: #89b4fa; /* Sky Blue */ + --dark-blockquote: #11111b; /* Charcoal Abyss */ + /* MISC */ + --code-bg: #24292E; + --code-text: #A5A8AD; } html { @@ -25,7 +30,6 @@ html.dark { body { font-family: Jetbrains Mono, monospace; - /*"Noto Sans Mono", monospace*/ } p { @@ -219,8 +223,8 @@ h2, h3, h4 { /* RANDOM */ code { display: inline; - background-color: #24292E; - color: #A5A8AD; + background-color: var(--code-bg); + color: var(--code-text); border-radius: 8px; padding: 4px 8px; font-size: small; @@ -228,21 +232,20 @@ code { pre { padding: 10px; - background-color: #24292E; - color: #A5A8AD; + background-color: var(--code-bg); + color: var(--code-text); border-radius: 10px; margin: 10px 0; } blockquote { - background-color: #E6D5C8; + background-color: var(--light-blockquote); padding: 0 0 0 10px; border-left: 5px solid var(--light-link); } .dark blockquote { - background-color: #11111b; - padding: 0 0 0 10px; + background-color: var(--dark-blockquote); border-left: 5px solid var(--dark-link); }