Skip to content

Instantly share code, notes, and snippets.

@0xRampey
Last active August 24, 2022 02:28
Show Gist options
  • Save 0xRampey/aac8f8436827ea09f53a67873142706c to your computer and use it in GitHub Desktop.
Save 0xRampey/aac8f8436827ea09f53a67873142706c to your computer and use it in GitHub Desktop.
Dark mode on fastpages blogs
$high-emph: rgba(white, 0.87);
$med-emph: rgba(white, 0.69); //Noicee
$low-emph: rgba(white, 0.38);
$dark-grey : #121212;
// $dark-grey : #1F1B24;
$overlay: mix($dark-grey, white, 95%);
$overlay-light: mix($dark-grey, white, 86%);
html, body, input, textarea, select, button {
color: $high-emph !important;
background-color: $dark-grey !important;
}
a {
color: rgb(75, 186, 255) !important;
}
a:hover {
color:$high-emph !important;
}
.site-title, .site-title:visited, .site-nav, .page-link {
color: $high-emph !important;
}
.site-nav {
background-color: $dark-grey;
border-color: $overlay-light;
}
* {
scrollbar-color: $dark-grey $overlay-light;
}
pre, code {
// BVas a lighter colour to better highlight short code words
border-color: $overlay-light;
background-color: $overlay;
}
.page-description {
color: $med-emph;
}
.post-meta {
color: $low-emph;
}
.post-content p, .post-content li {
color: $med-emph;
}
.btn {
background-color: $overlay !important;
color: $high-emph !important;
border-color: $overlay-light !important;
}
.btn:hover {
background-color: $dark-grey !important;
}
table th{
background-color: $overlay;
border-color: $overlay-light;
color: $high-emph;
}
table td{
background-color: $dark-grey;
border-color: $overlay-light;
color: $med-emph;
}
.flash {
color: $dark-grey !important;
filter: brightness(80%);
}
canvas {
filter: invert(100%);
}
.post-list > li > div {
box-shadow: none !important;
background-color: $overlay;
border: none !important;
}
li .post-meta-description {
color: $med-emph !important;
}
@0xRampey
Copy link
Author

Thanks to @ashudva for fixing inconsistencies in blog post vignettes

@ParkJeongUng
Copy link

When I see the chart or plot labels. All the numbers is Black. So it is difficult to see the correct number on the chart or plot. How can I change the number's color?

@ashudva
Copy link

ashudva commented Jan 7, 2022

One easy workaround is to set a "facecolor" to the plot especially if your plots are generated using matplotlib or other python libraries. Other option is to use a different theme for your plots.

@vunsh
Copy link

vunsh commented Aug 24, 2022

This is really cool! Any idea how being able to toggle the dark mode would be able to be implemented

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment