mirror of
https://github.com/nodejs/node.git
synced 2024-11-21 10:59:27 +00:00
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>
This commit is contained in:
Ajay Poshak
Antoine du Hamel
parent
67c8e2b32f
commit
9ff555b7a2
@ -28,3 +28,20 @@
|
||||
color: #666;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.dark-mode .hljs-number,
|
||||
.dark-mode .hljs-string,
|
||||
.dark-mode .hljs-regexp {
|
||||
color: var(--green4);
|
||||
}
|
||||
|
||||
.dark-mode .hljs-keyword,
|
||||
.dark-mode .hljs-attribute {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.dark-mode .hljs-doctag .hljs-type,
|
||||
.dark-mode .hljs-doctag .hljs-variable,
|
||||
.dark-mode .hljs-comment {
|
||||
color: var(--gray7);
|
||||
}
|
||||
|
||||
@ -1,3 +1,55 @@
|
||||
/*--------------------- CSS Variables ----------------------------*/
|
||||
:root {
|
||||
--black: #000000;
|
||||
--black1: #090c15;
|
||||
--black2: #2c3437;
|
||||
--black3: #0d111d;
|
||||
--white: #ffffff;
|
||||
--white-smoke: #f2f2f2;
|
||||
--grey-smoke: #e9edf0;
|
||||
--red1: #d60027;
|
||||
--red2: #d50027;
|
||||
--red3: #ca5010;
|
||||
--green1: #43853d;
|
||||
--green2: #5a8147;
|
||||
--green3: #454545;
|
||||
--green4: #99cc7d;
|
||||
--green5: #84ba64;
|
||||
--gray1: #707070;
|
||||
--gray2: #b4b4b4;
|
||||
--gray3: #cccccc;
|
||||
--gray4: #040404;
|
||||
--gray5: #7a7a7a;
|
||||
--gray6: #333333;
|
||||
--gray7: #c1c1c1;
|
||||
--grey8: #ddd;
|
||||
|
||||
--color-brand-primary: var(--gray6);
|
||||
--color-brand-secondary: var(--green1);
|
||||
--color-text-primary: var(--gray6);
|
||||
--color-text-secondary: var(--green2);
|
||||
--color-fill-app: var(--white);
|
||||
--color-text-nav: var(--gray3);
|
||||
--highlight-background-color: var(--white-smoke);
|
||||
--color-links: var(--green1);
|
||||
--color-fill-side-nav: var(--gray6);
|
||||
--api-stability-links-bg: rgba(255, 255, 255, .4)
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
--color-links: var(--green5);
|
||||
--color-fill-app: var(--black1);
|
||||
--color-text-primary: var(--white);
|
||||
--color-fill-side-nav: var(--black3);
|
||||
--highlight-background-color: var(--black2);
|
||||
}
|
||||
|
||||
.dark-mode code,
|
||||
.dark-mode tt {
|
||||
color: var(--grey-smoke);
|
||||
background-color: var(--highlight-background-color);
|
||||
}
|
||||
|
||||
/*--------------------- Layout and Typography ----------------------------*/
|
||||
html {
|
||||
font-size: 1rem;
|
||||
@ -16,8 +68,8 @@ body {
|
||||
font-family: Lato, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-fill-app);
|
||||
}
|
||||
|
||||
h1, h1 code { font-size: 2.5rem; }
|
||||
@ -67,7 +119,7 @@ a.type {
|
||||
a:link,
|
||||
a:active,
|
||||
a:visited {
|
||||
color: #43853d;
|
||||
color: var(--color-links);
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
padding: 1px 3px;
|
||||
@ -75,8 +127,8 @@ a:visited {
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #fff;
|
||||
background-color: #43853d;
|
||||
color: var(--white);
|
||||
background-color:var(--green1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -109,7 +161,7 @@ em code {
|
||||
|
||||
#gtoc > ul > li {
|
||||
display: inline;
|
||||
border-right: 1px #000 solid;
|
||||
border-right: 1px currentColor solid;
|
||||
margin-right: .4rem;
|
||||
padding-right: .4rem;
|
||||
}
|
||||
@ -138,8 +190,8 @@ li.version-picker a span {
|
||||
}
|
||||
|
||||
ol.version-picker {
|
||||
background-color: #fff;
|
||||
border: 1px solid #43853d;
|
||||
background-color: var(--color-fill-app);
|
||||
border: 1px solid var(--color-brand-secondary);
|
||||
border-radius: 0 0 2px 2px;
|
||||
display: none;
|
||||
list-style: none;
|
||||
@ -175,14 +227,14 @@ ol.version-picker li:last-child a {
|
||||
}
|
||||
|
||||
.api_stability {
|
||||
color: #fff !important;
|
||||
color: var(--white) !important;
|
||||
margin: 0 0 1rem;
|
||||
padding: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.api_stability * {
|
||||
color: #fff !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.api_stability a {
|
||||
@ -192,7 +244,7 @@ ol.version-picker li:last-child a {
|
||||
.api_stability a:hover,
|
||||
.api_stability a:active,
|
||||
.api_stability a:focus {
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
background-color: var(--api-stability-links-bg);
|
||||
}
|
||||
|
||||
.api_stability a code {
|
||||
@ -200,15 +252,15 @@ ol.version-picker li:last-child a {
|
||||
}
|
||||
|
||||
.api_stability_0 {
|
||||
background-color: #d60027;
|
||||
background-color: var(--red1);
|
||||
}
|
||||
|
||||
.api_stability_1 {
|
||||
background-color: #ca5010;
|
||||
background-color: var(--red3);
|
||||
}
|
||||
|
||||
.api_stability_2 {
|
||||
background-color: #5a8147;
|
||||
background-color: var(--green2);
|
||||
}
|
||||
|
||||
.api_metadata {
|
||||
@ -386,7 +438,7 @@ code {
|
||||
pre {
|
||||
padding: 1rem;
|
||||
vertical-align: top;
|
||||
background-color: #f2f2f2;
|
||||
background-color: var(--highlight-background-color);
|
||||
margin: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@ -409,14 +461,14 @@ code.pre {
|
||||
}
|
||||
|
||||
#intro a {
|
||||
color: #ddd;
|
||||
color: var(--grey8);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: transparent;
|
||||
border: medium none;
|
||||
border-bottom: 1px solid #7a7a7a;
|
||||
border-bottom: 1px solid var(--gray5);
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
@ -442,8 +494,8 @@ hr {
|
||||
}
|
||||
|
||||
#toc .stability_0::after {
|
||||
background-color: #d50027;
|
||||
color: #fff;
|
||||
background-color: var(--red2);
|
||||
color: var(--white);
|
||||
content: "deprecated";
|
||||
margin-left: .25rem;
|
||||
padding: 1px 3px;
|
||||
@ -488,7 +540,7 @@ a code {
|
||||
|
||||
#column2.interior {
|
||||
width: 234px;
|
||||
background-color: #333;
|
||||
background-color: var(--color-fill-side-nav);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -500,7 +552,7 @@ a code {
|
||||
#column2 ul {
|
||||
list-style: none;
|
||||
margin: .9rem 0 .5rem;
|
||||
background-color: #333;
|
||||
background-color: var(--color-fill-side-nav);
|
||||
}
|
||||
|
||||
#column2 > :first-child {
|
||||
@ -532,7 +584,7 @@ a code {
|
||||
}
|
||||
|
||||
#column2 ul li a {
|
||||
color: #ccc;
|
||||
color: var(--color-text-nav);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@ -540,7 +592,7 @@ a code {
|
||||
#column2 ul li a.active:hover,
|
||||
#column2 ul li a.active:focus {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -548,7 +600,7 @@ a code {
|
||||
#intro a:focus,
|
||||
#column2 ul li a:hover,
|
||||
#column2 ul li a:focus {
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -563,7 +615,7 @@ span > .mark:visited {
|
||||
span > .mark:hover,
|
||||
span > .mark:focus,
|
||||
span > .mark:active {
|
||||
color: #43853d;
|
||||
color: var(--color-brand-secondary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -577,7 +629,7 @@ kbd {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #b4b4b4;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
color: #333;
|
||||
color: var(--color-text-primary);
|
||||
display: inline-block;
|
||||
font-size: .85em;
|
||||
font-weight: 700;
|
||||
@ -649,6 +701,23 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1.5rem 0 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-container h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: var(--brand3) dotted 2px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
#content {
|
||||
overflow: visible;
|
||||
@ -665,6 +734,28 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dark-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.light-icon {
|
||||
fill: var(--white);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark-mode .dark-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark-mode .light-icon {
|
||||
fill: var(--white);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media print {
|
||||
html {
|
||||
height: auto;
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user