Add ability to override theme via url param

app/assets/stylesheets/application.css

@@ -14,5 +14,6 @@
  *= require preview
  *= require asciinema-player
  *= require themes/default
+ *= require themes/solarized-dark
  *= require contributing
 */

app/models/playback_options.rb

@@ -5,8 +5,7 @@ class PlaybackOptions
   attribute :speed,     Float,   default: 1.0
   attribute :size,      String,  default: 'small'
   attribute :autoplay,  Boolean, default: false
-  attribute :hide_hud,  Boolean, default: false
-  attribute :renderer,  String,  default: 'Pre'
   attribute :benchmark, Boolean, default: false
+  attribute :theme,     String,  default: 'default'
 
 end

app/presenters/home_page_presenter.rb

@@ -3,7 +3,7 @@ class HomePagePresenter
   attr_reader :playback_options
 
   def initialize
-    @playback_options = PlaybackOptions.new(speed: 2.0, hide_hud: true)
+    @playback_options = PlaybackOptions.new(speed: 2.0)
   end
 
   def asciicast

app/views/asciicasts/_player.html.slim

@@ -13,7 +13,12 @@ javascript:
       var movie = new asciinema.Movie(model.get('width'), model.get('height'), source, snapshot, model.get('duration'));
 
       React.renderComponent(
-        asciinema.Player({ fontSize: '#{options.size}', autoPlay: #{options.autoplay}, movie: movie }),
+        asciinema.Player({
+          fontSize: '#{options.size}',
+          autoPlay: #{options.autoplay},
+          movie: movie,
+          theme: '#{h options.theme}',
+        }),
         $('.player')[0]
       );
     }

spec/presenters/home_page_presenter_spec.rb

@@ -34,10 +34,6 @@ describe HomePagePresenter do
     it "has speed set to 2.0" do
       expect(subject.speed).to eq(2.0)
     end
-
-    it "has HUD hidden" do
-      expect(subject.hide_hud).to be(true)
-    end
   end
 
   describe '#latest_asciicasts' do

vendor/assets/stylesheets/themes/solarized-dark.css

@@ -0,0 +1,35 @@
+.asciinema-theme-solarized-dark .asciinema-terminal {color: #839496;background-color: #002b36}
+.asciinema-theme-solarized-dark .fg-bg {color: #002b36}
+.asciinema-theme-solarized-dark .bg-fg {background-color: #839496}
+.asciinema-theme-solarized-dark .fg-0 { color: #073642 }
+.asciinema-theme-solarized-dark .bg-0 { background-color: #073642 }
+.asciinema-theme-solarized-dark .fg-1 { color: #dc322f }
+.asciinema-theme-solarized-dark .bg-1 { background-color: #dc322f }
+.asciinema-theme-solarized-dark .fg-2 { color: #859900 }
+.asciinema-theme-solarized-dark .bg-2 { background-color: #859900 }
+.asciinema-theme-solarized-dark .fg-3 { color: #b58900 }
+.asciinema-theme-solarized-dark .bg-3 { background-color: #b58900 }
+.asciinema-theme-solarized-dark .fg-4 { color: #268bd2 }
+.asciinema-theme-solarized-dark .bg-4 { background-color: #268bd2 }
+.asciinema-theme-solarized-dark .fg-5 { color: #d33682 }
+.asciinema-theme-solarized-dark .bg-5 { background-color: #d33682 }
+.asciinema-theme-solarized-dark .fg-6 { color: #2aa198 }
+.asciinema-theme-solarized-dark .bg-6 { background-color: #2aa198 }
+.asciinema-theme-solarized-dark .fg-7 { color: #eee8d5 }
+.asciinema-theme-solarized-dark .bg-7 { background-color: #eee8d5 }
+.asciinema-theme-solarized-dark .fg-8 { color: #002b36 }
+.asciinema-theme-solarized-dark .bg-8 { background-color: #002b36 }
+.asciinema-theme-solarized-dark .fg-9 { color: #cb4b16 }
+.asciinema-theme-solarized-dark .bg-9 { background-color: #cb4b16 }
+.asciinema-theme-solarized-dark .fg-10 { color: #586e75 }
+.asciinema-theme-solarized-dark .bg-10 { background-color: #586e75 }
+.asciinema-theme-solarized-dark .fg-11 { color: #657b83 }
+.asciinema-theme-solarized-dark .bg-11 { background-color: #657b83 }
+.asciinema-theme-solarized-dark .fg-12 { color: #839496 }
+.asciinema-theme-solarized-dark .bg-12 { background-color: #839496 }
+.asciinema-theme-solarized-dark .fg-13 { color: #6c71c4 }
+.asciinema-theme-solarized-dark .bg-13 { background-color: #6c71c4 }
+.asciinema-theme-solarized-dark .fg-14 { color: #93a1a1 }
+.asciinema-theme-solarized-dark .bg-14 { background-color: #93a1a1 }
+.asciinema-theme-solarized-dark .fg-15 { color: #fdf6e3 }
+.asciinema-theme-solarized-dark .bg-15 { background-color: #fdf6e3 }