maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Night/Dark mode (#1104)

Browse source 
* ✨ implement night theme through css filters

* 🐛 and video

* ♻️ simplify selector
This commit is contained in:
Richard Kichenama 2018-12-04 13:23:25 -05:00 • committed by Ben Halpern
parent 39fc832801
commit 7d79b29b6c
1 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/assets/stylesheets/variables.scss
View file

@ -31,3 +31,34 @@ $shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
$light-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
$dark-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);
$bold-shadow: 3px 3px 0px darken($light-medium-gray, 13%);
body {
&.night-theme {
background-color: black !important;
&,
& .highlight,
& iframe,
& video {
-webkit-filter: invert(100%);
filter: invert(100%);
}
& * {
background-blend-mode: difference;
}
img,
.image.image {
-webkit-transition: -webkit-filter 0.5s ease-in, filter 0.5s ease-in;
-webkit-filter: invert(100%) grayscale(100%);
transition: -webkit-filter 0.5s ease-in, filter 0.5s ease-in;
filter: invert(100%) grayscale(100%);
&:hover {
-webkit-filter: invert(100%) grayscale(0%);
filter: invert(100%) grayscale(0%);
}
}
}
}