diff --git a/app/imports/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
index a59ece05..58f09555 100644
--- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue
+++ b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
@@ -2,8 +2,9 @@
   <v-toolbar
     app
     class="character-sheet-toolbar"
-    :color="creature && creature.color || 'secondary'"
-    dark
+    :color="toolbarColor"
+    :dark="isDark"
+    :light="!isDark"
     tabs
     dense
   >
@@ -122,6 +123,7 @@ import { theme } from '/imports/ui/theme.js';
 import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
 export default {
   props: {
@@ -137,6 +139,16 @@ export default {
     creatureId(){
       return this.$route.params.id;
     },
+    toolbarColor(){
+      if (this.creature && this.creature.color){
+        return this.creature.color;
+      } else {
+        return this.$vuetify.theme.secondary;
+      }
+    },
+    isDark(){
+      return isDarkColor(this.toolbarColor);
+    },
   },
   methods: {
     ...mapMutations([