Add day/night theme switching and GitHub corner to docs

1 files changed, 95 insertions, 23 deletions

diff --git a/docs/css/dark.css b/docs/css/dark.css
index 12535bc..e7f7ac0 100644
--- a/docs/css/dark.css
+++ b/docs/css/dark.css
@@ -74,7 +74,8 @@ html {
 body {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    color: #34495e;
+    background-color: #121212 !important;
+    color: #f4fefe;
     font-family:
         Source Sans Pro,
         Helvetica Neue,
@@ -220,7 +221,7 @@ main.hidden {
     transition: all 0.3s;
 }
 .anchor span {
-    color: #34495e;
+    color: #f4fefe;
 }
 .anchor:hover {
     text-decoration: underline;
@@ -292,7 +293,7 @@ main.hidden {
 }
 .sidebar-toggle {
     background-color: transparent;
-    background-color: hsla(0, 0%, 100%, 0.8);
+    background-color: transparent;
     border: 0;
     outline: none;
     padding: 10px;
@@ -328,12 +329,15 @@ body.sticky .sidebar-toggle {
     bottom: 0;
     left: 300px;
     transition: left 0.25s ease;
+    background-color: #121212;
 }
 .markdown-section {
     margin: 0 auto;
-    max-width: 80%;
-    padding: 30px 15px 40px;
+    max-width: 100%;
+    padding: 30px 45px 40px;
     position: relative;
+    background-color: #121212;
+    color: #fefefe;
 }
 .markdown-section > * {
     box-sizing: border-box;
@@ -344,7 +348,7 @@ body.sticky .sidebar-toggle {
 }
 .markdown-section hr {
     border: none;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #323232;
     margin: 2em 0;
 }
 .markdown-section iframe {
@@ -365,15 +369,15 @@ body.sticky .sidebar-toggle {
 }
 .markdown-section td,
 .markdown-section th {
-    border: 1px solid #ddd;
+    border: 1px solid #333;
     padding: 6px 13px;
 }
 .markdown-section tr {
-    border-top: 1px solid #ccc;
+    border-top: 1px solid #222;
 }
 .markdown-section p.tip,
 .markdown-section tr:nth-child(2n) {
-    background-color: #f8f8f8;
+    background-color: #252525;
 }
 .markdown-section p.tip {
     border-bottom-right-radius: 2px;
@@ -408,7 +412,7 @@ body.sticky .sidebar-toggle {
     background-color: #efefef;
 }
 .markdown-section p.tip em {
-    color: #34495e;
+    color: #f4fefe;
 }
 .markdown-section p.warn {
     background: rgba(66, 185, 131, 0.1);
@@ -476,7 +480,6 @@ body.close .content {
         transform: translateX(300px);
     }
     body.close .sidebar-toggle {
-        background-color: hsla(0, 0%, 100%, 0.8);
         transition: background-color 1s;
         width: 284px;
         padding: 10px;
@@ -615,13 +618,14 @@ body {
     background-color: #fefefe;
 }
 .sidebar {
-    color: #364149;
+    background-color: #080808;
+    color: #fefefe;
 }
 .sidebar li {
     margin: 6px 0;
 }
 .sidebar ul li a {
-    color: #505d6b;
+    color: #fefefe;
     font-size: 14px;
     font-weight: 400;
     overflow: hidden;
@@ -660,7 +664,7 @@ body {
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section strong {
-    color: #2c3e50;
+    color: #f2fefe;
     font-weight: 600;
 }
 .markdown-section a {
@@ -732,7 +736,7 @@ body {
 }
 .markdown-section code,
 .markdown-section pre {
-    background-color: #f2f2f2;
+    background-color: #212121;
 }
 .markdown-section output,
 .markdown-section pre {
@@ -753,7 +757,7 @@ body {
 }
 .markdown-section code {
     border-radius: 2px;
-    color: #f44336;
+    color: #f64739;
     margin: 0 2px;
     padding: 3px 5px;
     white-space: pre-wrap;
@@ -777,6 +781,62 @@ body {
     overflow: inherit;
     white-space: inherit;
 }
+.markdown-section pre code {
+    color: #eee;
+}
+.markdown-section pre code .token.punctuation {
+    color: #eee;
+}
+.alert.callout.note {
+    border: 1px solid #00bcd4;
+    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2);
+}
+.alert.callout.tip {
+    border: 1px solid #4caf50;
+    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
+}
+.alert.callout.important {
+    border: 1px solid #7c4dff;
+    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.2);
+}
+.alert.callout.warning {
+    border: 1px solid #ffc107;
+    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
+}
+.alert.callout.attention {
+    border: 1px solid #f44336;
+    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
+}
+.alert.callout.note code {
+    color: #00c1d9;
+}
+.alert.callout.tip code {
+    color: #51af55;
+}
+.alert.callout.important code {
+    color: #8152ff;
+}
+.alert.callout.warning code {
+    color: #ffc60c;
+}
+.alert.callout.attention code {
+    color: #f9483b;
+}
+.alert.callout.note a {
+    color: #00c1d9;
+}
+.alert.callout.tip a {
+    color: #51af55;
+}
+.alert.callout.important a {
+    color: #8152ff;
+}
+.alert.callout.warning a {
+    color: #ffc60c;
+}
+.alert.callout.attention a {
+    color: #f9483b;
+}
 .markdown-section output {
     padding: 1.7rem 1.4rem;
     border: 1px dotted #ccc;
@@ -896,7 +956,7 @@ code .token {
 /* App name link styles */
 .app-name-link {
     display: inline-block;
-    color: #34495e;
+    color: #f4fefe;
     font-size: 1.5rem;
     font-weight: 700;
     text-decoration: none;
@@ -905,6 +965,11 @@ code .token {
 }
 
 /* Search styles */
+.search {
+    background-color: #101010;
+    border-bottom-width: 0px !important;
+}
+
 .search .input-wrap {
     position: relative;
     display: flex;
@@ -913,12 +978,17 @@ code .token {
 .search .input-wrap input[type="search"] {
     width: 100%;
     padding: 8px 40px 8px 12px;
-    border: 1px solid #ccc;
+    border: 1px solid #444;
     border-radius: 4px;
     font-size: 14px;
     outline: none;
     transition: border-color 0.3s;
     box-sizing: border-box;
+    background-color: #1f1f1f;
+    color: #f4fefe;
+}
+.search .input-wrap input[type="search"]::placeholder {
+    color: #888;
 }
 .search .input-wrap input[type="search"]:focus {
     border-color: #ff5722;
@@ -934,18 +1004,20 @@ code .token {
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: 0.6;
+    opacity: 0.4;
     transition: opacity 0.3s;
+    color: #666;
 }
 .search .input-wrap .clear-button:hover {
-    opacity: 1;
+    opacity: 0.7;
 }
 .search .results-panel {
     margin-top: 8px;
-    border: 1px solid #e0e0e0;
+    border: 1px solid #444;
     border-radius: 4px;
-    background: #fff;
+    background: #2a2a2a;
     max-height: 300px;
     overflow-y: auto;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    color: #f4fefe;
 }