mirror of
https://github.com/zebrajr/node.git
synced 2026-01-15 12:15:26 +00:00
835b85d5e9
The button for toggling light mode and dark mode has no text display. Screen readers will read it as simply "button", making it not useful. Add an aria-label attribute so it gets a better description. PR-URL: https://github.com/nodejs/node/pull/37031 Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com> Reviewed-By: Darshan Sen <raisinten@gmail.com>
107 lines
4.1 KiB
HTML
107 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" 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>
|
|
|
|
<details id="toc" open>
|
|
<summary>Table of Contents</summary>
|
|
__TOC__
|
|
</details>
|
|
|
|
<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.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>
|
|
</body>
|
|
</html>
|