add new dark theme (phonon) and work-in-progress light theme (photon)

app/javascript/src/styles/base/_themable.scss

@@ -3,6 +3,8 @@
 @import "../themes/theme_bloodlust";
 @import "../themes/theme_serpent";
 @import "../themes/theme_hotdog";
+@import "../themes/theme_phonon";
+@import "../themes/theme_photon";
 
 @import "../themes/palette_deutranomaly";
 @import "../themes/palette_tritanomaly";

app/javascript/src/styles/themes/_theme_phonon.scss

@@ -0,0 +1,16 @@
+$phonon-color-background:        #111111;
+$phonon-color-foreground:        #222222;
+$phonon-color-section:           #333333;
+
+body[data-th-main="phonon"] {
+  // Layout Colors
+  --color-background:             #{$phonon-color-background};
+  --color-foreground:             #{$phonon-color-foreground};
+  --color-section:                #{$phonon-color-section};
+  --color-section-lighten-5:      #{lighten($phonon-color-section, 5%)};
+  --color-section-lighten-10:     #{lighten($phonon-color-section, 10%)};
+  --color-section-darken-5:       #{darken($phonon-color-section, 5%)};
+
+  // Tag Categories
+  --color-tag-meta-alt:           #999;
+}

app/javascript/src/styles/themes/_theme_photon.scss

@@ -0,0 +1,87 @@
+$photon-color-background:        #eeeeee;
+$photon-color-foreground:        #cccccc;
+$photon-color-link:              #006fd9;
+$photon-color-link-hover:        #0888fa;
+$photon-color-link-active:       #bfa139;
+$photon-color-link-alt:          #004c8d;
+$photon-color-text:              #000000;
+$photon-color-text-muted:        #333333;
+$photon-color-section:           #dddddd;
+$photon-color-section-border:    #000000;
+
+body[data-th-main="photon"] {
+  // Layout Colors
+  --color-background:             #{$photon-color-background};
+  --color-foreground:             #{$photon-color-foreground};
+  --color-section:                #{$photon-color-section};
+  --color-section-lighten-5:      #{lighten($photon-color-section, 5%)};
+  --color-section-lighten-10:     #{lighten($photon-color-section, 10%)};
+  --color-section-darken-5:       #{darken($photon-color-section, 5%)};
+  --color-table-border:           #{lighten($photon-color-section, 10%)};
+
+  --color-section-pending:        #{$photon-color-section};
+  --color-section-pending-border: #{$photon-color-section-border};
+
+  // Main Colors
+  --color-text:                   #{$photon-color-text};
+  --color-text-muted:             #{$photon-color-text-muted};
+  --color-text-white:             #ffffff;
+  --color-text-table-header:      #{darken($photon-color-text, 10%)};
+
+  --color-link:                   #{$photon-color-link};
+  --color-link-hover:             #{$photon-color-link-hover};
+  --color-link-active:            #{$photon-color-link-active};
+  --color-button-active:          #{$photon-color-link-active};
+
+  --color-success:                darkseagreen;
+  --color-success-darken-5:       #{darken(darkseagreen, 5%)};
+  --color-danger:                 indianred;
+  --color-danger-darken-5:        #{darken(indianred, 5%)};
+  --color-danger-darken-10:       #{darken(indianred, 10%)};
+  --color-warning:                rosybrown;
+  --color-warning-darken-5:       #{darken(rosybrown, 5%)};
+
+  // User Groups
+  --color-user-member:            #{$photon-color-link};
+  --color-user-member-alt:        #{$photon-color-link-alt};
+  --color-user-privileged:        #{$photon-color-link};
+  --color-user-privileged-alt:    #{$photon-color-link-alt};
+
+  --color-user-blocked:           #{$photon-color-link};
+  --color-user-blocked-alt:       #{$photon-color-link-alt};
+
+  --color-user-former-staff:      #4da073;
+  --color-user-former-staff-alt:  #78dca5;
+
+  // Tag Categories
+  --color-tag-general:            #{$photon-color-link};
+  --color-tag-general-alt:        #{$photon-color-link-alt};
+
+  --color-tag-artist:             #{darken(#f2ac08, 10%)};
+  --color-tag-artist-alt:         #{darken(#fbd67f, 25%)};
+
+  --color-tag-copyright:          #d0d;
+  --color-tag-copyright-alt:      #{darken(#ff5eff, 10%)};
+
+  --color-tag-character:          #0a0;
+  --color-tag-character-alt:      #{darken(#2bff2b, 20%)};
+
+  --color-tag-species:            #ed5d1f;
+  --color-tag-species-alt:        #{darken(#f6b295, 10%)};
+
+  --color-tag-invalid:            #{darken(#ff3d3d, 10%)};
+  --color-tag-invalid-alt:        #{lighten(#ff3d3d, 10%)};
+
+  --color-tag-meta:               #666;
+  --color-tag-meta-alt:           #fff;
+
+  --color-tag-lore:               #282;
+  --color-tag-lore-alt:           #{darken(#5fdb5f, 10%)};
+
+  --color-tag-pool:               #{darken(#d0b27a, 10%)};
+  --color-tag-pool-alt:           #{darken(wheat, 20%)};
+
+  // Spoilers
+  --color-spoiler-link:           #{$photon-color-link};
+  --color-spoiler-link-hover:     #{$photon-color-link-hover};
+}

app/views/static/theme.html.erb

@@ -23,6 +23,8 @@
       <option value="pony">Pony</option>
       <option value="serpent">Serpent</option>
       <option value="hotdog">Hotdog</option>
+      <option value="phonon">Phonon</option>
+      <option value="photon">Photon</option>
     </select>
 
     <label for="theme_extra">Embellishments</label>