Dark Mode Support

README.md

@@ -1,6 +1,5 @@
 # Vue JSON Component
 
-
 [![npm version](https://badge.fury.io/js/vue-json-component.svg)](https://badge.fury.io/js/vue-json-component) [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/) ![npm bundle size](https://img.shields.io/bundlephobia/min/vue-json-component.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 [Demo](http://tylerkrupicka.com/vue-json-component/)
@@ -13,8 +12,8 @@ A collapsable tree view for JSON. This package has some similarites with [vue-js
 
 This package has a few major improvements over predecessors: builds, styles, and customization. For builds, this package ships CommonJS, Module, and UNPKG builds with no dependencies. [vue-json-tree-view](https://github.com/michaelfitzhavey/vue-json-tree-view) bundles in lots of dependencies -- including lodash. I also export global Vue imports, local Vue imports, and TypeScript declarations. The code itself is about as small as it can be while being easy to follow.
 
-* [vue-json-tree-view (84KB)](https://bundlephobia.com/result?p=vue-json-tree-view@2.1.4)
-* [vue-json-component (9KB)](https://bundlephobia.com/result?p=vue-json-component@0.3.0)
+- [vue-json-tree-view (84KB)](https://bundlephobia.com/result?p=vue-json-tree-view@2.1.4)
+- [vue-json-component (9KB)](https://bundlephobia.com/result?p=vue-json-component@0.3.0)
 
 The styles in this package are all scoped, with key colors still being customizable. There are no extra margins or overflow rules and text properties are all inherited from the page. This makes the view much easier to integrate anywhere you need it.
 
@@ -32,17 +31,17 @@ yarn add vue-json-component
 ### Import Locally
 
 ```js
-import { JSONView } from "vue-json-component";
+import { JSONView } from 'vue-json-component';
 export default Vue.extend({
-  components: { "json-view": JSONView }
+  components: { 'json-view': JSONView }
 });
 ```
 
 ### Import Globally
 
 ```js
-import JSONView from "vue-json-component";
-Vue.use(JSONView)
+import JSONView from 'vue-json-component';
+Vue.use(JSONView);
 ```
 
 ### Use
@@ -56,39 +55,55 @@ Vue.use(JSONView)
 
 ### Customize
 
-The font size and font family are inherited from the page.
+The font size and font family are inherited from the page. The component now supports dark mode, and has switched to a CSS Variables based implementation.
 
 #### Props
 
-* **data** (JSON): The valid JSON object you want rendered as a tree.
-* **rootKey** (String): The name of the top level root key; defaults to root.
-* **maxDepth** (Number): Depth of the tree that is open at first render; defaults to 1.
-* **styles** (Object): Override the color styles. Defaults shown below.
-
-```js
-const defaultStyles = {
-  key: "#002b36",
-  valueKey: "#073642",
-  string: "#268bd2",
-  number: "#2aa198",
-  boolean: "#cb4b16",
-  null: "#6c71c4",
-  arrowSize: "6px"
-};
+- **data** (JSON): The valid JSON object you want rendered as a tree.
+- **rootKey** (String): The name of the top level root key; defaults to root.
+- **maxDepth** (Number): Depth of the tree that is open at first render; defaults to 1.
+- **colorScheme (New)** (String): Setting to 'dark' enables dark mode.
+
+#### Styles
+
+⚠️ This API has changed to CSS Variables. All of these can be customized for light _and_ dark mode as is documented below.
+
+```css
+--vjc-key-color: #0977e6;
+--vjc-valueKey-color: #073642;
+--vjc-string-color: #268bd2;
+--vjc-number-color: #2aa198;
+--vjc-boolean-color: #cb4b16;
+--vjc-null-color: #6c71c4;
+--vjc-arrow-size: 6px;
+--vjc-arrow-color: #444;
+--vjc-hover-color: rgba(0, 0, 0, 0.15);
 ```
 
 ### Example
+
 ```js
 <template>
   <json-view
     :data="data"
     rootKey="view"
     :maxDepth="1"
-    :styles="{ key: '#0977e6' }"
+    class="customize"
   />
 </template>
+
+<style lang="scss" scoped>
+.customize {
+  --vjc-valueKey-color: green;
+}
+.customize.dark {
+  --vjc-valueKey-color: red;
+}
+</style>
 ```
 
+Note: your styles will need to be scoped to override the scoped CSS Variables in the component.
+
 ## Advanced Features
 
 ### Selected Item Events
@@ -104,9 +119,9 @@ You can allow users to click elements, and receive an event when this occurs. Th
 
 **Event**
 
-* key: _string_
-* value: _string_
-* path: _string_
+- key: _string_
+- value: _string_
+- path: _string_
 
 ## Development
 

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [["@vue/app", { useBuiltIns: "entry", corejs: { version: 2 } }]]
+  presets: [['@vue/app', { useBuiltIns: 'entry', corejs: { version: 2 } }]]
 };

bili.config.js

@@ -1,8 +1,8 @@
 module.exports = {
-  input: "src/index.ts",
+  input: 'src/index.ts',
   output: {
-    format: ["cjs", "umd", "esm"],
-    moduleName: "vue-json-component",
+    format: ['cjs', 'umd', 'esm'],
+    moduleName: 'vue-json-component',
     sourceMap: true,
     sourceMapExcludeSources: true
   },
@@ -14,11 +14,11 @@ module.exports = {
     babel: { runtimeHelpers: true }
   },
   extendConfig(config, { format }) {
-    if (format === "umd") {
+    if (format === 'umd') {
       config.output.minify = true;
     }
-    if (format === "esm") {
-      config.output.fileName = "[name].module.js";
+    if (format === 'esm') {
+      config.output.fileName = '[name].module.js';
     }
     return config;
   }

harness/App.vue

@@ -1,70 +1,111 @@
 <template>
   <div id="app">
-    <json-view
-      :data="data"
-      rootKey="view"
-      :maxDepth="1"
-      :styles="{ key: '#0977e6' }"
-      v-on:selected="itemSelected"
-    ></json-view>
-    <json-view rootKey="result" data="some string" />
-    <json-view rootKey="result" :data="2" />
+    <div :class="{ dark: dark }">
+      <json-view
+        :data="data"
+        rootKey="view"
+        :maxDepth="1"
+        :styles="{ key: '#0977e6' }"
+        :colorScheme="colorScheme"
+        v-on:selected="itemSelected"
+      ></json-view>
+      <json-view
+        rootKey="string"
+        data="Not an object"
+        :colorScheme="colorScheme"
+      />
+      <json-view
+        rootKey="customization"
+        data="Using CSS Variables"
+        class="customize"
+        :colorScheme="colorScheme"
+      />
+    </div>
 
+    <button id="darkButton" v-on:click="toggleDark">Toggle Dark Mode</button>
     <h5>Events</h5>
     <div v-for="(event, index) in events" :key="index">{{ event }}</div>
   </div>
 </template>
 
 <script lang="ts">
-import Vue, { VueConstructor } from "vue";
-import JSONView from "../src/JSONView.vue";
+import Vue, { VueConstructor } from 'vue';
+import JSONView from '../src/JSONView.vue';
 
 export default Vue.extend({
   data: function() {
     return {
-      events: []
+      events: [],
+      dark: false
     };
   },
-  components: { "json-view": JSONView },
+  components: { 'json-view': JSONView },
   methods: {
     itemSelected: function(data: any): void {
       // @ts-ignore
       this.events.push(`Selected: ${data.path} with value ${data.value}`);
+    },
+    toggleDark: function(): void {
+      this.dark = !this.dark;
     }
   },
   computed: {
     data: function() {
       const test = {
-        first: "level",
+        first: 'level',
         works: true,
         number: 100,
         missing: null,
         list: [
-          "fun",
+          'fun',
           {
             test: {
               passed: true
             }
           }
         ],
         object: {
-          working: "properly"
+          working: 'properly'
         }
       };
       return test;
+    },
+    colorScheme: function(): string {
+      return this.dark ? 'dark' : 'light';
     }
   }
 });
 </script>
 
 <style lang="scss">
 #app {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 20px;
   padding: 20px;
   overflow-x: auto;
   display: flex;
   flex-direction: column;
 }
+
+#darkButton {
+  margin-top: 20px;
+  width: 150px;
+  height: 30px;
+  cursor: pointer;
+}
+
+.dark {
+  background-color: #121212;
+  border-radius: 4px;
+}
+</style>
+
+<style lang="scss" scoped>
+.customize {
+  --vjc-valueKey-color: green;
+}
+.customize.dark {
+  --vjc-valueKey-color: red;
+}
 </style>

harness/main.ts

@@ -1,8 +1,8 @@
-import Vue from "vue";
-import App from "./App.vue";
+import Vue from 'vue';
+import App from './App.vue';
 
 Vue.config.productionTip = false;
 
 new Vue({
   render: h => h(App)
-}).$mount("#app");
+}).$mount('#app');

package.json

@@ -90,6 +90,9 @@
       "autoprefixer": {}
     }
   },
+  "prettier": {
+    "singleQuote": true
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions",