diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index ac3ed1e9d..3f0e50d17 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -28,17 +28,28 @@ function updateSetting(element) {
}
}
-function getBodyClassToggle(className) {
- function toggleBodyClass(add) {
- document.body.classList.toggle(className, add);
+function getRootAttributeToggle(attributeName, valueName) {
+ function toggleRootAttribute(set) {
+ document.documentElement.setAttribute(`data-${attributeName}`, set ? valueName : null);
}
- return toggleBodyClass;
+ return toggleRootAttribute;
}
const settings = {
- useSansFont: getBodyClassToggle('sans')
+ useSansFont: getRootAttributeToggle('font', 'sans'),
+ useDarkTheme: getRootAttributeToggle('theme', 'dark')
};
+Object.entries(settings).forEach(([name, setter]) => {
+ let value = JSON.parse(localStorage.getItem(name));
+ try {
+ setter(value);
+ } catch (error) {
+ console.error(`Failed to apply setting "${name}" With value:`, value);
+ console.error(error);
+ }
+});
+
document.addEventListener('DOMContentLoaded', () => {
bottomHeightThreshold = document.documentElement.scrollHeight - 30;
@@ -81,18 +92,11 @@ document.addEventListener('DOMContentLoaded', () => {
parent.insertBefore(table, element.nextSibling);
});
- Object.entries(settings).forEach(([name, setter]) => {
+ Object.keys(settings).forEach(name => {
let value = JSON.parse(localStorage.getItem(name));
-
- try {
- setter(value);
- let element = document.querySelector(`input[name=${name}]`);
- if (element) {
- element.checked = value === true;
- }
- } catch (error) {
- console.error(`Failed to apply setting "${name}" With value:`, value);
- console.error(error);
+ let element = document.querySelector(`input[name=${name}]`);
+ if (element) {
+ element.checked = value === true;
}
});
});
diff --git a/docs/_static/style.css b/docs/_static/style.css
index 176dc32bf..d8b6a2cb3 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -18,6 +18,8 @@ Historically however, thanks to:
/* CSS variables would go here */
:root {
+ --font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
+
--main-background: #fff;
--link-text: #2591c4;
--link-hover-text: #0b3a44;
@@ -60,10 +62,73 @@ Historically however, thanks to:
--table-border: #ddd;
--mobile-active-toc: ;
--active-toc: #dbdbdb;
+ --scrollbar: rgba(0,0,0,0.2);
+ --scrollbar-hover: rgba(0,0,0,0.4);
+}
+
+:root[data-font="sans"] {
+ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+:root[data-theme="dark"] {
+ --main-background: #303030;
+ --link-text: #2591c4;
+ --link-hover-text: #3b6a74;
+ --text-normal: #fff;
+ --mobile-nav-background: #424242;
+ --mobile-nav-text: #fff;
+ --mobile-nav-hover-text: #fff;
+ --mobile-nav-header-text: #fff;
+ --nav-background: #303030;
+ --nav-text: rgba(255,255,255,0.7);
+ --nav-hover-text: rgba(255,255,255,0.5);
+ --nav-header-text: rgba(255,255,255,0.87);
+ --search-border: #ccc;
+ --footer-text: #555;
+ --footer-link: #444;
+ --hr-border: #b1b4b6;
+ --main-big-headers-text: rgba(255,255,255,0.87);
+ --main-big-headers-border: #ddd;
+ --main-h5-header-text: #000;
+ --main-h6-header-text: #777;
+ --main-h4-header-border: #e5e5e5;
+ --header-link: #3e4349;
+ --header-link-hover-text: #fff;
+ --note-background: #424242;
+ --note-border: #222222;
+ --warning-background: #424242;
+ --warning-border: #aaaa22;
+ --error-background: #424242;
+ --error-border: #aa2222;
+ --helpful-background: #424242;
+ --helpful-border: #22aaaa;
+ --codeblock-background: #222222;
+ --codeblock-border: #424242;
+ --codeblock-text: rgba(255,255,255,0.7);
+ --inline-code-background: #212121;
+ --xref-code-background: transparent;
+ --api-entry-background: #212121;
+ --table-header-background: #f5f5f5;
+ --table-text: #000;
+ --table-border: #ddd;
+ --mobile-active-toc: ;
+ --active-toc: #dbdbdb;
+ --scrollbar: rgba(0,0,0,0.5);
+ --scrollbar-hover: rgba(0,0,0,0.7);
+}
+
+img[src$="snake_dark.svg"] {
+ display: none;
+}
+:root[data-theme="dark"] img[src$="snake.svg"] {
+ display: none;
+}
+:root[data-theme="dark"] img[src$="snake_dark.svg"] {
+ display: initial;
}
body {
- font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
+ font-family: var(--font-family);
font-size: 16px;
margin: 0;
padding: 0;
@@ -72,8 +137,23 @@ body {
color: var(--text-normal);
}
-body.sans {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+/* Scrollbar related */
+
+body::-webkit-scrollbar,
+#sidebar::-webkit-scrollbar {
+ width: 1em;
+}
+
+body::-webkit-scrollbar-thumb,
+#sidebar::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar);
+ border-radius: 0.5em;
+}
+
+body::-webkit-scrollbar-thumb:hover,
+#sidebar::-webkit-scrollbar-thumb:hover {
+ background-color: var(--scrollbar-hover);
}
/* grid related */
@@ -235,6 +315,7 @@ div.modal-content {
border-radius: 4px;
margin: 20% auto;
width: 40%;
+ min-width: 350px;
cursor: initial;
}
@@ -397,6 +478,11 @@ main li {
line-height: 1.4em;
}
+main img {
+ width: 100%;
+ max-width: 500px;
+}
+
/* weird margins */
li > p {
margin: 2px;
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index 45c2a86a0..f12cdab39 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -91,6 +91,15 @@
+
+
Enable dark theme:
+
+
+
+
{% block body %} {% endblock %}
diff --git a/docs/images/snake.png b/docs/images/snake.png
deleted file mode 100644
index 62b446177..000000000
Binary files a/docs/images/snake.png and /dev/null differ
diff --git a/docs/images/snake.svg b/docs/images/snake.svg
new file mode 100644
index 000000000..1f3521b5d
--- /dev/null
+++ b/docs/images/snake.svg
@@ -0,0 +1,17 @@
+
diff --git a/docs/images/snake_dark.svg b/docs/images/snake_dark.svg
new file mode 100644
index 000000000..1517d60d0
--- /dev/null
+++ b/docs/images/snake_dark.svg
@@ -0,0 +1,17 @@
+
diff --git a/docs/index.rst b/docs/index.rst
index 20c5d1836..9a8a37f60 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -6,7 +6,8 @@
Welcome to discord.py
===========================
-.. image:: /images/snake.png
+.. image:: /images/snake.svg
+.. image:: /images/snake_dark.svg
discord.py is a modern, easy to use, feature-rich, and async ready API wrapper
for Discord.