public: dark mode support

Author: changkun

TODO.md

@@ -2,6 +2,7 @@
 
 - [x] Test package support
 - [x] Auto format && import
+- [x] Dark mode
 - [ ] Message: waiting for SSA response
 - [ ] Better Editor: Monaco Editor
 - [ ] Dragable SSA

public/dark.js

@@ -0,0 +1,20 @@
+var enabled = localStorage.getItem('dark-mode')
+if (enabled === null) {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    enable(); document.getElementById("dark-mode-checkbox").checked = true;
+  }
+} else if (enabled === 'true') {
+  enable(); document.getElementById("dark-mode-checkbox").checked = true;
+}
+function enable()  {
+  DarkReader.enable({brightness: 100, contrast: 85, sepia: 10});
+  localStorage.setItem('dark-mode', 'true');
+}
+function disable() {
+  DarkReader.disable();
+  localStorage.setItem('dark-mode', 'false')
+}
+function darkmode() {
+  console
+  if (localStorage.getItem('dark-mode') === 'false') { enable(); } else { disable();}
+}

public/index.html

@@ -19,6 +19,10 @@
                 <input class="btn btn-primary" type="button" value="Build" id="build">
             </div>
             <div id="aboutControls">
+                <label class="switch">
+                    <input id="dark-mode-checkbox" type="checkbox" onchange="darkmode()">
+                    <span class="slider"></span>
+                </label>
                 <input class="btn btn-primary" type="button" value="About" id="aboutbtn">
             </div>
         </div>
@@ -40,11 +44,15 @@
 
             <p>The Go SSA Playground uses the latest stable release of Go. The current version is <a id="version" href="https://golang.org/dl/"></a>.</p>
 
-            <p>GitHub: <a href="https://github.com/changkun/ssaplayground">github.com/changkun/ssaplayground</a></p>
-
+            <ul>
+                <li>Website: <a href="https://changkun.de/gossa">changkun.de/gossa</a></li>
+                <li>GitHub: <a href="https://github.com/changkun/ssaplayground">github.com/changkun/ssaplayground</a></li>
+            </ul>
             <p>The author of the Go SSA Playground is <a href="https://changkun.de">Changkun Ou</a>.</p>
             </div>
     </div>
     <script src="/gossa/main.js"></script>
+    <script src="/gossa/magic.js"></script>
+    <script src="/gossa/dark.js"></script>
 </body>
 </html>

public/magic.js

@@ -21,6 +21,7 @@ body {
 	min-width: 245px;
 }
 #aboutControls {
+	display: flex;
 	float: right;
 	padding: 10px 15px;
 }
@@ -65,14 +66,23 @@ body {
 input[type=button] {
 	background: #375EAB;
 	color: white;
-    text-align: center;
-    cursor: pointer;
-    border: 1px solid transparent;
-    padding: 5.3px 12px;
+	text-align: center;
+	cursor: pointer;
+	border: 1px solid transparent;
+	padding: 5.3px 12px;
 	font-size: 14px;
 	border-radius: 4px;
     user-select: none;
 }
+input[type=button]:hover {
+	background: rgb(36, 75, 152);
+}
+input[type=button]:active {
+	background: rgb(13, 43, 104);
+}
+input[type=button]:focus {
+	outline: 0;
+}
 #main {
     padding-top: 50px;
 	display: flex;
@@ -83,7 +93,7 @@ input[type=button] {
 #snippet {
     flex: 30%;
     padding: 10px;
-	background: #FFD;
+	background: rgba(255, 252, 221, 0.81);
 }
 #code, #output, pre, .lines {
 	font-family: Menlo, monospace;
@@ -119,7 +129,70 @@ input[type=button] {
 	padding-right: 5px;
 	color: lightgray;
 }
-.lineerror {
-	color: red;
-	background: #FDD;
+
+/* Dark Mode Toggle */
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  margin-right: 20px;
+  width: 60px;
+  height: 32px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 4px;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  border-radius: 4px;
+  height: 24px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #375EAB;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #375EAB;
 }
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}