diff --git a/src/App.vue b/src/App.vue
index 6d68691d..68cbe14b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
   <v-app
     id="app-wrapper"
   >
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
     <router-view />
   </v-app>
 </template>
diff --git a/src/app.js b/src/app.js
index 608e7490..f4551704 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,6 +6,7 @@ import About from './pages/About.vue';
 import Vuetify from 'vuetify';
 import VueRouter from 'vue-router';
 import VueCookies from 'vue-cookies';
+import colors from 'vuetify/es5/util/colors';
 import './css/app.css';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -18,7 +19,27 @@ library.add(faSignInAlt, faSignOutAlt, faCloudDownloadAlt, faCloudUploadAlt);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
-Vue.use(Vuetify);
+Vue.use(Vuetify, {
+  theme: {
+    primary: '#F26521',
+    defaultPrimary: '#1976D2',
+    discordOrange: '#F26521',
+    discordPurple: '#7289DA',
+    crlogo: colors.blueGrey.darken2,
+    crlogoDark: colors.blueGrey.darken2,
+    crlogoLight: colors.blueGrey.lighten5,
+    background: colors.grey.darken4,
+    background2: colors.grey.darken4,
+    search: colors.grey.darken4,
+    backgroundDark: colors.grey.darken4,
+    backgroundLight: colors.grey.lighten2,
+    background2Light: colors.grey.lighten4,
+    searchLight: colors.shades.white,
+    warning: colors.yellow.base,
+    success: colors.green.base,
+    error: colors.red.base
+  }
+});
 Vue.use(VueCookies);
 Vue.use(VueRouter);
 
diff --git a/src/components/ClassSearch.vue b/src/components/ClassSearch.vue
index 66658bf4..f7e5cbc0 100644
--- a/src/components/ClassSearch.vue
+++ b/src/components/ClassSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container :style="searchHeight + 'display: flex; flex-direction:column;'">
+  <v-container :style="searchHeight + 'display: flex; flex-direction:column;'" class="search">
     <div>
       <filter-set v-model="chosenFilters.girInput" :label="'GIR'" :filters="allFilters.girInput" />
       <filter-set v-model="chosenFilters.hassInput" :label="'HASS'" :filters="allFilters.hassInput" />
diff --git a/src/components/RoadTabs.vue b/src/components/RoadTabs.vue
index ae7fe10f..116366ae 100644
--- a/src/components/RoadTabs.vue
+++ b/src/components/RoadTabs.vue
@@ -4,7 +4,7 @@
       v-model="tabRoad"
       show-arrows
     >
-      <v-tabs-slider />
+      <v-tabs-slider color="primary" />
       <v-tab
         v-for="roadId in Object.keys(roads)"
         :key="roadId"
@@ -17,7 +17,7 @@
         </v-btn>
       </v-tab>
       <v-dialog v-model="editDialog" max-width="600" @input="newRoadName = ''">
-        <v-card>
+        <v-card :dark="$store.state.useDarkTheme">
           <v-btn icon flat style="float:right" @click="editDialog = false">
             <v-icon>close</v-icon>
           </v-btn>
@@ -76,7 +76,7 @@
             />
             <v-layout row>
               <v-flex xs6>
-                <v-switch v-model="duplicateRoad" label="Duplicate existing" />
+                <v-switch v-model="duplicateRoad" color="primary" label="Duplicate existing" />
               </v-flex>
               <v-flex>
                 <v-select v-model="duplicateRoadSource" :disabled="!duplicateRoad" :items="Object.keys(roads)">
diff --git a/src/components/Semester.vue b/src/components/Semester.vue
index c8c657a1..fadb67cd 100644
--- a/src/components/Semester.vue
+++ b/src/components/Semester.vue
@@ -35,7 +35,7 @@
           </v-flex>
         </v-layout>
         <v-layout v-else>
-          <v-flex xs10 :style="{ 'color': semData.textColor }">
+          <v-flex xs10 :class="semData.textColor+'--text '+textBrightness">
             {{ semData.message }}
           </v-flex>
         </v-layout>
@@ -43,7 +43,6 @@
     </v-container>
 
     <v-container
-      class="lighten-3"
       fluid
       grid-list-md
       :class="semData.bgColor"
@@ -93,6 +92,10 @@ export default {
     };
   },
   computed: {
+    textBrightness () {
+      var value = 'text--' + (this.$store.state.useDarkTheme ? 'lighten-2' : 'darken-4');
+      return value;
+    },
     isActiveRoad () {
       return this.$store.state.activeRoad === this.roadID;
     },
@@ -176,50 +179,50 @@ export default {
       if (this.addingFromCard || this.draggingOver) {
         if (!this.subjectsLoaded) {
           return {
-            bgColor: 'red',
+            bgColor: 'error',
             message: 'Loading subjects... give us a minute',
-            textColor: 'DarkRed'
+            textColor: 'error'
           };
         } else if (this.itemAdding === undefined) {
           return {
-            bgColor: 'red',
+            bgColor: 'error',
             message: 'If you see this message, contact courseroad@mit.edu and tell them "710".',
-            textColor: 'DarkRed'
+            textColor: 'error'
           };
         } else if (this.index === 0 || this.offeredNow) {
           return {
-            bgColor: 'green',
+            bgColor: 'success',
             message: 'Add class here',
-            textColor: 'DarkGreen'
+            textColor: 'success'
           };
         } else if (this.itemAddingNoLongerOffered) {
           return {
-            bgColor: 'yellow',
+            bgColor: 'warning',
             message: 'Subject no longer offered',
-            textColor: 'DarkGoldenRod'
+            textColor: 'warning'
           };
         } else if (this.itemAddingNotCurrentlyOffered) {
           return {
-            bgColor: 'yellow',
+            bgColor: 'warning',
             message: 'Subject not offered this year',
-            textColor: 'DarkGoldenRod'
+            textColor: 'warning'
           };
         } else if (this.isSameYear) {
           return {
-            bgColor: 'red',
+            bgColor: 'error',
             message: 'Subject not available this semester',
-            textColor: 'DarkRed'
+            textColor: 'error'
           };
         } else {
           return {
-            bgColor: 'yellow',
+            bgColor: 'warning',
             message: 'Subject may not be available this semester',
-            textColor: 'DarkGoldenRod'
+            textColor: 'warning'
           };
         }
       }
       return {
-        bgColor: 'grey',
+        bgColor: 'background',
         message: '',
         textColor: ''
       };
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 529883c0..9e9935a1 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -2,6 +2,7 @@
 <template>
   <v-app
     id="app-wrapper"
+    :dark="useDark"
   >
     <v-dialog v-model="showMobile" fullscreen>
       <v-card height="100%">
@@ -30,7 +31,7 @@
         </v-container>
       </v-card>
     </v-dialog>
-    <v-toolbar fixed app dense class="elevation-2">
+    <v-toolbar fixed app dense class="elevation-2 background2">
       <road-tabs
         slot="extension"
         @delete-road="$refs.authcomponent.deleteRoad($event)"
@@ -76,7 +77,7 @@
       <v-container fill-height style="padding: 0;">
         <v-layout fill-height column>
           <v-layout shrink style="padding: 14px; padding-bottom: 0;" row align-center>
-            <v-flex shrink class="blue-grey lighten-5" style="user-select: none; color: inherit; text-decoration: none; border-radius: 2px; padding: 6px 8px; display: inline-block;">
+            <v-flex shrink class="crlogo" style="user-select: none; color: inherit; text-decoration: none; border-radius: 2px; padding: 6px 8px; display: inline-block;">
               <v-icon size="1.3em" color="#00b300">
                 check_box
               </v-icon>
@@ -84,6 +85,18 @@
                 C o u r s e R o a d
               </h3>
             </v-flex>
+            <v-flex>
+              <v-btn
+                class="mx-2 elevation-2"
+                dark
+                fab
+                small
+                color="primary"
+                @click="useDark = !useDark"
+              >
+                <v-icon>mdi-{{ useDark ? 'white-balance-sunny' : 'weather-night' }}</v-icon>
+              </v-btn>
+            </v-flex>
             <v-flex>
               <router-link to="/about" style="float: right;">
                 About
@@ -165,7 +178,7 @@
 
     <v-footer v-if="!dismissedOld || !dismissedCookies" fixed style="height: unset;">
       <v-layout column>
-        <v-flex v-if="!dismissedOld" class="lime accent-1 py-1 px-2">
+        <v-flex v-if="!dismissedOld" class="discord-purple py-1 px-2">
           <v-layout row align-center>
             <v-flex>
               Looking for the old courseroad?  Visit the old website <a target="_blank" href="https://courseroad.mit.edu/old">here</a> and export your roads!
@@ -178,7 +191,7 @@
           </v-layout>
         </v-flex>
         <v-divider v-if="!dismissedOld && !dismissedCookies" />
-        <v-flex v-if="!dismissedCookies" class="lime accent-3 py-1 px-2">
+        <v-flex v-if="!dismissedCookies" class="discordPurple py-1 px-2">
           <v-layout row align-center>
             <v-flex>
               This website uses cookies and session storage to store your data and login token, and important features like saving roads will not work without them.
@@ -254,6 +267,19 @@ export default {
     };
   },
   computed: {
+    useDark: {
+      get () {
+        return this.$store.state.useDarkTheme;
+      },
+      set (value) {
+        this.$store.commit('setUseDarkTheme', value);
+        this.$vuetify.theme.primary = value ? this.$vuetify.theme.discordOrange : this.$vuetify.theme.defaultPrimary;
+        this.$vuetify.theme.background = value ? this.$vuetify.theme.backgroundDark : this.$vuetify.theme.backgroundLight;
+        this.$vuetify.theme.background2 = value ? this.$vuetify.theme.backgroundDark : this.$vuetify.theme.background2Light;
+        this.$vuetify.theme.search = value ? this.$vuetify.theme.backgroundDark : this.$vuetify.theme.searchLight;
+        this.$vuetify.theme.crlogo = value ? this.$vuetify.theme.crlogoDark : this.$vuetify.theme.crlogoLight;
+      }
+    },
     activeRoad: {
       get () {
         return this.$store.state.activeRoad;
diff --git a/src/stores/courseData.js b/src/stores/courseData.js
index 71a8cae0..62344a01 100644
--- a/src/stores/courseData.js
+++ b/src/stores/courseData.js
@@ -10,6 +10,7 @@ const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSS000Z';
 const store = new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   state: {
+    useDarkTheme: true,
     currentSemester: 1,
     activeRoad: '$defaultroad$',
     addingFromCard: false,
@@ -48,6 +49,9 @@ const store = new Vuex.Store({
     }
   },
   mutations: {
+    setUseDarkTheme (state, newValue) {
+      state.useDarkTheme = newValue;
+    },
     addClass (state, newClass) {
       state.roads[state.activeRoad].contents.selectedSubjects[newClass.semester].push(newClass);
       Vue.set(state.roads[state.activeRoad], 'changed', moment().format(DATE_FORMAT));