beginnings of darkmode

src/style/atoms/_colours.scss

@@ -41,6 +41,7 @@ $attribute-die-border-color: #000;
 
 $attribute-die-color: #F00;
 $attribute-die-label-color: #FFF;
+$attribute-die-label-color-darkmode: #000;
 
 $attribute-die-co-color: #b3241a;
 $attribute-die-sm-color: #8259a3;
@@ -68,6 +69,8 @@ $attribute-die-flaw-text-color: #FFF;
 
 
 $attribute-label-color: #000;
+$attribute-label-color-darkmode: #FFF;
+
 
 $rollable-die-border-color: #000;
 

src/style/molecules/_attribute-die.scss

@@ -3,7 +3,7 @@
 @use "../atoms/assets";
 @use "sass:color";
 
-@mixin attributes {
+@mixin attributes($darkmode: false) {
   display: flex;
   position: relative;
   top: -10px;
@@ -36,7 +36,11 @@
       line-height: 48px;
       vertical-align: middle;
       text-align: center;
-      color: colours.$attribute-die-label-color;
+      @if $darkmode {
+        color: colours.$attribute-die-label-color-darkmode;
+      } @else {
+        color: colours.$attribute-die-label-color;
+      }
     }
 
     .name {
@@ -47,7 +51,12 @@
       line-height: 12px;
       vertical-align: middle;
       text-align: center;
-      color: colours.$attribute-label-color;
+      @if $darkmode {
+        color: colours.$attribute-label-color-darkmode;
+      } @else {
+        color: colours.$attribute-label-color;
+      }
+
     }
   }
 

src/style/molecules/_attributes.scss

@@ -10,9 +10,17 @@
     position: relative;
 
     .attributes {
-      @include attribute-die.attributes
+      @include attribute-die.attributes(false)
     }
 
   }
 
 }
+
+.theme-dark {
+  .dsa41.sheet.actor.character {
+    .attributes {
+      @include attribute-die.attributes(true)
+    }
+  }
+}

src/style/molecules/_tabs.scss

@@ -74,3 +74,29 @@
   }
 
 }
+
+// darkmode
+
+.theme-dark {
+
+  .dsa41.sheet {
+
+    .sheet-tabs {
+
+      a[data-action="tab"].active {
+        background: rgba(0, 0, 0, 0.3);
+
+        &::after {
+          background: rgba(0, 0, 0, 0.3);
+        }
+      }
+
+    }
+
+    section.tab {
+      background: rgba(0, 0, 0, 0.3);
+    }
+
+  }
+
+}

src/style/organisms/_dialog.scss

@@ -10,7 +10,7 @@
     height: 100%;
 
     .attributes {
-      @include attribute-die.attributes;
+      @include attribute-die.attributes(false);
       top: 0;
       left: 0;
       justify-content: center;
@@ -101,3 +101,14 @@
     }
   }
 }
+
+.theme-dark {
+  .dsa41.dialog.talent, .dsa41.dialog.eigenschaft {
+
+    section[data-application-part] {
+      .attributes {
+        @include attribute-die.attributes(true);
+      }
+    }
+  }
+}

src/style/organisms/_modify-liturgy.scss

@@ -10,7 +10,7 @@
     height: 100%;
 
     .attributes {
-      @include attribute-die.attributes;
+      @include attribute-die.attributes(false);
       top: 0;
       left: 0;
       justify-content: center;
@@ -101,3 +101,13 @@
     }
   }
 }
+
+.theme-dark {
+  .dsa41.dialog.liturgy {
+    section[data-application-part] {
+      .attributes {
+        @include attribute-die.attributes(true);
+      }
+    }
+  }
+}

src/templates/ui/partial-action-button.hbs

@@ -1,6 +1,5 @@
-<div class="player-action {{this.source}} {{this.type}}" data-action="openCombatAction">
+<div class="player-action {{this.source}} {{this.type}} {{this.cost}}" data-action="openCombatAction">
 
     <span class="name">{{this.name}}</span>
-    <span class="time">{{this.cost}}</span>
 
 </div>