design pages now uses the COLOR_SCHEMES

app/assets/stylesheets/highlight/dark.scss

-.black .highlight {
+.dark .highlight {
 
   background-color: #333;
 

app/helpers/application_helper.rb

@@ -4,12 +4,23 @@ require 'uri'
 module ApplicationHelper
   COLOR_SCHEMES = {
     1 => 'white',
-    2 => 'black',
+    2 => 'dark',
     3 => 'solarized-dark',
     4 => 'monokai',
   }
   COLOR_SCHEMES.default = 'white'
 
+  # Helper method to access the COLOR_SCHEMES
+  #
+  # The keys are the `color_scheme_ids`
+  # The values are the `name` of the scheme.
+  #
+  # The preview images are `name-scheme-preview.png`
+  # The stylesheets should use the css class `.name`
+  def color_schemes
+    COLOR_SCHEMES.freeze
+  end
+
   # Check if a particular controller is the current one
   #
   # args - One or more controller names to check

app/views/profiles/design.html.haml

@@ -40,23 +40,9 @@
         %i.icon-ok
         Saved
     .code_highlight_opts
-      = label_tag do
-        .prev
-          = image_tag "white.png"
-        = f.radio_button :color_scheme_id, 1
-        White
-      = label_tag do
-        .prev
-          = image_tag "dark.png"
-        = f.radio_button :color_scheme_id, 2
-        Dark
-      = label_tag do
-        .prev
-          = image_tag "solarized_dark.png"
-        = f.radio_button :color_scheme_id, 3
-        Solarized Dark
-      = label_tag do
-        .prev
-          = image_tag "monokai.png"
-        = f.radio_button :color_scheme_id, 4
-        Monokai
+      - color_schemes.each do |color_scheme_id, color_scheme|
+        = label_tag do
+          .prev
+            = image_tag "#{color_scheme}-scheme-preview.png"
+          = f.radio_button :color_scheme_id, color_scheme_id
+          = color_scheme.gsub(/[-_]+/, ' ').humanize

features/steps/profile/profile.rb

@@ -74,7 +74,7 @@ class Profile < Spinach::FeatureSteps
 
   When "I change my code preview theme" do
     within '.code-preview-theme' do
-      choose "Solarized Dark"
+      choose "Solarized dark"
     end
   end