[matrix] Dark Theme

* Apply width restructions to modals and images

* Dark theme 2.0

* Add webkit scrollbar

* Use Object.keys instead of Object.entries where applicable

7 files changed, 154 insertions, 20 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index ac3ed1e9..3f0e50d1 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 176dc32b..d8b6a2cb 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 45c2a86a..f12cdab3 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -91,6 +91,15 @@
             </h3>
           </div>
 
+          <div class='setting'>
+            <h3>Enable dark theme:
+              <label class="toggle" title="Enable the dark theme.">
+                <input type="checkbox" name="useDarkTheme" onclick="updateSetting(this);">
+                <span class="toggle-slider"></span>
+              </label>
+            </h3>
+          </div>
+
         </div>
       </div>
       {% block body %} {% endblock %}
diff --git a/docs/images/snake.png b/docs/images/snake.png
deleted file mode 100644
index 62b44617..00000000
--- a/docs/images/snake.png
+++ /dev/null
diff --git a/docs/images/snake.svg b/docs/images/snake.svg
new file mode 100644
index 00000000..1f3521b5
--- /dev/null
+++ b/docs/images/snake.svg
@@ -0,0 +1,17 @@
+<svg style="width: 100%; height: 100%" 
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1036 597.33331" height="597.333" width="1036">
+    <path d="M498.46 84.248c-1.6 1.665-2.4 3.597-2.4 5.93 0 2.333.8 4.265 2.4 5.863 1.667 1.67 3.6 2.47 5.932 2.47 2.332 0 4.265-.8 5.864-2.46 1.665-1.59 2.465-3.53 2.465-5.86 0-2.33-.8-4.26-2.46-5.93-1.6-1.6-3.53-2.4-5.86-2.4s-4.26.8-5.93 2.4m-9.06 5.93c0-2.33-.8-4.26-2.46-5.93-1.6-1.6-3.53-2.4-5.862-2.4s-4.265.8-5.93 2.4c-1.6 1.67-2.4 3.6-2.4 5.93 0 2.33.8 4.27 2.4 5.86 1.665 1.67 3.598 2.47 5.93 2.47s4.265-.8 5.864-2.46c1.663-1.593 2.463-3.53 2.463-5.86m46.647 0c0-2.333-.8-4.27-2.467-5.93-1.6-1.6-3.53-2.4-5.86-2.4s-4.265.8-5.93 2.4c-1.6 1.665-2.4 3.597-2.4 5.93 0 2.333.8 4.265 2.4 5.863 1.665 1.67 3.598 2.467 5.93 2.467s4.265-.8 5.864-2.468c1.667-1.598 2.467-3.53 2.467-5.86" fill="#dadfea"/>
+    <path d="M2748.2-850.22H155.382c-76.964 0-115.447-48.474-115.447-144.932V-4303.65c0-96.45 38.483-144.93 115.447-144.93H6321.57c76.97 0 115.45 48.48 115.45 144.93v3308.498c0 96.458-38.48 144.933-115.45 144.933H3737.75" fill="none" stroke="#dadfea" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+    <path d="M4177.05-3798.87v2178.5H998.996v-2178.5c0-133.44 66.474-199.91 199.914-199.91h2778.23c133.44 0 199.91 66.47 199.91 199.91z" fill="none" stroke="#dadfea" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+    <path d="M6274.1-4181.2v2844.7c0 82.97-36.49 124.45-108.95 124.45H322.307c-72.47 0-108.952-41.48-108.952-124.45v-2844.7c0-82.96 36.483-124.44 108.952-124.44H6165.15c72.46 0 108.95 41.48 108.95 124.44zM449.25-41.084h147.43m182.418 0h339.842m1407.86 0c0-91.458 46.98-151.43 140.94-179.92 23.99-7.497 50.97-12.493 80.46-15.993m0 0c24.49-2.497 51.48-3.997 79.96-3.997h820.63c32.49 0 61.97 2 88.96 5.497M1348.84-41.084H2526.8m221.4-195.913V-850.22m989.55 614.723c26.49 3 49.98 7.996 71.47 14.493 93.96 28.49 140.93 88.462 140.93 179.92m2024.08 0h50.98m-468.28 0h219.89m-1826.67 0h1416.86M3737.75-235.497V-850.22m212.4 809.136H2526.8M3737.75-850.22H2748.2" fill="none" stroke="#dadfea" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+    <path d="M2126.79-2789.58c-38.13 38.49-57.37 85.01-57.37 139.59 0 54.22 19.24 100.75 57.37 139.23 38.48 38.48 85.01 57.73 139.59 57.73 54.22 0 100.75-19.25 139.23-57.73 38.49-38.48 57.73-85.01 57.73-139.23 0-54.58-19.24-101.1-57.73-139.59-38.48-38.13-85.01-57.37-139.23-57.37-54.58 0-101.11 19.24-139.59 57.37z" fill="none" stroke="#dadfea" stroke-width="69.967" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+    <path d="M2640.7-3448.32c-286.51-11.2-546.09 38.83-778.73 150.43 143.08-106.7 307.5-172.47 493.27-197.66-6.3-14.34-18.9-29.04-38.13-43.73h-62.98c-210.25 36.73-380.62 103.9-511.11 201.16-197.66 325.7-291.76 678.68-281.62 1058.6 142.39 189.97 349.49 279.53 621.31 267.98l122.45-129.44c-148.68-52.82-255.03-123.49-318.7-212 214.1 133.99 465.63 199.41 754.24 196.26" fill="none" stroke="#dadfea" stroke-width="69.967" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+    <path d="M-3149.74-2789.58c-38.13 38.49-57.37 85.01-57.37 139.59 0 54.22 19.24 100.75 57.37 139.23 38.49 38.48 85.01 57.73 139.59 57.73 54.22 0 100.75-19.25 139.23-57.73 38.49-38.48 57.73-85.01 57.73-139.23 0-54.58-19.24-101.1-57.73-139.59-38.48-38.13-85.01-57.37-139.23-57.37-54.58 0-101.1 19.24-139.59 57.37z" fill="none" stroke="#dadfea" stroke-width="69.967" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(-.13334 0 0 .13333 0 597.333)"/>
+    <path d="M-2635.83-3448.32c-286.51-11.2-546.09 38.83-778.73 150.43 143.08-106.7 307.5-172.47 493.27-197.66-6.3-14.34-18.89-29.04-38.13-43.73h-62.98c-210.25 36.73-380.62 103.9-511.11 201.16-197.66 325.7-291.76 678.68-281.62 1058.6 142.39 189.97 349.49 279.53 621.32 267.98l122.44-129.44c-148.68-52.82-255.03-123.49-318.7-212 214.1 133.99 465.63 199.41 754.24 196.26" fill="none" stroke="#dadfea" stroke-width="69.967" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(-.13334 0 0 .13333 0 597.333)"/>
+    <path d="M474.47 230.785c-17.793 0-26.655 8.863-26.655 26.654v261.2-23.99H207.912h47.98v-58.9 34.91h143.94-47.98v23.99h95.963v-94.88c-.534-16.73-9.396-25.06-26.656-25.06H186.58c-17.792 0-26.656 8.86-26.656 26.65v163.85c0 17.26 8.33 26.12 25.057 26.65h333.8c16.66-.53 24.99-9.39 24.99-26.65V326.74h-34.65c-16.66.667-24.65-7.33-23.99-23.987h300.28c4.2-7.13 6.27-15.126 6.27-23.99v-21.32c0-17.792-8.86-26.655-26.65-26.655zm-13.327 311.842l23.99 22.588-23.99-22.588" fill="#eadc62"/>
+    <path d="M777.616 312.677c3.132-3.132 5.73-6.397 7.796-9.928h-300.28c-.665 16.65 7.33 24.65 23.992 23.98h234.572c13.26 0 24.523-4.67 33.92-14.06" fill="#f2edc8"/>
+    <path d="M3890.68-40.99H1387.32m1971.1-1440.85v-1067.51c0-133.44 66.47-199.91 199.91-199.91h2179.01c133.44 0 199.91 66.47 199.91 199.91v159.93c0 66.47-15.49 126.44-46.98 179.92" fill="none" stroke="#000" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+    <path d="M5890.27-2209.5c-15.49 26.48-34.98 50.97-58.47 74.46-70.47 70.47-154.93 105.45-254.39 105.45H4078.1M3358.42-590.243V-770.16m719.68-1259.43h-259.88m-459.8 1259.43v-711.68M3638.3-240.9l-179.92-169.423M4449.93-40.99h-559.25m187.42-1988.6V-240.9c0 129.44-62.48 195.91-187.42 199.91m1007.04 0H4717.8M1559.24-770.16h359.84m4777.83-1259.43l-179.92-179.91m0 0l179.92-179.92M949.022-40.99h438.298M6516.99-2209.5h-626.72m-3971.19 997.54v261.88m0 0v179.92m1079.51-179.92h-359.84m0 0v179.92m-719.67-179.92h719.67m0 179.92h-719.67M1387.32-40.99c-125.44-4-187.91-70.47-187.91-199.91v-1228.94c0-133.44 66.47-199.91 199.9-199.91h1759.2c129.45 0 195.92 62.47 199.91 187.91m-719.67 711.68h719.67" fill="none" stroke="#000" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+    <path d="M7716.44-2209.5H7356.6m0 539.75l-179.92-179.92m179.92-899.59l-179.92 179.92" fill="none" stroke="#dadfea" stroke-width="99.954" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+    <path d="M769.485 258.24c-2.332-2.333-5.13-3.467-8.462-3.467s-6.198 1.134-8.53 3.466c-2.333 2.33-3.466 5.19-3.466 8.52s1.133 6.13 3.466 8.46c2.332 2.33 5.198 3.53 8.53 3.53 3.332 0 6.13-1.2 8.462-3.53 2.334-2.34 3.532-5.13 3.532-8.47 0-3.33-1.198-6.2-3.532-8.53"/>
+</svg>
diff --git a/docs/images/snake_dark.svg b/docs/images/snake_dark.svg
new file mode 100644
index 00000000..1517d60d
--- /dev/null
+++ b/docs/images/snake_dark.svg
@@ -0,0 +1,17 @@
+<svg style="width: 100%; height: 100%"
+	xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1036 597.33331" height="597.333" width="1036">
+	<path d="M498.46 84.248c-1.6 1.665-2.4 3.597-2.4 5.93 0 2.333.8 4.265 2.4 5.863 1.667 1.67 3.6 2.47 5.932 2.47 2.332 0 4.265-.8 5.864-2.46 1.665-1.59 2.465-3.53 2.465-5.86 0-2.33-.8-4.26-2.46-5.93-1.6-1.6-3.53-2.4-5.86-2.4s-4.26.8-5.93 2.4m-9.06 5.93c0-2.33-.8-4.26-2.46-5.93-1.6-1.6-3.53-2.4-5.862-2.4s-4.265.8-5.93 2.4c-1.6 1.67-2.4 3.6-2.4 5.93 0 2.33.8 4.27 2.4 5.86 1.665 1.67 3.598 2.47 5.93 2.47s4.265-.8 5.864-2.46c1.663-1.593 2.463-3.53 2.463-5.86m46.647 0c0-2.333-.8-4.27-2.467-5.93-1.6-1.6-3.53-2.4-5.86-2.4s-4.265.8-5.93 2.4c-1.6 1.665-2.4 3.597-2.4 5.93 0 2.333.8 4.265 2.4 5.863 1.665 1.67 3.598 2.467 5.93 2.467s4.265-.8 5.864-2.468c1.667-1.598 2.467-3.53 2.467-5.86" fill="#121212"/>
+	<path d="M2748.2-850.22H155.382c-76.964 0-115.447-48.474-115.447-144.932V-4303.65c0-96.45 38.483-144.93 115.447-144.93H6321.57c76.97 0 115.45 48.48 115.45 144.93v3308.498c0 96.458-38.48 144.933-115.45 144.933H3737.75" fill="none" stroke="#121212" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+	<path d="M4177.05-3798.87v2178.5H998.996v-2178.5c0-133.44 66.474-199.91 199.914-199.91h2778.23c133.44 0 199.91 66.47 199.91 199.91z" fill="none" stroke="#121212" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+	<path d="M6274.1-4181.2v2844.7c0 82.97-36.49 124.45-108.95 124.45H322.307c-72.47 0-108.952-41.48-108.952-124.45v-2844.7c0-82.96 36.483-124.44 108.952-124.44H6165.15c72.46 0 108.95 41.48 108.95 124.44zM449.25-41.084h147.43m182.418 0h339.842m1407.86 0c0-91.458 46.98-151.43 140.94-179.92 23.99-7.497 50.97-12.493 80.46-15.993m0 0c24.49-2.497 51.48-3.997 79.96-3.997h820.63c32.49 0 61.97 2 88.96 5.497M1348.84-41.084H2526.8m221.4-195.913V-850.22m989.55 614.723c26.49 3 49.98 7.996 71.47 14.493 93.96 28.49 140.93 88.462 140.93 179.92m2024.08 0h50.98m-468.28 0h219.89m-1826.67 0h1416.86M3737.75-235.497V-850.22m212.4 809.136H2526.8M3737.75-850.22H2748.2" fill="none" stroke="#121212" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+	<path d="M2126.79-2789.58c-38.13 38.49-57.37 85.01-57.37 139.59 0 54.22 19.24 100.75 57.37 139.23 38.48 38.48 85.01 57.73 139.59 57.73 54.22 0 100.75-19.25 139.23-57.73 38.49-38.48 57.73-85.01 57.73-139.23 0-54.58-19.24-101.1-57.73-139.59-38.48-38.13-85.01-57.37-139.23-57.37-54.58 0-101.11 19.24-139.59 57.37z" fill="none" stroke="#121212" stroke-width="69.967" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+	<path d="M2640.7-3448.32c-286.51-11.2-546.09 38.83-778.73 150.43 143.08-106.7 307.5-172.47 493.27-197.66-6.3-14.34-18.9-29.04-38.13-43.73h-62.98c-210.25 36.73-380.62 103.9-511.11 201.16-197.66 325.7-291.76 678.68-281.62 1058.6 142.39 189.97 349.49 279.53 621.31 267.98l122.45-129.44c-148.68-52.82-255.03-123.49-318.7-212 214.1 133.99 465.63 199.41 754.24 196.26" fill="none" stroke="#121212" stroke-width="69.967" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+	<path d="M-3149.74-2789.58c-38.13 38.49-57.37 85.01-57.37 139.59 0 54.22 19.24 100.75 57.37 139.23 38.49 38.48 85.01 57.73 139.59 57.73 54.22 0 100.75-19.25 139.23-57.73 38.49-38.48 57.73-85.01 57.73-139.23 0-54.58-19.24-101.1-57.73-139.59-38.48-38.13-85.01-57.37-139.23-57.37-54.58 0-101.1 19.24-139.59 57.37z" fill="none" stroke="#121212" stroke-width="69.967" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(-.13334 0 0 .13333 0 597.333)"/>
+	<path d="M-2635.83-3448.32c-286.51-11.2-546.09 38.83-778.73 150.43 143.08-106.7 307.5-172.47 493.27-197.66-6.3-14.34-18.89-29.04-38.13-43.73h-62.98c-210.25 36.73-380.62 103.9-511.11 201.16-197.66 325.7-291.76 678.68-281.62 1058.6 142.39 189.97 349.49 279.53 621.32 267.98l122.44-129.44c-148.68-52.82-255.03-123.49-318.7-212 214.1 133.99 465.63 199.41 754.24 196.26" fill="none" stroke="#121212" stroke-width="69.967" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(-.13334 0 0 .13333 0 597.333)"/>
+	<path d="M474.47 230.785c-17.793 0-26.655 8.863-26.655 26.654v261.2-23.99H207.912h47.98v-58.9 34.91h143.94-47.98v23.99h95.963v-94.88c-.534-16.73-9.396-25.06-26.656-25.06H186.58c-17.792 0-26.656 8.86-26.656 26.65v163.85c0 17.26 8.33 26.12 25.057 26.65h333.8c16.66-.53 24.99-9.39 24.99-26.65V326.74h-34.65c-16.66.667-24.65-7.33-23.99-23.987h300.28c4.2-7.13 6.27-15.126 6.27-23.99v-21.32c0-17.792-8.86-26.655-26.65-26.655zm-13.327 311.842l23.99 22.588-23.99-22.588" fill="#376fa1"/>
+	<path d="M777.616 312.677c3.132-3.132 5.73-6.397 7.796-9.928h-300.28c-.665 16.65 7.33 24.65 23.992 23.98h234.572c13.26 0 24.523-4.67 33.92-14.06" fill="#578fc1"/>
+	<path d="M3890.68-40.99H1387.32m1971.1-1440.85v-1067.51c0-133.44 66.47-199.91 199.91-199.91h2179.01c133.44 0 199.91 66.47 199.91 199.91v159.93c0 66.47-15.49 126.44-46.98 179.92" fill="none" stroke="#000" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+	<path d="M5890.27-2209.5c-15.49 26.48-34.98 50.97-58.47 74.46-70.47 70.47-154.93 105.45-254.39 105.45H4078.1M3358.42-590.243V-770.16m719.68-1259.43h-259.88m-459.8 1259.43v-711.68M3638.3-240.9l-179.92-169.423M4449.93-40.99h-559.25m187.42-1988.6V-240.9c0 129.44-62.48 195.91-187.42 199.91m1007.04 0H4717.8M1559.24-770.16h359.84m4777.83-1259.43l-179.92-179.91m0 0l179.92-179.92M949.022-40.99h438.298M6516.99-2209.5h-626.72m-3971.19 997.54v261.88m0 0v179.92m1079.51-179.92h-359.84m0 0v179.92m-719.67-179.92h719.67m0 179.92h-719.67M1387.32-40.99c-125.44-4-187.91-70.47-187.91-199.91v-1228.94c0-133.44 66.47-199.91 199.9-199.91h1759.2c129.45 0 195.92 62.47 199.91 187.91m-719.67 711.68h719.67" fill="none" stroke="#000" stroke-width="79.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+	<path d="M7716.44-2209.5H7356.6m0 539.75l-179.92-179.92m179.92-899.59l-179.92 179.92" fill="none" stroke="#121212" stroke-width="99.954" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(.13334 0 0 .13333 0 597.333)"/>
+	<path d="M769.485 258.24c-2.332-2.333-5.13-3.467-8.462-3.467s-6.198 1.134-8.53 3.466c-2.333 2.33-3.466 5.19-3.466 8.52s1.133 6.13 3.466 8.46c2.332 2.33 5.198 3.53 8.53 3.53 3.332 0 6.13-1.2 8.462-3.53 2.334-2.34 3.532-5.13 3.532-8.47 0-3.33-1.198-6.2-3.532-8.53"/>
+</svg>
diff --git a/docs/index.rst b/docs/index.rst
index 20c5d183..9a8a37f6 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.