Skip to content

feat: add dark mode support across website and homepage #370

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sumn2u merged 2 commits into from
Mar 8, 2026
Merged

feat: add dark mode support across website and homepage #370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1eb4ecc
feat: add dark mode support across website and homepage
mhughes2012 Mar 7, 2026
b56e11d
fix: add body background color in dark mode
mhughes2012 Mar 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions _layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,25 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
<div class="book-header" role="navigation">
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% block body %}{% endblock %}
{% block javascript %}{% endblock %}
</body>
Expand Down
1 change: 1 addition & 0 deletions _layouts/website/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<link rel="shortcut icon" href="{{ "images/favicon.ico"|resolveAsset }}" type="image/x-icon">
<meta property="og:image" content="https://github-production-user-asset-6210df.s3.amazonaws.com/80192140/277288453-4e65df60-ee6d-41af-8911-931e7f43313c.png" />
<meta property="twitter:image" content="https://github-production-user-asset-6210df.s3.amazonaws.com/80192140/277288453-4e65df60-ee6d-41af-8911-931e7f43313c.png" />
<script src="/website/dark-mode.js"></script>
{% endblock %}

{% block style %}
Expand Down
1 change: 1 addition & 0 deletions cn/_layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions cn/_layouts/website/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,18 @@ <h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
</h1>
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions cn/_layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,6 @@
});
</script>
<script src="/website/copy-code.js"></script>
<script src="/website/dark-mode.js"></script>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions de/_layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions de/_layouts/website/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,18 @@ <h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
</h1>
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions de/_layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,6 @@
});
</script>
<script src="/website/copy-code.js"></script>
<script src="/website/dark-mode.js"></script>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions en/_layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions en/_layouts/website/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,18 @@ <h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
</h1>
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions en/_layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,6 @@
});
</script>
<script src="/website/copy-code.js"></script>
<script src="/website/dark-mode.js"></script>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions es/_layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions es/_layouts/website/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,18 @@ <h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
</h1>
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions es/_layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,6 @@
});
</script>
<script src="/website/copy-code.js"></script>
<script src="/website/dark-mode.js"></script>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions fr/_layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions fr/_layouts/website/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,18 @@ <h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
</h1>
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions fr/_layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,6 @@
});
</script>
<script src="/website/copy-code.js"></script>
<script src="/website/dark-mode.js"></script>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions id/_layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions id/_layouts/website/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,18 @@ <h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
</h1>
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions id/_layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,6 @@
});
</script>
<script src="/website/copy-code.js"></script>
<script src="/website/dark-mode.js"></script>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions np/_layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions np/_layouts/website/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,18 @@ <h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
</h1>
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions np/_layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,6 @@
});
</script>
<script src="/website/copy-code.js"></script>
<script src="/website/dark-mode.js"></script>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions tr/_layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
{% endfor %}
{% endblock %}
<link rel="stylesheet" href="/website/copy-code.css">
<link rel="stylesheet" href="/website/dark-mode.css">
{% block head %}{% endblock %}
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions tr/_layouts/website/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,18 @@ <h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
</h1>
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
<span class="icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
</svg>
</span>
<span class="icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
</svg>
</span>
</button>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions tr/_layouts/website/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,6 @@
});
</script>
<script src="/website/copy-code.js"></script>
<script src="/website/dark-mode.js"></script>
</div>
{% endblock %}
18 changes: 18 additions & 0 deletions website/copy-code.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,22 @@
.code-wrapper pre {
margin-top: 0 !important;
padding-right: 42px !important;
}

html.dark-mode .copy-code-button {
background-color: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
color: #9daab6;
opacity: 0.9;
backdrop-filter: blur(2px);
}

html.dark-mode .copy-code-button:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.14);
color: #d7e2ea;
}

html.dark-mode .copy-code-button.success {
color: #7ee787;
}
Loading