From 43f48386d7921612c5cbe7d39a4dfb82a3f3367e Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Wed, 19 Jun 2019 19:53:07 -0400 Subject: [PATCH] website: use css variables and prefers-color-scheme (#2547) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This uses `prefers-color-scheme: dark` to automatically switch to dark mode if the user specifies it in their system settings. Dark mode is supported in Firefox 67, Chrome 76, Safari 12.1, and iOS 13 as of this commit, but the current status can be checked here: https://caniuse.com/#feat=prefers-color-scheme Additionally, this uses CSS Variables to implement the color-switching mechanism. This isn’t supported in IE, but the site degrades reasonably well with them disabled. Support table: https://caniuse.com/#feat=css-variables --- website/index.html | 1 + website/manual.html | 1 + website/style.css | 42 ++++++++++++++++++++++++++++++++-------- website/style_guide.html | 1 + 4 files changed, 37 insertions(+), 8 deletions(-) diff --git a/website/index.html b/website/index.html index 2920f1c2c8..66b12871c2 100644 --- a/website/index.html +++ b/website/index.html @@ -6,6 +6,7 @@ + diff --git a/website/manual.html b/website/manual.html index 6ac776770b..3caa2c083a 100644 --- a/website/manual.html +++ b/website/manual.html @@ -6,6 +6,7 @@ + diff --git a/website/style.css b/website/style.css index 07bb41a037..5f377663b2 100644 --- a/website/style.css +++ b/website/style.css @@ -1,6 +1,32 @@ +:root { + --text-color: #444; + --background-color: #f0f0f0; + --link-color: #106ad5; + --table-border: #bbb; + --pre-color: #161616; + --pre-link-color: #001631; + --pre-background: rgba(36, 126, 233, 0.1); + --code-color: #333; +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: #444; + --text-color: #f0f0f0; + --link-color: #4498ff; + --pre-color: #e8e8e8; + --pre-link-color: #cee4ff; + --code-color: #ccc; + } + + #logo { + filter: invert(); + } +} + body { - color: #444; - background: #f0f0f0; + color: var(--text-color); + background: var(--background-color); padding: 0; line-height: 1.5; @@ -33,7 +59,7 @@ table { td, th { font-weight: normal; text-align: center; - border: 1px dotted #bbb; + border: 1px dotted var(--table-border); padding: 4px; } @@ -44,11 +70,11 @@ svg { } a { - color: #106ad5; + color: var(--link-color); } pre a { - color: #001631; + color: var(--pre-link-color); } h2 a, h3 a { @@ -64,8 +90,8 @@ h3:hover a { pre { /* background: rgba(36, 126, 233, 0.03); */ - color: #161616; - background: rgba(36, 126, 233, 0.1); + color: var(--pre-color); + background: var(--pre-background); padding: 15px; white-space: pre-wrap; word-break: break-all; @@ -96,7 +122,7 @@ header h1 { code { background: rgba(36, 126, 233, 0.1); padding: 2px 5px; - color: #333; + color: var(--code-color); } .hljs { diff --git a/website/style_guide.html b/website/style_guide.html index bd0f4ed004..667a2eac7a 100644 --- a/website/style_guide.html +++ b/website/style_guide.html @@ -6,6 +6,7 @@ +