diff --git a/app/imports/ui/components/AbilityListTile.vue b/app/imports/ui/components/AbilityListTile.vue
index 2ff7e0ca..60ed39e4 100644
--- a/app/imports/ui/components/AbilityListTile.vue
+++ b/app/imports/ui/components/AbilityListTile.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-	<v-list-tile class="ability-list-tile white" v-on="hasClickListener ? {click} : {}">
+	<v-list-tile class="ability-list-tile" v-on="hasClickListener ? {click} : {}">
 
 		<v-list-tile-action class="mr-4">
 			<div class="display-1 mod">
@@ -42,6 +42,9 @@ export default {
 </script>
 
 <style lang="css" scoped>
+	.ability-list-tile {
+		background: inherit;
+	}
 	.ability-list-tile >>> .v-list__tile {
 		height: 88px;
 	}
@@ -53,6 +56,9 @@ export default {
 		font-size: 24px !important;
 		color: rgba(0, 0, 0, 0.54);
 	}
+	.theme--dark .value {
+		color: rgba(255, 255, 255, 0.54);
+	}
 	.mod, .value {
 		text-align: center;
 		width: 100%;
diff --git a/app/imports/ui/theme.js b/app/imports/ui/theme.js
index f592b925..d0f2679b 100644
--- a/app/imports/ui/theme.js
+++ b/app/imports/ui/theme.js
@@ -1,7 +1,7 @@
 const theme = {
   primary: "#B71C1C",
   secondary: "#424242",
-  accent: "#f44336",
+  accent: "#B71C1C",
   error: "#FF6D00",
   warning: "#FFB300",
   info: "#5C6BC0",
@@ -11,7 +11,7 @@ const theme = {
 const darkTheme = {
   primary: "#f44336",
   secondary: "#424242",
-  accent: "#B71C1C",
+  accent: "#f44336",
   error: "#FF6D00",
   warning: "#FFB300",
   info: "#5C6BC0",