diff --git a/index.html b/index.html
index ec831c41..6224224f 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <title>Pleroma</title>
     <link rel="stylesheet" href="/static/font/css/fontello.css">
     <link rel="stylesheet" href="/static/font/css/animation.css">
+    <link rel="stylesheet" href="/static/css/theme.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.scss b/src/App.scss
index ced2d069..377c6297 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,6 +1,5 @@
 @import './_variables.scss';
 #app {
-    background-color: $main-color;
     background-size: cover;
     background-attachment: fixed;
     background-repeat: no-repeat;
@@ -28,7 +27,6 @@ body {
 
 a {
     text-decoration: none;
-    color: $main-color;
 }
 
 .container {
@@ -55,7 +53,6 @@ a {
 }
 
 nav {
-    background: black;
     width: 100%;
     align-items: center;
     position: fixed;
@@ -72,27 +69,6 @@ main-router {
     flex: 1;
 }
 
-.status:hover {
-    background-color: $darkened-background;
-}
-
-.new-status-notification {
-    font-size: 1.1em;
-    background-color: $darkened-background;
-    border-bottom-color: darken($darkened-background, 5%);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-
-    &:hover {
-        background-color: darken($darkened-background, 5%);
-    }
-
-    p {
-        margin: 0px;
-        padding: 10px;
-    }
-}
-
 .status.compact {
     color: rgba(0, 0, 0, 0.42);
     font-weight: 300;
@@ -108,7 +84,6 @@ main-router {
 .panel {
     display: flex;
     flex-direction: column;
-    background-color: $main-background;
     margin: 0.5em;
 
     border-radius: 0.5em;
@@ -117,7 +92,6 @@ main-router {
 .panel-heading {
     border-radius: 0.5em 0.5em 0 0;
     background-size: cover;
-    background-color: bisque;
     padding-top: 0.3em;
     padding-bottom: 0.3em;
     text-align: center;
@@ -125,12 +99,12 @@ main-router {
 }
 
 .panel-footer {
-    background-color: bisque;
     border-radius: 0 0 0.5em 0.5em;
 }
 
 .panel-body > p {
-    margin: 1em;
+    padding: 1em;
+    margin: 0;
 }
 
 
@@ -176,10 +150,6 @@ main-router {
         font-weight: lighter;
         margin: 0;
     }
-
-    span {
-        color: $main-color;
-    }
 }
 
 .fa {
@@ -200,17 +170,12 @@ status-text-container {
     display: block;
 }
 
-attention {
-    color: $main-color;
-}
-
 .status-el {
     line-height: 18px;
 
     .notify {
         .avatar {
             border-width: 3px;
-            border-color: $main-color;
             border-style: solid;
         }
     }
diff --git a/src/App.vue b/src/App.vue
index 2cd6d079..18a8ad15 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="app" v-bind:style="style">
-    <nav class='container'>
+  <div id="app" v-bind:style="style" class="base02-background">
+    <nav class='container base01-background base04'>
       <div class='item'>
         <a route-to='friends-timeline' href="#">Pleroma FE</a>
       </div>
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index e16cc7cd..fe57924e 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -9,7 +9,7 @@
 
     <a class="image-attachment" v-if="type === 'image' && !hidden"
       :href="attachment.url" target="_blank">
-      <img referrerpolicy="no-referrer" :src="attachment.url"></img>
+      <img class="base05-border" referrerpolicy="no-referrer" :src="attachment.url"></img>
     </a>
 
     <video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
@@ -97,10 +97,6 @@
                   h1 {
                       font-size: 14px;
                       margin: 0px;
-
-                      a {
-                          color: black;
-                      }
                   }
               }
           }
@@ -111,7 +107,8 @@
 
               img {
                   width: 100%;
-                  border: 1px solid;
+                  border-style: solid;
+                  border-width: 1px;
                   border-radius: 0.5em;
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 60b3f044..00d3e062 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Status</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">Status</div>
     <div class="panel-body">
       <div class="timeline">
         <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 6eaf0607..fd53b505 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -8,14 +8,13 @@
 <script src="./favorite_button.js" ></script>
 
 <style lang='scss'>
-  @import '../../_variables.scss';
   .favorite-button {
       cursor: pointer;
       &:hover {
-        color: $main-color;
+        color: orange;
       }
   }
   .icon-star {
-      color: $main-color;
+      color: orange;
   }
 </style>
diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue
index af8ba5fe..88c477ab 100644
--- a/src/components/friends_timeline/friends_timeline.vue
+++ b/src/components/friends_timeline/friends_timeline.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Friends Timeline</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">Friends Timeline</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
     </div>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index be1e970c..c0169a08 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="login panel panel-default">
+  <div class="login panel panel-default base00-background">
     <!-- Default panel contents -->
-    <div class="panel-heading">
+    <div class="panel-heading base01-background base04">
       Log in
     </div>
     <div class="panel-body">
diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue
index 6287ca11..cf97f9ee 100644
--- a/src/components/mentions/mentions.vue
+++ b/src/components/mentions/mentions.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Mentions</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">Mentions</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
     </div>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index b709d914..2082f41a 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="nav-panel">
-    <div class="panel panel-default">
+    <div class="panel panel-default base01-background">
       <ul>
         <li v-if='currentUser'>
           <router-link to='/main/friends'>
@@ -38,7 +38,7 @@
  }
 
  .nav-panel li {
-     border-bottom: 1px solid silver;
+     border-bottom: 1px solid;
      padding: 0.5em;
      padding-left: 1em;
  }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 6f5dd721..ba5d8971 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="notifications">
-    <div class="panel panel-default">
-      <div class="panel-heading">Notifications ({{visibleNotifications.length}})</div>
+    <div class="panel panel-default base00-background">
+      <div class="panel-heading base01-background base04">Notifications ({{visibleNotifications.length}})</div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification">
           <a :href="notification.action.user.statusnet_profile_url">
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue
index 94cdaf17..282bb15b 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.vue
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">THE WHOLE KNOWN NETWORK</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
     </div>
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 22a2a2b8..ada40005 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Public Timeline</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">Public Timeline</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
     </div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 42499407..e043f6e2 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -120,10 +120,10 @@
  .status {
      padding: 0.5em;
      padding-right: 1em;
-     border-bottom: 1px solid silver;
+     border-bottom: 1px solid;
  }
 
  .status-el:last-child .status {
-     border: none
+     border-bottom: none
  }
 </style>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 7de3ffca..9338682c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="timeline">
     <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-      <div class="new-status-notification">
+      <div class="base01-background base05-border new-status-notification">
         <p class="text-center" >
           {{timeline.newStatusCount}} new statuses
         </p>
@@ -9,7 +9,7 @@
     </a>
     <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
     <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
-      <div class="new-status-notification">
+      <div class="base01-background base05-border new-status-notification">
         <p class="text-center" >
           Load older statuses.
         </p>
@@ -18,3 +18,16 @@
   </div>
 </template>
 <script src="./timeline.js"></script>
+
+<style lang="scss">
+ .new-status-notification {
+   border-style: solid;
+   border-width: 1px;
+   font-size: 1.1em;
+
+   p {
+     margin: 0px;
+     padding: 10px;
+   }
+ }
+</style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index d9e661a9..fb121e3c 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -26,7 +26,7 @@
         </div>
       </div>
     </div>
-    <div class="panel-body">
+    <div class="panel-body base00-background">
       <div class="user-counts">
         <div class="user-count">
           <h5>Statuses</h5>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 8ecf1391..c5a5ff43 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -4,7 +4,7 @@
 
       <user-card-content :user="user"></user-card-content>
 
-      <div class="panel-footer">
+      <div class="panel-footer base00-background">
         <post-status-form v-if='user'></post-status-form>
       </div>
     </div>
diff --git a/static/css/theme.css b/static/css/theme.css
new file mode 100644
index 00000000..803b051c
--- /dev/null
+++ b/static/css/theme.css
@@ -0,0 +1,38 @@
+.base00-background { background-color: #002b36; }
+.base01-background { background-color: #073642; }
+.base02-background { background-color: #586e75; }
+.base03-background { background-color: #657b83; }
+.base04-background { background-color: #839496; }
+.base05-background { background-color: #93a1a1; }
+.base06-background { background-color: #eee8d5; }
+.base07-background { background-color: #fdf6e3; }
+.base08-background { background-color: #dc322f; }
+.base09-background { background-color: #cb4b16; }
+.base0A-background { background-color: #b58900; }
+.base0B-background { background-color: #859900; }
+.base0C-background { background-color: #2aa198; }
+.base0D-background { background-color: #268bd2; }
+.base0E-background { background-color: #6c71c4; }
+.base0F-background { background-color: #d33682; }
+
+.base00 { color: #002b36; }
+.base01 { color: #073642; }
+.base02 { color: #586e75; }
+.base03 { color: #657b83; }
+.base04 { color: #839496; }
+.base05 { color: #93a1a1; }
+.base06 { color: #eee8d5; }
+.base07 { color: #fdf6e3; }
+.base08 { color: #dc322f; }
+.base09 { color: #cb4b16; }
+.base0A { color: #b58900; }
+.base0B { color: #859900; }
+.base0C { color: #2aa198; }
+.base0D { color: #268bd2; }
+.base0E { color: #6c71c4; }
+.base0F { color: #d33682; }
+
+.base05-border { border-color: #93a1a1; }
+
+a { color: #dc322f; } /* base08 */
+body { color: #93a1a1; } /* base05 */
