diff options
| author | Ajay Poshak <poshakajay@gmail.com> | 2020-11-22 13:54:56 +0300 |
|---|---|---|
| committer | Antoine du Hamel <duhamelantoine1995@gmail.com> | 2021-01-07 16:22:07 +0300 |
| commit | 9ff555b7a25c03e330c6f4c93b022b1d5d5d9351 (patch) | |
| tree | e704dd679faee961686e24c101d32c7e8322e968 /doc/template.html | |
| parent | 67c8e2b32fe05c83a61c68bdf4a3fe45f2a5c06c (diff) | |
doc: add dark mode
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
PR-URL: https://github.com/nodejs/node/pull/36313
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>
Diffstat (limited to 'doc/template.html')
| -rw-r--r-- | doc/template.html | 53 |
1 files changed, 51 insertions, 2 deletions
diff --git a/doc/template.html b/doc/template.html index 9e07b55c44e..d7cc96062ea 100644 --- a/doc/template.html +++ b/doc/template.html @@ -1,4 +1,4 @@ -<!doctype html> +<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> @@ -23,7 +23,20 @@ <div id="column1" data-id="__ID__" class="interior"> <header> - <h1>Node.js __VERSION__ Documentation</h1> + <div class="header-container"> + <h1>Node.js __VERSION__ Documentation</h1> + <button class="theme-toggle-btn" id="theme-toggle-btn" hidden> + <svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24"> + <path fill="none" d="M0 0h24v24H0z" /> + <path d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15A4.01 4.01 0 0111 18c0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/> + <path d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"/> + </svg> + <svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" height="24" width="24"> + <path d="M0 0h24v24H0z" fill="none" /> + <path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/> + </svg> + </button> + </div> <div id="gtoc"> <ul> <li> @@ -54,4 +67,40 @@ </div> </div> </body> +<script> + 'use strict'; + { + const kCustomPreference = 'customDarkTheme'; + const userSettings = sessionStorage.getItem(kCustomPreference); + const themeToggleButton = document.getElementById('theme-toggle-btn'); + if (userSettings === null && window.matchMedia) { + const mq = window.matchMedia('(prefers-color-scheme: dark)'); + if ('onchange' in mq) { + function mqChangeListener(e) { + document.body.classList.toggle('dark-mode', e.matches); + } + mq.addEventListener('change', mqChangeListener); + if (themeToggleButton) { + themeToggleButton.addEventListener('click', function() { + mq.removeEventListener('change', mqChangeListener); + }, { once: true }); + } + } + if (mq.matches) { + document.body.classList.add('dark-mode'); + } + } else if (userSettings === 'true') { + document.body.classList.add('dark-mode'); + } + if (themeToggleButton) { + themeToggleButton.hidden = false; + themeToggleButton.addEventListener('click', function() { + sessionStorage.setItem( + kCustomPreference, + document.body.classList.toggle('dark-mode') + ); + }); + } + } +</script> </html> |