dark theme wip

src/components/Board/AddList.vue

@@ -11,6 +11,12 @@
     <b-modal
       :id="modalId"
       :title="$t('board.addList.title')"
+      :header-bg-variant="nightMode ? 'dark' : null"
+      :header-text-variant="nightMode ? 'white' : null"
+      :body-bg-variant="nightMode ? 'dark' : null"
+      :body-text-variant="nightMode ? 'white' : null"
+      :footer-bg-variant="nightMode ? 'dark' : null"
+      :footer-text-variant="nightMode ? 'white' : null"
       @show="reset"
     >
       <form ref="addListForm" @submit.stop.prevent="submit">
@@ -49,7 +55,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   data() {
@@ -62,6 +68,7 @@ export default {
 
   computed: {
     ...mapState(['platform', 'board']),
+    ...mapGetters(['nightMode']),
 
     existingListNames() {
       return this.board.lists

src/components/Board/CreateBoard.vue

@@ -9,6 +9,12 @@
       id="create-board"
       title="Create board"
       size="lg"
+      :header-bg-variant="nightMode ? 'dark' : null"
+      :header-text-variant="nightMode ? 'white' : null"
+      :body-bg-variant="nightMode ? 'dark' : null"
+      :body-text-variant="nightMode ? 'white' : null"
+      :footer-bg-variant="nightMode ? 'dark' : null"
+      :footer-text-variant="nightMode ? 'white' : null"
       @show="resetBoard"
       @hidden="resetBoard"
     >
@@ -85,6 +91,7 @@
 
 <script>
 import PlatformPicker from '@/components/Board/PlatformPicker';
+import { mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -118,6 +125,10 @@ export default {
     };
   },
 
+  computed: {
+    ...mapGetters(['nightMode']),
+  },
+
   methods: {
     resetBoard() {
       this.board = {

src/components/Boards.vue

@@ -19,6 +19,8 @@
         v-for="board in sortedBoards"
         :key="board.id"
         no-body
+        :bg-variant="nightMode ? 'dark' : null"
+        :text-variant="nightMode ?  'white' : null"
         class="overflow-hidden clickable mt-3"
         @click="viewBoard(board.id)"
       >
@@ -123,7 +125,7 @@ export default {
 
   computed: {
     ...mapState(['boards', 'platforms', 'platformNames', 'wallpapers', 'gameLists', 'settings']),
-    ...mapGetters(['platformNames', 'sortedBoards']),
+    ...mapGetters(['platformNames', 'sortedBoards', 'nightMode']),
 
     hasLists() {
       return Object.keys(this.gameLists).length > 0;

src/components/Game/GameNotes.vue

@@ -10,6 +10,12 @@
     <b-modal
       id="notes"
       title="Game notes"
+      :header-bg-variant="nightMode ? 'dark' : null"
+      :header-text-variant="nightMode ? 'white' : null"
+      :body-bg-variant="nightMode ? 'dark' : null"
+      :body-text-variant="nightMode ? 'white' : null"
+      :footer-bg-variant="nightMode ? 'dark' : null"
+      :footer-text-variant="nightMode ? 'white' : null"
       @show="show"
     >
       <b-form-textarea
@@ -49,7 +55,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   props: {
@@ -66,6 +72,7 @@ export default {
 
   computed: {
     ...mapState(['notes']),
+    ...mapGetters(['nightMode']),
   },
 
   methods: {

src/components/Game/GameProgress.vue

@@ -10,6 +10,12 @@
     <b-modal
       id="progress"
       title="Set game progress"
+      :header-bg-variant="nightMode ? 'dark' : null"
+      :header-text-variant="nightMode ? 'white' : null"
+      :body-bg-variant="nightMode ? 'dark' : null"
+      :body-text-variant="nightMode ? 'white' : null"
+      :footer-bg-variant="nightMode ? 'dark' : null"
+      :footer-text-variant="nightMode ? 'white' : null"
       @show="show"
     >
       <b-input-group :prepend="`${localProgress}%`" class="mb-4" size="lg">
@@ -46,7 +52,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   props: {
@@ -63,6 +69,7 @@ export default {
 
   computed: {
     ...mapState(['progresses']),
+    ...mapGetters(['nightMode']),
   },
 
   methods: {

src/components/Lists/RenameList.vue

@@ -5,6 +5,12 @@
 
     <b-modal
       :id="modalId"
+      :header-bg-variant="nightMode ? 'dark' : null"
+      :header-text-variant="nightMode ? 'white' : null"
+      :body-bg-variant="nightMode ? 'dark' : null"
+      :body-text-variant="nightMode ? 'white' : null"
+      :footer-bg-variant="nightMode ? 'dark' : null"
+      :footer-text-variant="nightMode ? 'white' : null"
       :title="$t('board.list.renameList')"
       @show="getListName"
     >
@@ -45,7 +51,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   props: {
@@ -62,6 +68,7 @@ export default {
 
   computed: {
     ...mapState(['board']),
+    ...mapGetters(['nightMode']),
 
     modalId() {
       return `rename-list-${this.listIndex}`;

src/components/Settings/BoardSettings.vue

@@ -13,6 +13,12 @@
       id="board-settings"
       title="Board settings"
       size="lg"
+      :header-bg-variant="nightMode ? 'dark' : null"
+      :header-text-variant="nightMode ? 'white' : null"
+      :body-bg-variant="nightMode ? 'dark' : null"
+      :body-text-variant="nightMode ? 'white' : null"
+      :footer-bg-variant="nightMode ? 'dark' : null"
+      :footer-text-variant="nightMode ? 'white' : null"
       @show="init"
       @hide="hide"
     >
@@ -142,7 +148,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import PlatformPicker from '@/components/Board/PlatformPicker';
 
 export default {
@@ -164,6 +170,7 @@ export default {
 
   computed: {
     ...mapState(['board', 'user', 'wallpapers']),
+    ...mapGetters(['nightMode']),
   },
 
   methods: {

src/pages/About.vue

@@ -3,6 +3,9 @@
     <b-jumbotron
       :header="$t('about.title')"
       :lead="$t('about.subtitle')"
+      :bg-variant="nightMode ? 'dark' : ''"
+      :text-variant="nightMode ? 'white' : ''"
+      :border-variant="nightMode ? 'dark' : ''"
       header-level="5"
       fluid
     >
@@ -54,6 +57,7 @@
 <script>
 import VueMarkdown from 'vue-markdown';
 import moment from 'moment';
+import { mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -68,6 +72,8 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['nightMode']),
+
     currentYear() {
       return new Date().getFullYear();
     },

src/pages/Account.vue

@@ -3,12 +3,15 @@
     <b-jumbotron
       header="Account"
       header-level="5"
+      :bg-variant="nightMode ? 'dark' : ''"
+      :text-variant="nightMode ? 'white' : ''"
+      :border-variant="nightMode ? 'dark' : ''"
       fluid
     />
 
     <b-container>
       <b-list-group flush>
-        <b-list-group-item>
+        <b-list-group-item variant="dark">
           <b-avatar
             v-if="user && user.photoURL"
             size="xl"
@@ -22,39 +25,39 @@
           <p class="text-muted m-0">{{ user.email }}</p>
         </b-list-group-item>
 
-        <b-list-group-item>
+        <b-list-group-item variant="dark">
           <strong>Date Joined</strong>
           <p class="text-muted m-0">{{ formatDate(user.dateJoined) }}</p>
         </b-list-group-item>
 
-        <b-list-group-item>
+        <b-list-group-item variant="dark">
           <strong>Last login</strong>
           <p class="text-muted m-0">{{ formatDate(user.lastLogin) }}</p>
         </b-list-group-item>
 
-        <b-list-group-item>
+        <b-list-group-item variant="dark">
           <strong>Email Verified</strong>
           <p class="text-muted m-0">{{ user.emailVerified ? 'Yes' : 'No' }}</p>
         </b-list-group-item>
 
-        <b-list-group-item>
+        <b-list-group-item variant="dark">
           <strong>ID</strong>
           <p class="text-muted m-0 mb-2">{{ user.uid }}</p>
 
           <b-alert show>You can safely share this id when reporting bugs</b-alert>
         </b-list-group-item>
 
-        <b-list-group-item>
+        <b-list-group-item variant="dark">
           <b-button href="https://accounts.google.com/" target="_blank" variant="secondary">
             Manage Google Account
           </b-button>
         </b-list-group-item>
 
-        <b-list-group-item>
+        <b-list-group-item variant="dark">
           <delete-account />
         </b-list-group-item>
 
-        <b-list-group-item>
+        <b-list-group-item variant="dark">
           <sign-out />
         </b-list-group-item>
       </b-list-group>
@@ -66,7 +69,7 @@
 import SignOut from '@/components/Settings/SignOut';
 import DeleteAccount from '@/components/Settings/DeleteAccount';
 import moment from 'moment';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -76,6 +79,7 @@ export default {
 
   computed: {
     ...mapState(['user']),
+    ...mapGetters(['nightMode']),
   },
 
   methods: {