13hannes11/hugo-coder-timeline
1
0
Fork 0
mirror of https://github.com/13hannes11/hugo-coder-timeline.git synced 2024-09-04 00:50:58 +02:00
Code Issues Projects Releases Wiki Activity

Automatic dark/light colorschemes (#234)

Browse Source 
* Automatic dark/light colorschemes

A new `colorscheme` option is added with the capability to be always dark,
always light, or automatic based on the user's browser setting.  This
makes the `inverted` option superfluous, and therefore deprecated.
Nomenclature of files, variables, etc are changed from `inverted` to
`dark` to reflect this change.

Closes #226.

* Remove inverted option completely

The `inverted` option is now not just deprecated, but removed
completely.
This commit is contained in:
John Schroeder
2019-11-21 07:13:49 -06:00
committed by Luiz F. A. de Prá
parent f6caaf0493
commit b00b75064d
14 changed files with 167 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
assets/scss/_base_dark.scss Normal file
View File

@@ -0,0 +1,49 @@
@mixin base_dark {
color: $fg-color-dark;
background-color: $bg-color-dark;
a {
color: $link-color-dark;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $alt-fg-color-dark;
}
code {
background-color: $alt-bg-color-dark;
color: $fg-color-dark;
}
pre {
code {
background-color: inherit;
color: inherit;
}
}
blockquote {
border-left: 2px solid $alt-bg-color-dark;
}
table td, table th {
border: 2px solid $alt-fg-color-dark;
}
}
body.colorscheme-dark {
@include base_dark()
}
body.colorscheme-auto {
@media (prefers-color-scheme: dark) {
@include base_dark()
}
}

39
assets/scss/_base_inverted.scss
View File

@@ -1,39 +0,0 @@
body.inverted {
color: $fg-color-inverted;
background-color: $bg-color-inverted;
a {
color: $link-color-inverted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $alt-fg-color-inverted;
}
code {
background-color: $alt-bg-color-inverted;
color: $fg-color-inverted;
}
pre {
code {
background-color: inherit;
color: inherit;
}
}
blockquote {
border-left: 2px solid $alt-bg-color-inverted;
}
table td, table th {
border: 2px solid $alt-fg-color-inverted;
}
}

20
assets/scss/_content_inverted.scss → assets/scss/_content_dark.scss
View File

@@ -1,4 +1,4 @@
body.inverted {
@mixin content_dark {
.content {
@@ -6,10 +6,10 @@ body.inverted {
ul {
li {
.title {
color: $fg-color-inverted;
color: $fg-color-dark;
&:hover,
&:focus {
color: $link-color-inverted
color: $link-color-dark;
}
}
}
@@ -21,10 +21,10 @@ body.inverted {
ul {
li {
a {
color: $fg-color-inverted;
color: $fg-color-dark;
&:hover,
&:focus {
color: $link-color-inverted;
color: $link-color-dark;
}
}
}
@@ -34,3 +34,13 @@ body.inverted {
}
}
body.colorscheme-dark {
@include content_dark()
}
body.colorscheme-auto {
@media (prefers-color-scheme: dark) {
@include content_dark()
}
}

17
assets/scss/_footer_dark.scss Normal file
View File

@@ -0,0 +1,17 @@
@mixin footer_dark {
.footer {
a {
color: $link-color-dark;
}
}
}
body.colorscheme-dark {
@include footer_dark()
}
body.colorscheme-auto {
@media (prefers-color-scheme: dark) {
@include footer_dark()
}
}

7
assets/scss/_footer_inverted.scss
View File

@@ -1,7 +0,0 @@
body.inverted {
.footer {
a {
color: $link-color-inverted;
}
}
}

54
assets/scss/_navigation_dark.scss Normal file
View File

@@ -0,0 +1,54 @@
@mixin navigation_dark {
.navigation {
a, span {
color: $fg-color-dark;
}
a {
&:hover,
&:focus {
color: $link-color-dark;
}
}
.navigation-list {
@media only screen and (max-width : 768px) {
background-color: $bg-color-dark;
border-top: solid 2px $alt-bg-color-dark;
border-bottom: solid 2px $alt-bg-color-dark;
}
.menu-separator {
@media only screen and (max-width : 768px) {
border-top: 2px solid $fg-color-dark;
}
}
}
#menu-toggle {
@media only screen and (max-width : 768px) {
&:checked + label {
color: $alt-bg-color-dark;
}
}
}
.menu-button {
@media only screen and (max-width : 768px) {
color: $fg-color-dark;
&:hover,
&:focus {
color: $link-color-dark;
}
}
}
}
}
body.colorscheme-dark {
@include navigation_dark()
}
body.colorscheme-auto {
@media (prefers-color-scheme: dark) {
@include navigation_dark()
}
}

44
assets/scss/_navigation_inverted.scss
View File

@@ -1,44 +0,0 @@
body.inverted {
.navigation {
a, span {
color: $fg-color-inverted;
}
a {
&:hover,
&:focus {
color: $link-color-inverted;
}
}
.navigation-list {
@media only screen and (max-width : 768px) {
background-color: $bg-color-inverted;
border-top: solid 2px $alt-bg-color-inverted;
border-bottom: solid 2px $alt-bg-color-inverted;
}
.menu-separator {
@media only screen and (max-width : 768px) {
border-top: 2px solid $fg-color-inverted;
}
}
}
#menu-toggle {
@media only screen and (max-width : 768px) {
&:checked + label {
color: $alt-bg-color-inverted;
}
}
}
.menu-button {
@media only screen and (max-width : 768px) {
color: $fg-color-inverted;
&:hover,
&:focus {
color: $link-color-inverted;
}
}
}
}
}

12
assets/scss/_variables.scss
View File

@@ -10,9 +10,9 @@ $alt-bg-color: #E0E0E0 !default;
$alt-fg-color: #000 !default;
$link-color: #1565c0 !default;
// Colors inverted
$bg-color-inverted: #212121 !default;
$fg-color-inverted: #dadada !default;
$alt-bg-color-inverted: #424242 !default;
$alt-fg-color-inverted: #dadada !default;
$link-color-inverted: #36679f !default;
// Colors dark
$bg-color-dark: #212121 !default;
$fg-color-dark: #dadada !default;
$alt-bg-color-dark: #424242 !default;
$alt-fg-color-dark: #dadada !default;
$link-color-dark: #36679f !default;

5
assets/scss/coder-dark.scss Normal file
View File

@@ -0,0 +1,5 @@
@import "variables";
@import "base_dark";
@import "content_dark";
@import "navigation_dark";
@import "footer_dark";

5
assets/scss/coder-inverted.scss
View File

@@ -1,5 +0,0 @@
@import "variables";
@import "base_inverted";
@import "content_inverted";
@import "navigation_inverted";
@import "footer_inverted";