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/scss/_header.scss
+2 -2
View File
@@ -1,5 +1,5 @@
.header {
background: #fafafa;
background: $light-navbar;
display: flex;
align-items: center;
justify-content: center;
@@ -7,7 +7,7 @@
padding: 20px;
.dark-theme & {
background: #242626;
background: $dark-navbar;
}
&__right {
themes/maik-blog/assets/scss/_logo.scss
+2 -2
View File
@@ -22,13 +22,13 @@
display: inline-block;
width: 10px;
height: 1rem;
background: #252627;
background: $light-color;
margin-left: 2px;
border-radius: 1px;
animation: cursor 1s infinite;
.dark-theme & {
background: #fafafa;
background: $dark-color;
}
}
themes/maik-blog/assets/scss/_main.scss
+8 -8
View File
@@ -2,14 +2,14 @@
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: #212020;
background: $scrollbar-background;
}
::-webkit-scrollbar-thumb {
background: #888;
&:hover {
background: #dcdcdc;
background: $scrollbar-color;
}
}
@@ -141,7 +141,7 @@ figure {
padding: 5px;
.dark-theme & {
background-color: #ffffff4f;
background-color: $dark-image-border;
}
}
@@ -243,11 +243,11 @@ figure {
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #212020ec;
background-color: transparentize(darken($dark-background, 5%), 0.08);
z-index: 10000;
figcaption {
color: #ddd3c6;
color: $dark-color;
font-size: 1.5rem;
}
@@ -257,7 +257,7 @@ figure {
text-decoration: underline;
cursor: pointer;
display: block;
color: #999288;
color: transparentize($dark-color, 0.43);
}
}
}
@@ -417,12 +417,12 @@ svg {
}
.screen-reader-text:focus {
background-color: #f1f1f1;
background-color: $screen-reader-text-background;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
color: $screen-reader-text-color;
display: block;
font-size: 14px;
font-size: 0.875rem;
themes/maik-blog/assets/scss/_menu.scss
+2 -2
View File
@@ -1,11 +1,11 @@
.menu {
background: #fafafa;
background: $light-navbar;
border-right: 1px solid;
margin-right: 18px;
z-index: 9999;
.dark-theme & {
background: #252627;
background: $dark-navbar;
}
@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-secondary: #767676;
$light-border-color: #dcdcdc;
$light-navbar: #f9f9f9;
/* dark theme colors */
$dark-background: #272a2b;
$dark-background: #1c1f1f;
$dark-background-secondary: #3b3d42;
$dark-color: #ddd3c6;
$dark-color: #eee9e2;
$dark-color-secondary: #73747b;
$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-min: "(min-width: 684px)";