Dark theme

src/components/Board/AddList.vue

@@ -3,6 +3,8 @@
   <b-card
     v-if="active || empty"
     class="flex-shrink-0"
+    :bg-variant="darkTheme ? 'info' : 'light'"
+    :text-variant="darkTheme ? 'light' : 'dark'"
     no-body
     v-click-outside="reset"
   >
@@ -24,7 +26,7 @@
           <b-button
             split
             variant="primary"
-            :disabled="saving || isDuplicate || !listName"
+            :disabled="saving || !listName"
             @click.stop="submit"
           >
             <b-spinner v-if="saving" small />
@@ -45,7 +47,7 @@
 
   <b-button
     v-else
-    variant="light"
+    :variant="darkTheme ? 'dark' : 'light'"
     @click.stop="showForm"
   >
     <i class="fas fa-plus fa-fw" aria-hidden />
@@ -53,7 +55,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   props: {
@@ -70,6 +72,7 @@ export default {
 
   computed: {
     ...mapState(['platform', 'board']),
+    ...mapGetters(['darkTheme']),
 
     existingListNames() {
       return this.board.lists

src/components/Board/MiniBoard.vue

@@ -1,14 +1,15 @@
 <!-- TODO: use board thumbnail once fully migrated -->
 <template lang="html">
   <div
-    :class="['mini-board overflow-hidden rounded cursor-pointer m-0', { 'bg-light': !board.backgroundColor }]"
+    :class="['mini-board overflow-hidden rounded cursor-pointer m-0', miniBoardClass]"
     :style="miniBoardStyles"
   >
     <header class="text-small py-1 px-2 d-flex align-items-center justify-content-between">
-      <span :class="['mr-1 mb-1', { 'text-outlined text-white': backgroundUrl }]">
+      <span :class="['mr-1 mb-1', { 'text-outlined': hasCustomBackground || darkTheme } ]">
         {{ board.name }}
       </span>
 
+
       <b-badge
         v-if="showPublicIndicator"
         class="bg-warning"
@@ -18,7 +19,19 @@
       </b-badge>
     </header>
 
-    <div v-if="isStandardBoard" class="lists rounded overflow-hidden justify-content-center">
+    <div v-if="isTierBoard">
+      <div
+        class="tier d-flex mx-2"
+        v-for="tier in board.lists"
+        style="margin-bottom: 1px;"
+        :key="tier.id"
+      >
+        <b-avatar :style="`background-color: ${tier.backgroundColor}`" square text=" " size="20" />
+        <b-avatar v-for="game in tier.games" :key="game" square text=" " style="margin-right: 1px;" size="20" />
+      </div>
+    </div>
+
+    <div v-else-if="isStandardBoard" class="lists rounded overflow-hidden justify-content-center">
       <div
         class="list basic rounded overflow-hidden border align-self-start"
       >
@@ -43,8 +56,8 @@
 
     <div v-else class="lists rounded overflow-hidden">
       <div
-        v-for="list in board.lists"
-        :key="list.name"
+        v-for="(list, listIndex) in board.lists"
+        :key="listIndex"
         class="list rounded overflow-hidden ml-2 border align-self-start"
       >
         <template v-if="list.games.length">
@@ -68,7 +81,8 @@
 </template>
 
 <script>
-import { BOARD_TYPE_STANDARD } from '@/constants';
+import { BOARD_TYPE_STANDARD, BOARD_TYPE_TIER } from '@/constants';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   props: {
@@ -82,6 +96,19 @@ export default {
   },
 
   computed: {
+    ...mapState(['settings']),
+    ...mapGetters(['darkTheme']),
+
+    hasCustomBackground() {
+      return this.board?.backgroundColor || this.board?.backgroundUrl;
+    },
+
+    miniBoardClass() {
+      if (this.hasCustomBackground) return;
+
+      return this.darkTheme ? 'bg-info' : 'bg-light';
+    },
+
     showPublicIndicator() {
       return this.$route.name !== 'explore' && this.board?.isPublic;
     },
@@ -90,6 +117,10 @@ export default {
       return this.board?.type === BOARD_TYPE_STANDARD;
     },
 
+    isTierBoard() {
+      return this.board?.type === BOARD_TYPE_TIER;
+    },
+
     firstList() {
       const [firstList] = this.board?.lists;
 
@@ -122,7 +153,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-$boardHeight: 200px;
+$boardHeight: 220px;
 
 .mini-board {
   background-repeat: no-repeat;

src/components/GameCards/GameCardCompact.vue

@@ -1,6 +1,8 @@
 <template lang="html">
   <b-card
     no-body
+    :bg-variant="darkTheme ? 'info' : 'light'"
+    :text-variant="darkTheme ? 'light' : 'dark'"
     class="cursor-pointer"
   >
     <b-form-row v-if="game && game.name">

src/components/GameCards/GameCardDefault.vue

@@ -1,7 +1,8 @@
 <template lang="html">
   <b-card
     no-body
-    bg-variant="transparent"
+    :bg-variant="darkTheme ? 'info' : 'white'"
+    :text-variant="darkTheme ? 'white' : 'dark'"
     class="cursor-pointer"
   >
     <b-form-row
@@ -22,7 +23,7 @@
         <b-card-body body-class="p-2">
           <b-card-title
             :class="`mb-0 ${highlightCompletedGame ? 'text-success' : ''}`"
-            title-tag="h4"
+            title-tag="p"
           >
             {{ game.name }}
           </b-card-title>

src/components/GameCards/GameCardGrid.vue

@@ -2,6 +2,8 @@
   <b-card
     no-body
     class="cursor-pointer text-center"
+    :bg-variant="darkTheme ? 'info' : 'white'"
+    :text-variant="darkTheme ? 'white' : 'dark'"
     img-top
   >
     <div class="position-relative cursor-pointer rounded align-self-end card overflow-hidden border-0 m-1">

src/components/GameCards/GameCardText.vue

@@ -1,6 +1,8 @@
 <template lang="html">
   <b-card
     no-body
+    :bg-variant="darkTheme ? 'info' : 'light'"
+    :text-variant="darkTheme ? 'light' : 'dark'"
     class="cursor-pointer"
   >
     <b-row no-gutters v-if="game && game.name">

src/store/getters.js

@@ -6,6 +6,7 @@ import presetHTML5 from '@bbob/preset-html5'
 import orderby from 'lodash.orderby';
 
 export default {
+  darkTheme: ({ settings }) => settings?.darkTheme || false,
   sortedBoards: ({ boards }) => orderby(boards, 'lastUpdated', 'desc'),
 
   isBoardOwner: ({ board, user }) => {

src/styles/_colors.scss

@@ -5,9 +5,9 @@ $warning: #F39C12 !default;
 $success: #23cd69 !default;
 $white: #f8f8ff !default;
 $black: #222222 !default;
-$info: #3C5275 !default;
+$info: #444444 !default;
 $light: #dee4e7 !default;
-$dark: #37474f !default;
+$dark: #171717 !default;
 $secondary: #6D6969 !default;
 
 $theme-colors: () !default;

src/styles/_dark-theme.scss

@@ -0,0 +1,4 @@
+main.dark {
+  background: var(--dark);
+  color: var(--light);
+}