public: support darkmode

Fixes #14

Author: changkun

public/index.html

@@ -37,11 +37,11 @@
         </div>
 		<div id="about">
             <p><b>About the Go SSA Playground</b></p>
-            
+
             <p>
             The Go SSA Playground is a web service that compiles a Go program and demonstrates the SSA intermediate representation of given function name.
             </p>
-            
+
             <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>
 
             <ul>

public/main.js

@@ -10,13 +10,80 @@ function ping() {
 ping(); // inject version info
 
 
-
+let darkMode = false
 let msgbox = document.getElementById('outputMsg')
 let ssabox = document.getElementById('ssa')
 ssabox.addEventListener('load', () => {
+    if (darkMode) {
+        ssabox.contentWindow.document.getElementById('dark-mode-button').click()
+    }
+
     // inject ssa style
     $("iframe").contents().find("head").append($("<link/>", { rel: 'stylesheet', href: '/gossa/scrollbar.css', type: 'text/css'}));
     setMessageBox('', true)
+    ssabox.contentWindow.document
+        .getElementById('dark-mode-button')
+        .addEventListener('click', function() {
+            const banner = document.getElementById('banner')
+            const snippet = document.getElementById('snippet')
+            const about = document.getElementById('about')
+            const funcname = document.getElementById('funcname')
+            const gcflags = document.getElementById('gcflags')
+            const horiz = document.querySelectorAll('.gutter.gutter-horizontal')
+            const btns = document.querySelectorAll('input[type=button]')
+            const code = document.getElementById('code')
+            const links = document.querySelectorAll('#about a')
+
+            if (darkMode) {
+                banner.style.backgroundColor = '#E0EBF5'
+                snippet.style.backgroundColor = 'rgba(255, 252, 221, 0.81)'
+                about.style.backgroundColor = '#FFD'
+                funcname.style.backgroundColor = '#fff'
+                funcname.style.border = '1px solid #ccc'
+                funcname.style.color = ''
+                gcflags.style.backgroundColor = '#fff'
+                gcflags.style.border = '1px solid #ccc'
+                gcflags.style.color = ''
+                horiz.forEach((v) => {
+                    v.style.filter = ''
+                })
+                btns.forEach((v) => {
+                    v.style.backgroundColor = '#375EAB'
+                    v.style.color = '#fff'
+                })
+                code.style.color = 'black'
+                links.forEach(v => {
+                    v.style.color = ''
+                })
+                document.body.style.color = 'black'
+
+                darkMode = false
+            } else {
+                banner.style.backgroundColor = '#566'
+                snippet.style.backgroundColor = '#665'
+                about.style.backgroundColor = '#665'
+                funcname.style.backgroundColor = '#343'
+                funcname.style.border = '1px solid #454'
+                funcname.style.color = 'lightgray'
+                gcflags.style.backgroundColor = '#343'
+                gcflags.style.border = '1px solid #454'
+                gcflags.style.color = 'lightgray'
+                horiz.forEach((v) => {
+                    v.style.filter = 'invert(.7)'
+                })
+                btns.forEach((v) => {
+                    v.style.backgroundColor = '#0044cb'
+                    v.style.color = 'lightgray'
+                })
+                code.style.color = 'rgb(230, 255, 255)'
+                links.forEach(v => {
+                    v.style.color = '#809fff'
+                })
+                document.body.style.color = 'lightgray'
+
+                darkMode = true
+            }
+        })
 });
 
 let lastFuncName, lastCode, lastGcflags;

public/style.css

@@ -148,70 +148,3 @@ input[type=button]:focus {
     background-image: url('/gossa/vertical.png');
     cursor: col-resize;
 }
-
-/* 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%;
-}