satchlj
/
satchlj.com
1
2
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Add light theme that can be toggled with contrast button in page header

This commit is contained in:
timvisee 2019-07-16 17:35:05 +02:00
parent 57a6b7a50d
commit 7e533e64c5
No known key found for this signature in database
GPG Key ID: E293DE9CDA1A9664
15 changed files with 96 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/icons/glyphicons-halflings-51-contrast.svg Normal file
View File

@ -0,0 +1,3 @@
<svg id="glyphicons-halflings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path id="contrast" d="M10,2a8,8,0,1,0,8,8A8.00917,8.00917,0,0,0,10,2Zm0,14A6,6,0,0,1,10,4Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 191 B

13
themes/zenn/sass/_colors/base16_atelier_dune.scss
View File

@ -1,13 +0,0 @@
// Inspired by: base16 atelier dune
// https://github.com/atelierbram/base16-atelier-schemes
$light-text: #202020;
$dark-text: #a6a28c;
$background: #20201d;
$background-darker: darken($background, 4%);
$background-border: darken($background, 8%);
$header-color: #6684e1;
$link-color: #ae9513;
$link-color-hover: lighten($link-color, 15%);
$logo-color: #fff;
$logo-color-hover: $link-color-hover;

13
themes/zenn/sass/_colors/monokai.scss
View File

@ -1,13 +0,0 @@
// Inspired by: monokai
// https://github.com/kevinsawicki/monokai
$light-text: #202020;
$dark-text: #ccc;
$background: #282828;
$background-darker: darken($background, 4%);
$background-border: darken($background, 8%);
$header-color: #66D9EF;
$link-color: #A6E22E;
$link-color-hover: #FD971F;
$logo-color: #fff;
$logo-color-hover: $link-color-hover;

10
themes/zenn/sass/_colors/zenn.scss
View File

@ -1,10 +0,0 @@
$light-text: #202020;
$dark-text: #ccc;
$background: #212931;
$background-darker: darken($background, 4%);
$background-border: darken($background, 8%);
$header-color: #BEA38C;
$link-color: $header-color;
$link-color-hover: lighten($link-color, 15%);
$logo-color: #fff;
$logo-color-hover: $link-color;

18
themes/zenn/sass/_components.scss
View File

@ -43,6 +43,8 @@ content {
border: 1px solid $color-main-border;
box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4);
border-radius: 4px;
transition: background-color 0.2s ease,
border 0.2s ease;
}
pre {
@ -63,6 +65,8 @@ content {
font-family: $font-mono;
background-color: $color-main-bg-alt;
border-radius: 3px;
transition: background-color 0.2s ease,
color 0.2s ease;
}
table {
@ -88,15 +92,26 @@ content {
margin-left: 0;
margin-right: 0;
padding-left: 1em;
transition: border 0.2s ease;
}
}
/**
* Theme toggle button.
*/
.theme-toggle {
font-size: 1.1rem;
line-height: 2.2em;
float: right;
}
/**
* Text style modifiers.
*/
.muted {
color: $color-text-muted;
transition: color 0.2s ease;
}
.meta {
@ -121,7 +136,8 @@ content {
line-height: 1;
margin: 0 0.2em 0.2em 0;
transition: box-shadow 0.2s ease,
background-color 0.2s ease;
background-color 0.2s ease,
border 0.2s ease;
}
a.tag {

15
themes/zenn/sass/_config.scss
View File

@ -3,24 +3,9 @@ $responsive-small: 900px;
$responsive-mini: 550px;
$responsive-tiny: 400px;
// Colors
$color-text: #a6a28c;
$color-text-muted: darken($color-text, 25%);
$color-main-bg: #20201d;
$color-main-bg-alt: darken($color-main-bg, 4%);
$color-main-border: darken($color-main-bg, 8%);
$color-header: #ff6f33;
$color-link: #ae9513;
$color-link-hover: lighten($color-link, 15%);
// Top logo
$logo-color: #fff;
$logo-color-hover: $color-link-hover;
// Fonts
$font-base: "Source Sans Pro", Ubuntu, sans-serif;
$font-main: "Zilla Slab", "Open Sans", sans-serif;
$font-read: "Merriweather", serif;
$font-mono: "Fira Mono", monospace;
// $font-logo: "Source Sans Pro", Helvetica, sans-serif;
$font-logo: $font-main;

17
themes/zenn/sass/_config_dark.scss Normal file
View File

@ -0,0 +1,17 @@
@import "_config";
// Colors
$color-text: #a6a28c;
$color-text-muted: darken($color-text, 25%);
$color-main-bg: #20201d;
$color-main-bg-alt: darken($color-main-bg, 4%);
$color-main-border: darken($color-main-bg, 8%);
$color-main-shadow: rgba($color-main-border, 0.4);
$color-header: #ff6f33;
$color-link: #ae9513;
$color-link-hover: lighten($color-link, 15%);
// Top logo and landing page
$logo-color: #fff;
$logo-color-hover: $color-link-hover;
$landing-color-shadow: $color-main-border;

17
themes/zenn/sass/_config_light.scss Normal file
View File

@ -0,0 +1,17 @@
@import "_config";
// Colors
$color-text: #282828;
$color-text-muted: lighten($color-text, 35%);
$color-main-bg: #fcfbf7;
$color-main-bg-alt: darken($color-main-bg, 10%);
$color-main-border: darken($color-main-bg, 50%);
$color-main-shadow: rgba(darken(#20201d, 8%), 0.1);
$color-header: #ff6f33;
$color-link: #9C8611;
$color-link-hover: darken($color-link, 10%);
// Top logo and landing page
$logo-color: #fff;
$logo-color-hover: lighten($color-link, 15%);
$landing-color-shadow: darken(#20201d, 8%);

2
themes/zenn/sass/_landing.scss
View File

@ -7,7 +7,7 @@ header#banner .greeting {
font-family: $font-read;
font-size: 2em;
line-height: 2;
text-shadow: 0 0 0.75em $color-main-border;
text-shadow: 0 0 0.75em $landing-color-shadow;
&.top {
margin: 4em auto 0 auto;

11
themes/zenn/sass/_layout.scss
View File

@ -8,7 +8,9 @@ main {
display: flex;
color: $color-text;
border: 1px solid $color-main-border;
box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4);
box-shadow: 0 0 10px 5px $color-main-shadow;
transition: color 0.2s ease,
border-color 0.2s ease;
}
content {
@ -18,6 +20,7 @@ content {
flex: 1;
overflow-x: auto;
overflow-y: visible;
transition: background-color 0.2s ease;
#{headings(1,6,"header >")} {
margin: 0;
@ -30,6 +33,7 @@ content > header {
margin: 0;
padding-bottom: 1em;
border-bottom: 1px dashed $color-main-border;
transition: border 0.2s ease;
#{headings(1,6)} {
margin: 0;
@ -48,6 +52,7 @@ content ul {
article {
padding: 2em 0;
border-bottom: 1px dashed $color-main-border;
transition: border 0.2s ease;
// Hack to fix <pre> overflow
width: 100%;
@ -69,7 +74,9 @@ sidebar {
padding: 0.5em 1.5em 1.5em 1.5em;
box-sizing: border-box;
background: $color-main-bg-alt;
box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4);
box-shadow: 0 0 10px 5px $color-main-shadow;
transition: background-color 0.2s ease,
box-shadow 0.2s ease;
h1 {
font-size: 1.4em;

1
themes/zenn/sass/site.scss → themes/zenn/sass/_site.scss
View File

@ -1,5 +1,4 @@
@import "_zola";
@import "_config";
@import "_functions";
@import "_base";

2
themes/zenn/sass/site_dark.scss Normal file
View File

@ -0,0 +1,2 @@
@import "_config_dark";
@import "_site";

2
themes/zenn/sass/site_light.scss Normal file
View File

@ -0,0 +1,2 @@
@import "_config_light";
@import "_site";

20
themes/zenn/static/js/theme.js Normal file
View File

@ -0,0 +1,20 @@
/**
* Set and apply the normal or toggled theme.
*
* @param toggled Truthy value to show toggled, normal otherwise.
*/
function theme_set(toggled) {
document.getElementById('style-dark').disabled = toggled;
document.getElementById('style-light').disabled = !toggled;
localStorage.setItem('theme-toggled', toggled ? '1' : '');
}
/**
* Toggle the current theme.
*/
function theme_toggle() {
theme_set(!document.getElementById('style-dark').disabled);
}
// Apply selected theme, stored in localStorage item
theme_set(localStorage.getItem('theme-toggled'));

9
themes/zenn/templates/site.html
View File

@ -25,7 +25,8 @@
{% block css %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Zilla+Slab:400,700|Merriweather:400,400i,700,700i|Fira+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ get_url(path="site.css", trailing_slash=false) | safe }}">
<link id="style-dark" rel="stylesheet" href="{{ get_url(path="site_dark.css", trailing_slash=false) | safe }}">
<link id="style-light" disabled rel="stylesheet" href="{{ get_url(path="site_light.css", trailing_slash=false) | safe }}">
{% if page.extra.zenn_applause %}
<link rel="stylesheet" href="{{ get_url(path="vendor/applause-button/applause-button.css", trailing_slash=false) | safe }}">
@ -33,6 +34,8 @@
{% endblock css %}
{% block js %}
<script src="{{ get_url(path="js/theme.js", trailing_slash=false) | safe }}"></script>
{% if page.extra.zenn_applause %}
<script src="{{ get_url(path="vendor/applause-button/applause-button.js", trailing_slash=false) | safe }}"></script>
{% endif %}
@ -58,6 +61,10 @@
{% block main %}
<main>
<content>
<a href="#" class="theme-toggle" onclick="theme_toggle(); return false;" title="Toggle light/dark mode">
{{ load_data(path="static/icons/glyphicons-halflings-51-contrast.svg") | safe }}
</a>
{% if section.title %}
<header>
<h1>