From 167485e07f299d0e98bd80184ee2076c7f6a4bbc Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Fri, 17 Jun 2022 15:27:37 +0100
Subject: [PATCH] Fix dark-theme styling

---
 docs/DesignLanguage.vue |  2 +-
 docs/index.scss         | 18 ++++++++++++++++--
 vue.config.js           | 10 +++++-----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/docs/DesignLanguage.vue b/docs/DesignLanguage.vue
index ce08cbd..d84d025 100644
--- a/docs/DesignLanguage.vue
+++ b/docs/DesignLanguage.vue
@@ -1,5 +1,5 @@
 <template>
-    <nav>
+    <nav :class="{'ff-bg-light': theme === 'light', 'ff-bg-dark': theme === 'dark'}">
         <h2 class="">Components</h2>
         <ul id="grouplist">
             <li v-for="g in groups" :key="g.name">
diff --git a/docs/index.scss b/docs/index.scss
index 201c727..052040a 100644
--- a/docs/index.scss
+++ b/docs/index.scss
@@ -27,12 +27,26 @@ main {
 }
 
 nav {
-    background-color: $ff-grey-800;
-    color: $ff-white;
     position: absolute;
     width: 300px;
 }
 
+nav.ff-bg-light {
+    background-color: $ff-grey-800;
+    color: $ff-white;
+    h2, h3 {
+        color: $ff-white;
+    }
+}
+
+nav.ff-bg-dark {
+    background-color: $ff-grey-900;
+    color: $ff-white;
+    h2, h3 {
+        color: $ff-white;
+    }
+}
+
 p {
     line-height: 1.5rem;
 }
diff --git a/vue.config.js b/vue.config.js
index dd6d14a..a4497e1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,10 +7,10 @@ module.exports = {
         lintStyleOnBuild: true,
         stylelint: {}
     },
-    // pages: {
-    //     index: {
-    //         entry: 'docs/main.js'
-    //     }
-    // },
+    pages: {
+        index: {
+            entry: 'docs/main.js'
+        }
+    },
     outputDir: path.resolve(__dirname, 'dist/docs')
 }