Theme support, light theme

Architype.js

@@ -9,8 +9,9 @@ class Architype {
     this.container_ = container;
 
     this.container_.classList.add('architype');
-    // TODO: make theme selectable
-    this.container_.classList.add('dark');
+
+    this.themes_ = ['light', 'dark'];
+    this.setTheme(localStorage.getItem('theme') || 'dark');
 
     document.addEventListener('keydown', (e) => { this.onKeyDown(e); });
 
@@ -159,8 +160,47 @@ class Architype {
     localStorage.setItem('currentState', this.serializedStr_);
   }
 
+  setTheme(theme) {
+    this.container_.classList.remove('theme-' + this.getTheme());
+    this.container_.classList.add('theme-' + theme);
+    localStorage.setItem('theme', theme);
+  }
+
+  getTheme() {
+    let classes = Array.from(this.container_.classList);
+    for (let cls of this.container_.classList) {
+      if (cls.startsWith('theme-')) {
+        return cls.substring(6);
+      }
+    }
+  }
+
+  nextTheme() {
+    let cur = this.themes_.indexOf(this.getTheme());
+    this.setTheme(this.themes_[(cur + 1) % this.themes_.length]);
+  }
+
+  prevTheme() {
+    let cur = this.themes_.indexOf(this.getTheme());
+    let num = this.themes_.length;
+    let next = (((cur - 1) % num) + num) % num;
+    this.setTheme(this.themes_[next]);
+  }
+
   onKeyDown(e) {
     switch (e.key) {
+      case 'm':
+        this.nextTheme();
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+
+      case 'M':
+        this.prevTheme();
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+
       case 'u':
         // Stop us from backing up out of the page
         if (!this.first_) {

EditorHelp.js

@@ -63,6 +63,10 @@ class EditorHelp extends EditorEntryBase {
     this.addText('+');
     this.addKey('u');
     this.addText('Redo      ');
+
+    this.addLine();
+    this.addKey('m');
+    this.addText('Next theme      ');
   }
 
   addLine() {

architype.css

@@ -1,4 +1,24 @@
-.dark {
+.theme-light {
+  --focus: #ff0000;
+  --nonfocus: #eeeeee;
+  --node: #c0def2;
+  --group: #c0f2d5;
+  --link: #ffd1b3;
+  --label: #ffb3eb;
+  --text: #000000;
+  --placeholder: rgba(0,0,0,0.2);
+  --outline: #323434;
+  --editor-background: #ffffff;
+  --grid-background: #ffffff;
+  --group-background: rgba(255,255,255,0.5);
+  --node-background: #f8f8f8;
+  --link-label-background: rgba(240,240,240,0.9);
+  --input: rgba(0,0,0,0.2);
+  --input-focus: rgba(255,0,0,0.2);
+  --line: #000000;
+}
+
+.theme-dark {
   --focus: #ff0000;
   --nonfocus: #000000;
   --node: #091d2a;
@@ -15,6 +35,7 @@
   --link-label-background: rgba(0,0,0,0.8);
   --input: rgba(255,255,255,0.2);
   --input-focus: rgba(255,0,0,0.2);
+  --line: #ffffff;
 }
 
 :root {
@@ -138,7 +159,7 @@ body {
   align-items: center;
   vertical-align: middle;
   font-size: 20px;
-  border: 1px solid white;
+  border: 1px solid var(--text);
   border-radius: 5px;
   padding: 5px;
   margin: 3px;
@@ -214,7 +235,7 @@ body {
   height: 85%;
   background: var(--node-background);
   justify-content: center;
-  border: 1px solid white;
+  border: 1px solid var(--line);
   border-radius: 10%;
   z-index: 3;
 }
@@ -236,7 +257,7 @@ body {
   height: 100%;
   background: var(--group-background);
   justify-content: flex-start;
-  border: 1px dashed white;
+  border: 1px dashed var(--line);
   z-index: 1;
   pointer-events: none;
 }
@@ -262,7 +283,7 @@ body {
   height: 100%;
   z-index: 2;
   pointer-events: none;
-  --line-color: white;
+  --line-color: var(--line);
 }
 
 .gridLines.highlight {
@@ -286,7 +307,7 @@ body {
   height: 100%;
   z-index: 4;
   pointer-events: none;
-  --arrow-color: white;
+  --arrow-color: var(--line);
 }
 
 .gridArrow.highlight {