Skip to content

Commit

Permalink
Add Mojave dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@HackingGate
HackingGate committed Mar 31, 2019
1 parent 4e106fd commit 404934e
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 1 deletion.
5 changes: 5 additions & 0 deletions _config.yml
View file
Expand Up @@ -14,6 +14,8 @@ minima:
date_format: "%b %-d, %Y"
# Change to "dark" to use dark minima skin
skin: light
# Change to "enable" to use Mojave dark mode
mojave-dark-mode: enable

# generate social links in footer
social_links:
Expand All @@ -39,6 +41,9 @@ minima:
# instance: example.com
# - username: jekyll2
# instance: example.com
gitlab:
- username: jekyll
instance: gitlab.com

# If you want to link only specific pages in your header, uncomment
# this and add the path to the pages in order as they should show up
Expand Down
6 changes: 6 additions & 0 deletions _sass/minima.scss
View file
Expand Up @@ -28,6 +28,12 @@ $dark-skin-code-background: #032f62;
$text-color: $dark-skin-light-text;
$background-color: $dark-skin-background;
}
@media (prefers-color-scheme: dark) {
@if ($mojave-dark-mode) {
$text-color: $dark-skin-light-text;
$background-color: $dark-skin-background;
}
}

// Width of the content area
$content-width: 800px !default;
Expand Down
89 changes: 88 additions & 1 deletion _sass/minima/_base.scss
View file
Expand Up @@ -28,7 +28,22 @@ body {
min-height: 100vh;
flex-direction: column;
}

@media (prefers-color-scheme: dark) {
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
color: $dark-skin-light-text;
background-color: $dark-skin-background;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
-o-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
font-kerning: normal;
display: flex;
min-height: 100vh;
flex-direction: column;
}
}


/**
Expand Down Expand Up @@ -124,6 +139,29 @@ a {
}
}
}
@media (prefers-color-scheme: dark) {
a {
color: $brand-color;
text-decoration: none;

&:visited {
color: darken($brand-color, 15%);
}

&:hover {
color: $dark-skin-light-text;
text-decoration: underline;
}

.social-media-list &:hover {
text-decoration: none;

.username {
text-decoration: underline;
}
}
}
}


/**
Expand All @@ -141,6 +179,20 @@ blockquote {
margin-bottom: 0;
}
}
@media (prefers-color-scheme: dark) {
blockquote {
color: if($mojave-dark-mode, #79b8ff, $grey-color);
border-left: 4px solid $grey-color-light;
padding-left: $spacing-unit / 2;
@include relative-font-size(1.125);
letter-spacing: -1px;
font-style: italic;

> :last-child {
margin-bottom: 0;
}
}
}



Expand All @@ -154,6 +206,15 @@ code {
border-radius: 3px;
background-color: if($enable-dark-skin, #032f62, #eef);
}
@media (prefers-color-scheme: dark) {
pre,
code {
@include relative-font-size(0.9375);
border: 1px solid if($mojave-dark-mode, #032f62, #e8e8e8);
border-radius: 3px;
background-color: if($mojave-dark-mode, #032f62, #eef);
}
}

code {
padding: 1px 5px;
Expand Down Expand Up @@ -254,3 +315,29 @@ table {
border: 1px solid if($enable-dark-skin, $dark-skin-code-background, $grey-color-light);
}
}
@media (prefers-color-scheme: dark) {
table {
margin-bottom: $spacing-unit;
width: 100%;
text-align: $table-text-align;
color: if($mojave-dark-mode, $dark-skin-light-text, lighten($text-color, 18%));
border-collapse: collapse;
border: 1px solid if($mojave-dark-mode, $dark-skin-code-background, $grey-color-light);
tr {
&:nth-child(even) {
background-color: if($mojave-dark-mode, $dark-skin-code-background, lighten($grey-color-light, 6%));
}
}
th, td {
padding: ($spacing-unit / 3) ($spacing-unit / 2);
}
th {
background-color: if($mojave-dark-mode, $dark-skin-code-background, lighten($grey-color-light, 3%));
border: 1px solid if($mojave-dark-mode, $dark-skin-code-background, darken($grey-color-light, 4%));
border-bottom-color: if($mojave-dark-mode, $dark-skin-code-background, darken($grey-color-light, 12%));
}
td {
border: 1px solid if($mojave-dark-mode, $dark-skin-code-background, $grey-color-light);
}
}
}
95 changes: 95 additions & 0 deletions _sass/minima/_layout.scss
View file
Expand Up @@ -15,6 +15,22 @@
border-bottom: unset;
}
}
@media (prefers-color-scheme: dark) {
.site-header {
border-top: 5px solid $grey-color-dark;
border-bottom: 1px solid $grey-color-light;
min-height: $spacing-unit * 1.865;
line-height: $base-line-height * $base-font-size * 2.25;

// Positioning context for the mobile navigation icon
position: relative;

@if ($mojave-dark-mode) {
background-color: #24292e;
border-bottom: unset;
}
}
}

.site-title {
@include relative-font-size(1.625);
Expand All @@ -32,12 +48,33 @@
color: if($enable-dark-skin, $dark-skin-light-text, $grey-color-dark);
}
}
@media (prefers-color-scheme: dark) {
.site-title {
@include relative-font-size(1.625);
font-weight: 300;
letter-spacing: -1px;
margin-bottom: 0;
float: left;

@include media-query($on-palm) {
padding-right: 45px;
}

&,
&:visited {
color: if($mojave-dark-mode, $dark-skin-light-text, $grey-color-dark);
}
}
}

.site-nav {
position: absolute;
top: 9px;
right: $spacing-unit / 2;
background-color: $background-color;
@media (prefers-color-scheme: dark) {
background-color: $dark-skin-background;
}
border: 1px solid $grey-color-light;
border-radius: 5px;
text-align: right;
Expand Down Expand Up @@ -90,6 +127,20 @@
}
margin-left: 20px;
}
@media (prefers-color-scheme: dark) {
.page-link {
color: $dark-skin-light-text;
line-height: $base-line-height;
display: block;
padding: 5px 10px;

// Gaps between nav items, but not on the last one
&:not(:last-child) {
margin-right: 0;
}
margin-left: 20px;
}
}

@media screen and (min-width: $on-medium) {
position: static;
Expand Down Expand Up @@ -137,12 +188,32 @@
}
}
}
@media (prefers-color-scheme: dark) {
.site-footer {
border-top: 1px solid $grey-color-light;
padding: $spacing-unit 0;
@if ($mojave-dark-mode) {
background-color: $dark-skin-light-text;
border-top:unset;
a {
color: $dark-skin-dark-text;
}
}
}
}

.site-footer * {
@if ($enable-dark-skin) {
color: $dark-skin-dark-text
}
}
@media (prefers-color-scheme: dark) {
.site-footer * {
@if ($mojave-dark-mode) {
color: $dark-skin-dark-text
}
}
}

.footer-heading {
@include relative-font-size(1.125);
Expand Down Expand Up @@ -234,6 +305,12 @@
font-size: $small-font-size;
color: if($enable-dark-skin, #79b8ff, $grey-color);
}
@media (prefers-color-scheme: dark) {
.post-meta {
font-size: $small-font-size;
color: if($mojave-dark-mode, #79b8ff, $grey-color);
}
}

.post-link {
display: block;
Expand Down Expand Up @@ -305,6 +382,24 @@
&:hover .svg-icon { fill: currentColor; }
}
}
@media (prefers-color-scheme: dark) {
.social-media-list {
display: table;
margin: 0 auto;
li {
float: left;
margin: 0 5px;
&:first-of-type { margin-left: 0 }
&:last-of-type { margin-right: 0 }
a {
display: block;
padding: $spacing-unit / 4;
border: if($mojave-dark-mode, unset, 1px solid $grey-color-light);
}
&:hover .svg-icon { fill: currentColor; }
}
}
}


/**
Expand Down
8 changes: 8 additions & 0 deletions _sass/minima/_syntax-highlighting.scss
View file
Expand Up @@ -3,11 +3,19 @@
*/
.highlight {
background: if($enable-dark-skin, $dark-skin-code-background, #fff);
@media (prefers-color-scheme: dark) {
background: if($mojave-dark-mode, $dark-skin-code-background, #fff);
}
@extend %vertical-rhythm;

.highlighter-rouge & {
background: if($enable-dark-skin, $dark-skin-code-background, #fff);;
}
@media (prefers-color-scheme: dark) {
.highlighter-rouge & {
background: if($mojave-dark-mode, $dark-skin-code-background, #fff);;
}
}

.c { color: #998; font-style: italic } // Comment
.err { color: #a61717; background-color: #e3d2d2 } // Error
Expand Down
1 change: 1 addition & 0 deletions assets/css/style.scss
View file
Expand Up @@ -3,4 +3,5 @@
---

$enable-dark-skin: {{ site.minima.skin }} == 'dark';
$mojave-dark-mode: {{ site.minima.mojave-dark-mode }} == 'enable';
@import "minima";

0 comments on commit 404934e

Please sign in to comment.