Fix dark-theme styling

FlowFuse · Jun 17, 2022 · 167485e · 167485e
1 parent c446f2e
commit 167485e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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')
 }