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;
}
@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