diff --git a/docs/.vuepress/theme/global-components/MyMagicItemsButton.vue b/docs/.vuepress/theme/global-components/MyMagicItemsButton.vue
index e65009b..5121794 100644
--- a/docs/.vuepress/theme/global-components/MyMagicItemsButton.vue
+++ b/docs/.vuepress/theme/global-components/MyMagicItemsButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn color="primary" class="mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques<v-chip v-show="$store.state.myMagicItems.magicItems.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.myMagicItems.magicItems.length }}</v-chip></v-btn>
+  <v-btn color="primary" class="mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques<v-chip v-show="$store.state.myMagicItems.magicItems.length > 0" class="ml-2" color="#fff" small label text-color="#222">{{ $store.state.myMagicItems.magicItems.length }}</v-chip></v-btn>
 </template>
 
 <script>
diff --git a/docs/.vuepress/theme/global-components/MyMonstersButton.vue b/docs/.vuepress/theme/global-components/MyMonstersButton.vue
index 4d5f3a7..2322e5e 100644
--- a/docs/.vuepress/theme/global-components/MyMonstersButton.vue
+++ b/docs/.vuepress/theme/global-components/MyMonstersButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon bestiaire<v-chip v-show="$store.state.myMonsters.monsters.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.myMonsters.monsters.length }}</v-chip></v-btn>
+  <v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon bestiaire<v-chip v-show="$store.state.myMonsters.monsters.length > 0" class="ml-2" color="#fff" small label text-color="#222">{{ $store.state.myMonsters.monsters.length }}</v-chip></v-btn>
 </template>
 
 <script>
diff --git a/docs/.vuepress/theme/global-components/MySpellsButton.vue b/docs/.vuepress/theme/global-components/MySpellsButton.vue
index f475d78..a168d8d 100644
--- a/docs/.vuepress/theme/global-components/MySpellsButton.vue
+++ b/docs/.vuepress/theme/global-components/MySpellsButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon grimoire<v-chip v-show="$store.state.mySpells.spells.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.mySpells.spells.length }}</v-chip></v-btn>
+  <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon grimoire<v-chip v-show="$store.state.mySpells.spells.length > 0" class="ml-2" color="#fff" small label text-color="#222">{{ $store.state.mySpells.spells.length }}</v-chip></v-btn>
 </template>
 
 <script>
diff --git a/docs/.vuepress/theme/styles/_typography.scss b/docs/.vuepress/theme/styles/_typography.scss
index 05eea9d..615825a 100644
--- a/docs/.vuepress/theme/styles/_typography.scss
+++ b/docs/.vuepress/theme/styles/_typography.scss
@@ -48,3 +48,12 @@
 ul {
   margin-bottom: 16px;
 }
+
+.theme--dark.v-application {
+  color: #ddd;
+  background-color: #333;
+
+  h1, h2, h3, h4, h5, h6, table thead, strong {
+    color: #eee;
+  }
+}