maik/Personal-Website
1
0
Fork 0
mirror of https://github.com/maikka39/Personal-Website.git synced 2026-10-02 14:46:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Increase dark mode contrast

Browse Source
This commit is contained in:
maik
2024-11-25 16:37:09 +01:00
parent 49aeb6e4af
commit 54cb434cd3
6 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/maik-blog/assets/js/theme.js
+4 -4
View File
@@ -8,8 +8,8 @@ var metaThemeColor = document.querySelector("meta[name=theme-color]");
if (theme !== null) { if (theme !== null) {
document.body.classList.toggle("dark-theme", isDark); document.body.classList.toggle("dark-theme", isDark);
isDark isDark
? metaThemeColor.setAttribute("content", "#252627") ? metaThemeColor.setAttribute("content", "#1b1c1c")
: metaThemeColor.setAttribute("content", "#fafafa"); : metaThemeColor.setAttribute("content", "#f9f9f9");
} }
themeToggle.addEventListener("click", () => { themeToggle.addEventListener("click", () => {
@@ -20,6 +20,6 @@ themeToggle.addEventListener("click", () => {
document.body.classList.contains("dark-theme") ? "dark" : "light" document.body.classList.contains("dark-theme") ? "dark" : "light"
); );
document.body.classList.contains("dark-theme") document.body.classList.contains("dark-theme")
? metaThemeColor.setAttribute("content", "#252627") ? metaThemeColor.setAttribute("content", "#1b1c1c")
: metaThemeColor.setAttribute("content", "#fafafa"); : metaThemeColor.setAttribute("content", "#f9f9f9");
}); });
themes/maik-blog/assets/scss/_header.scss
+2 -2
View File
@@ -1,5 +1,5 @@
.header { .header {
background: #fafafa; background: $light-navbar;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -7,7 +7,7 @@
padding: 20px; padding: 20px;
.dark-theme & { .dark-theme & {
background: #242626; background: $dark-navbar;
} }
&__right { &__right {
themes/maik-blog/assets/scss/_logo.scss
+2 -2
View File
@@ -22,13 +22,13 @@
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 1rem; height: 1rem;
background: #252627; background: $light-color;
margin-left: 2px; margin-left: 2px;
border-radius: 1px; border-radius: 1px;
animation: cursor 1s infinite; animation: cursor 1s infinite;
.dark-theme & { .dark-theme & {
background: #fafafa; background: $dark-color;
} }
} }
themes/maik-blog/assets/scss/_main.scss
+8 -8
View File
@@ -2,14 +2,14 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #212020; background: $scrollbar-background;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #888; background: #888;
&:hover { &:hover {
background: #dcdcdc; background: $scrollbar-color;
} }
} }
@@ -141,7 +141,7 @@ figure {
padding: 5px; padding: 5px;
.dark-theme & { .dark-theme & {
background-color: #ffffff4f; background-color: $dark-image-border;
} }
} }
@@ -243,11 +243,11 @@ figure {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
background-color: #212020ec; background-color: transparentize(darken($dark-background, 5%), 0.08);
z-index: 10000; z-index: 10000;
figcaption { figcaption {
color: #ddd3c6; color: $dark-color;
font-size: 1.5rem; font-size: 1.5rem;
} }
@@ -257,7 +257,7 @@ figure {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
display: block; display: block;
color: #999288; color: transparentize($dark-color, 0.43);
} }
} }
} }
@@ -417,12 +417,12 @@ svg {
} }
.screen-reader-text:focus { .screen-reader-text:focus {
background-color: #f1f1f1; background-color: $screen-reader-text-background;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important; clip: auto !important;
clip-path: none; clip-path: none;
color: #21759b; color: $screen-reader-text-color;
display: block; display: block;
font-size: 14px; font-size: 14px;
font-size: 0.875rem; font-size: 0.875rem;
themes/maik-blog/assets/scss/_menu.scss
+2 -2
View File
@@ -1,11 +1,11 @@
.menu { .menu {
background: #fafafa; background: $light-navbar;
border-right: 1px solid; border-right: 1px solid;
margin-right: 18px; margin-right: 18px;
z-index: 9999; z-index: 9999;
.dark-theme & { .dark-theme & {
background: #252627; background: $dark-navbar;
} }
@media #{$media-size-phone} { @media #{$media-size-phone} {
themes/maik-blog/assets/scss/_variables.scss
+11 -2
View File
@@ -6,13 +6,22 @@ $light-background-secondary: #eaeaea;
$light-color: #222; $light-color: #222;
$light-color-secondary: #767676; $light-color-secondary: #767676;
$light-border-color: #dcdcdc; $light-border-color: #dcdcdc;
$light-navbar: #f9f9f9;
/* dark theme colors */ /* dark theme colors */
$dark-background: #272a2b; $dark-background: #1c1f1f;
$dark-background-secondary: #3b3d42; $dark-background-secondary: #3b3d42;
$dark-color: #ddd3c6; $dark-color: #eee9e2;
$dark-color-secondary: #73747b; $dark-color-secondary: #73747b;
$dark-border-color: #4a4b50; $dark-border-color: #4a4b50;
$dark-navbar: #1b1c1c;
$dark-image-border: #ffffff3f;
$scrollbar-background: #212020;
$scrollbar-color: #dcdcdc;
$screen-reader-text-background: #f1f1f1;
$screen-reader-text-color: #21759b;
$media-size-phone: "(max-width: 684px)"; $media-size-phone: "(max-width: 684px)";
$media-size-phone-min: "(min-width: 684px)"; $media-size-phone-min: "(min-width: 684px)";