diff --git a/.ruby-version b/.ruby-version
new file mode 100644
index 0000000..35cee72
--- /dev/null
+++ b/.ruby-version
@@ -0,0 +1 @@
+2.4.3
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..5761cb3
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,2 @@
+source "https://rubygems.org"
+gem 'github-pages'
diff --git a/_data/themes.yml b/_data/themes.yml
new file mode 100644
index 0000000..3495a18
--- /dev/null
+++ b/_data/themes.yml
@@ -0,0 +1,6 @@
+- name: "Default"
+  url: "/css/default_theme.css"
+- name: "Dark"
+  url: "/css/dark_theme.css"
+- name: "Light"
+  url: "/css/light_theme.css"
diff --git a/_includes/head.html b/_includes/head.html
index 0604854..1d5cb31 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -3,6 +3,7 @@
 	templated.co @templatedco
 	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 -->
+
 <head>
 
     <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
@@ -14,10 +15,26 @@
     <script src="{{ site.baseurl }}/js/skel.min.js"></script>
     <script src="{{ site.baseurl }}/js/skel-layers.min.js"></script>
     <script src="{{ site.baseurl }}/js/init.js"></script>
+
+    <script>
+        function setTheme(themeUrl) {
+            var themeLink = document.getElementById('theme-link');
+            themeLink.href = themeUrl;
+            localStorage.setItem('theme', themeUrl);
+        }
+
+        var storedTheme = localStorage.getItem('theme');
+        if (storedTheme) {
+            var themeLink = document.getElementById('theme-link');
+            themeLink.href = storedTheme;
+        }
+    </script>
+
+    </script>
     <noscript>
         <link rel="stylesheet" href="{{ site.baseurl }}/css/skel.css" />
         <link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" />
         <link rel="stylesheet" href="{{ site.baseurl }}/css/style-xlarge.css" />
     </noscript>
     {% include analytics.html %}
-</head>
+</head>
\ No newline at end of file
diff --git a/_includes/header.html b/_includes/header.html
index 374f933..53ccdf3 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -14,6 +14,8 @@
                     <li><a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
                   {% endif %}
             {% endfor %}
+            {% include theme-switcher.html %}
+
             <!--  <li><a href="#" class="button special">Sign Up</a></li> -->
         </ul>
     </nav>
diff --git a/_includes/theme-switcher.html b/_includes/theme-switcher.html
new file mode 100644
index 0000000..8ccf12c
--- /dev/null
+++ b/_includes/theme-switcher.html
@@ -0,0 +1,9 @@
+{% assign themes = site.data.themes %}
+{% if themes %}
+  <div id="theme-switcher">
+    {% for theme in themes %}
+      <a href="javascript:setTheme('{{ theme.url }}')" class="button small {{ theme.name }}">{{ theme.name }}</a>
+
+    {% endfor %}
+  </div>
+{% endif %}
diff --git a/css/dark_theme.css b/css/dark_theme.css
new file mode 100644
index 0000000..a2b5d71
--- /dev/null
+++ b/css/dark_theme.css
@@ -0,0 +1,21 @@
+body {
+    background-color: #333;
+    color: #fff;
+  }
+  
+  a {
+    color: #0cf;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    color: #fff;
+  }
+  
+  .container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 15px;
+  }
+  
+  /* Other styles go here... */
+  
\ No newline at end of file
diff --git a/css/default_theme.css b/css/default_theme.css
new file mode 100644
index 0000000..4a31f88
--- /dev/null
+++ b/css/default_theme.css
@@ -0,0 +1,21 @@
+body {
+    background-color: #f5f5f5;
+    color: #333;
+  }
+  
+  a {
+    color: #007bff;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    color: #333;
+  }
+  
+  .container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 15px;
+  }
+  
+  /* Other styles go here... */
+  
\ No newline at end of file
diff --git a/css/light_theme.css b/css/light_theme.css
new file mode 100644
index 0000000..f75ae5f
--- /dev/null
+++ b/css/light_theme.css
@@ -0,0 +1,21 @@
+body {
+    background-color: #fff;
+    color: #333;
+  }
+  
+  a {
+    color: #007bff;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    color: #333;
+  }
+  
+  .container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 15px;
+  }
+  
+  /* Other styles go here... */
+  
\ No newline at end of file
