0
0
mirror of https://github.com/nodejs/node.git synced 2024-11-22 07:37:56 +01:00
nodejs/doc/template.html
Aaron Xie afda922349
doc: improve scrollbar appearance in dark mode
PR-URL: https://github.com/nodejs/node/pull/41890
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: Mestery <mestery@protonmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
2022-02-11 12:58:18 +01:00

104 lines
4.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="nodejs.org:node-version" content="__VERSION__">
<title>__SECTION__ | Node.js __VERSION__ Documentation</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=fallback">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/hljs.css">
<link rel="canonical" href="https://nodejs.org/api/__FILENAME__.html">
</head>
<body class="alt apidoc" id="api-section-__FILENAME__">
<div id="content" class="clearfix">
<div id="column2" class="interior">
<div id="intro" class="interior">
<a href="/" title="Go back to the home page">
Node.js
</a>
</div>
__GTOC__
</div>
<div id="column1" data-id="__ID__" class="interior">
<header>
<div class="header-container">
<h1>Node.js __VERSION__ documentation</h1>
<button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode/light mode" aria-label="Toggle dark mode/light mode" 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>
<a href="index.html">Index</a>
</li>
<li>
<a href="all.html">View on single page</a>
</li>
<li>
<a href="__FILENAME__.json">View as JSON</a>
</li>
__ALTDOCS__
__EDIT_ON_GITHUB__
</ul>
</div>
<hr>
</header>
__TOC__
<div id="apicontent">
__CONTENT__
<!-- API END -->
</div>
</div>
</div>
<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.documentElement.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.documentElement.classList.add('dark-mode');
}
} else if (userSettings === 'true') {
document.documentElement.classList.add('dark-mode');
}
if (themeToggleButton) {
themeToggleButton.hidden = false;
themeToggleButton.addEventListener('click', function() {
sessionStorage.setItem(
kCustomPreference,
document.documentElement.classList.toggle('dark-mode')
);
});
}
}
</script>
</body>
</html>