Add label in front of Theme button

sources/links/main.css

@@ -13,6 +13,7 @@ body { background:black; font-family: 'input_mono_regular',monospace; min-width:
 #player .button:hover { cursor: pointer; }
 #player select.button { appearance: none;-webkit-appearance: none;background-color: transparent; }
 #player .settings { text-align: right; }
+#player span.label { color:white; }
 #player div#timeline { display: inline-block;color:white; transition: opacity 250ms; opacity: 0 }
 #player div#timeline b { font-family: 'input_mono_medium',monospace; }
 

sources/scripts/donsol.js

@@ -392,6 +392,72 @@ function Donsol () {
     b_low: '#4a3b44',
     b_inv: '#f5f5d4'
   }
+  this.skTheme = {
+    background: '#000709',
+    f_high: '#cbcbd3',
+    f_med: '#897668',
+    f_low: '#523d2c',
+    f_inv: '#3f4f5b',
+    b_high: '#aba49e',
+    b_med: '#59574b',
+    b_low: '#372823',
+    b_inv: '#8c5a3d'
+  }
+  this.snowTheme = {
+    background: '#eeefee',
+    f_high: '#222222',
+    f_med: '#999999',
+    f_low: '#bbbcbb',
+    f_inv: '#545454',
+    b_high: '#545454',
+    b_med: '#ced0ce',
+    b_low: '#f5f5f5',
+    b_inv: '#ed2c3e'
+  }
+  this.solarizedDarkTheme = {
+    background: '#073642',
+    f_high: '#93a1a1',
+    f_med: '#6c71c4',
+    f_low: '#586e75',
+    f_inv: '#002b36',
+    b_high: '#fdf6e3',
+    b_med: '#eee8d5',
+    b_low: '#002b36',
+    b_inv: '#cb4b16'
+  }
+  this.solarizedLightTheme = {
+    background: '#eee8d5',
+    f_high: '#586e75',
+    f_med: '#6c71c4',
+    f_low: '#93a1a1',
+    f_inv: '#fdf6e3',
+    b_high: '#002b36',
+    b_med: '#073642',
+    b_low: '#fdf6e3',
+    b_inv: '#cb4b16'
+  }
+  this.sonicPiTheme = {
+    background: '#ffffff',
+    f_high: '#000000',
+    f_med: '#ed1e92',
+    f_low: '#aaaaaa',
+    f_inv: '#ffffff',
+    b_high: '#444444',
+    b_med: '#555555',
+    b_low: '#ced0ce',
+    b_inv: '#ed1e92'
+  }
+  this.soyuzTheme = {
+    background: '#111111',
+    f_high: '#ffffff',
+    f_med: '#aaaaaa',
+    f_low: '#555555',
+    f_inv: '#000000',
+    b_high: '#fc533e',
+    b_med: '#666666',
+    b_low: '#333333',
+    b_inv: '#fc533e'
+  }
   this.tapeTheme = {
     background: '#dad7cd',
     f_high: '#696861',
@@ -403,6 +469,50 @@ function Donsol () {
     b_low: '#e5e3dc',
     b_inv: '#eb3f48'
   }
+  this.teenageTheme = {
+    background: '#a1a1a1',
+    f_high: '#222222',
+    f_med: '#e00b30',
+    f_low: '#888888',
+    f_inv: '#ffffff',
+    b_high: '#555555',
+    b_med: '#fbba2d',
+    b_low: '#b3b3b3',
+    b_inv: '#0e7242'
+  }
+  this.teletextTheme = {
+    background: '#000000',
+    f_high: '#ffffff',
+    f_med: '#ffff00',
+    f_low: '#00FF00',
+    f_inv: '#000000',
+    b_high: '#ff00ff',
+    b_med: '#ff0000',
+    b_low: '#0000ff',
+    b_inv: '#ffffff'
+  }
+  this.vacuuiTheme = {
+    background: '#22282a',
+    f_high: '#f1f2f3',
+    f_med: '#a6e22e',
+    f_low: '#66d9ef',
+    f_inv: '#f92672',
+    b_high: '#678cb1',
+    b_med: '#4f6164',
+    b_low: '#42464C',
+    b_inv: '#e6db74'
+  }
+  this.zenburnTheme = {
+    background: '#464646',
+    f_high: '#DCDCCC',
+    f_med: '#DCA3A3',
+    f_low: '#7F9F7F',
+    f_inv: '#000D18',
+    b_high: '#262626',
+    b_med: '#333333',
+    b_low: '#3F3F3F',
+    b_inv: '#8FAF9F'
+  }
 
   this.theme = new Theme(this.defaultTheme)
 

sources/scripts/player.js

@@ -254,9 +254,39 @@ function Player () {
     if (theme_value.localeCompare('roguelite') === 0) {
       new_theme = donsol.rogueliteTheme
     }
+    if (theme_value.localeCompare('sk') === 0) {
+      new_theme = donsol.skTheme
+    }
+    if (theme_value.localeCompare('snow') === 0) {
+      new_theme = donsol.snowTheme
+    }
+    if (theme_value.localeCompare('solarizedDark') === 0) {
+      new_theme = donsol.solarizedDarkTheme
+    }
+    if (theme_value.localeCompare('solarizedLight') === 0) {
+      new_theme = donsol.solarizedLightTheme
+    }
+    if (theme_value.localeCompare('sonicPi') === 0) {
+      new_theme = donsol.sonicPiTheme
+    }
+    if (theme_value.localeCompare('soyuz') === 0) {
+      new_theme = donsol.soyuzTheme
+    }
     if (theme_value.localeCompare('tape') === 0) {
       new_theme = donsol.tapeTheme
     }
+    if (theme_value.localeCompare('teenage') === 0) {
+      new_theme = donsol.teenageTheme
+    }
+    if (theme_value.localeCompare('teletext') === 0) {
+      new_theme = donsol.teletextTheme
+    }
+    if (theme_value.localeCompare('vacuui') === 0) {
+      new_theme = donsol.vacuuiTheme
+    }
+    if (theme_value.localeCompare('zenburn') === 0) {
+      new_theme = donsol.zenburnTheme
+    }
     donsol.theme = new Theme(new_theme)
     donsol.theme.load(new_theme)
     donsol.theme.install(document.body)

sources/scripts/settings.js

@@ -2,15 +2,20 @@
 
 function Settings () {
   this.element = null
+  this.theme_label = null
   this.theme_button = null
 
   this.install = function () {
     this.element = document.createElement('div')
     this.element.setAttribute('class', 'settings')
 
+    this.theme_label = document.createElement('span')
+    this.theme_label.setAttribute('class', 'label')
+    this.theme_label.innerHTML = 'Theme: '
+
     this.theme_button = document.createElement('select')
     this.theme_button.setAttribute('class', 'theme button')
-    this.theme_button.innerHTML = '<option value=\"theme\">Theme (default)</option>'
+    this.theme_button.innerHTML = '<option value=\"theme\">Default</option>'
     this.theme_button.innerHTML += '<option value=\"apollo\">Apollo</option>'
     this.theme_button.innerHTML += '<option value=\"battlestation\">Battlestation</option>'
     this.theme_button.innerHTML += '<option value=\"berry\">Berry</option>'
@@ -45,10 +50,21 @@ function Settings () {
     this.theme_button.innerHTML += '<option value=\"polivoks">Polivoks</option>'
     this.theme_button.innerHTML += '<option value=\"rainonwires">Rain on Wires</option>'
     this.theme_button.innerHTML += '<option value=\"roguelite\">Roguelite</option>'
+    this.theme_button.innerHTML += '<option value=\"sk\">SK</option>'
+    this.theme_button.innerHTML += '<option value=\"snow\">Snow</option>'
+    this.theme_button.innerHTML += '<option value=\"solarizedDark\">Solarized Dark</option>'
+    this.theme_button.innerHTML += '<option value=\"solarizedLight\">Solarized Light</option>'
+    this.theme_button.innerHTML += '<option value=\"sonicPi\">Sonic Pi</option>'
+    this.theme_button.innerHTML += '<option value=\"soyuz\">Soyuz</option>'
     this.theme_button.innerHTML += '<option value=\"tape\">Tape</option>'
+    this.theme_button.innerHTML += '<option value=\"teenage\">Teenage</option>'
+    this.theme_button.innerHTML += '<option value=\"teletext\">Teletext</option>'
+    this.theme_button.innerHTML += '<option value=\"vacuui\">Vacuui</option>'
+    this.theme_button.innerHTML += '<option value=\"zenburn\">Zenburn</option>'
     this.theme_button.addEventListener('mousedown', () => { donsol.player.change_theme(this.theme_button.value) })
     this.theme_button.addEventListener('change', () => { donsol.player.change_theme(this.theme_button.value) })
 
+    this.element.appendChild(this.theme_label)
     this.element.appendChild(this.theme_button)
 
     return this.element