Darkside skin and colors

README.md

@@ -20,12 +20,13 @@ npm i tvjs-xp
 
 ## List of extensions
 
-| Name | Author | Type | Description | Version |
-|---|---|---|---|---|
-| chart-link | StdSquad | Ext | Sync multiple charts (cursors, drawing tools) | 1.0.0 |
-| grid-resize | StdSquad | Ext | Resize vertical sections | 1.0.0 |
-| legend-buttons | StdSquad | Ext | Moving overlays aroud, adding, removing | 1.0.0 |
-| settings-win | StdSquad | Ext | Changing script props (settings) | 1.0.0 |
+| Name | Author | Type | Description | Version | Info |
+|---|---|---|---|---|---|
+| chart-link | StdSquad | Ext | Sync multiple charts (cursors, drawing tools) | 1.0.0 | |
+| darkside | ZeroBug | Skin | Dark theme | 1.0.0 | [README](./src/extensions/darkside/README.md) |
+| grid-resize | StdSquad | Ext | Resize vertical sections | 1.0.0 | |
+| legend-buttons | StdSquad | Ext | Moving overlays aroud, adding, removing | 1.0.0 | |
+| settings-win | StdSquad | Ext | Changing script props (settings) | 1.0.0 | |
 
 ## Usage
 

src/extensions/darkside/README.md

@@ -0,0 +1,85 @@
+# DarkSide Colors and Skin
+
+##### Before: The day/night pack
+![daypack](./daynightpack.png)
+
+##### After: The DarkSide
+![darkside](./darkside.png)
+
+## How to use
+
+### Example 1: Using skin
+
+```html
+<template>
+<trading-vue :data="dc" :extensions="ext" skin="darkside"/>
+</template>
+<script>
+
+import TradingVue from 'trading-vue-js'
+import XP from 'tvjs-xp'
+
+export default {
+    name: 'app',
+    components: { TradingVue },
+    data() {
+        return {
+            ext: [XP.darkside],
+            dc: new DataCube(...)
+        }
+    }
+}
+</script>
+```
+
+### Example 2: Using colors
+
+```html
+<template>
+<trading-vue :data="dc" :colors="colors"/>
+</template>
+<script>
+
+import TradingVue from 'trading-vue-js'
+import XP from 'tvjs-xp'
+
+export default {
+    name: 'app',
+    components: { TradingVue },
+    data() {
+        return {
+            colors: XP.darkside.colorpacks.darkside,
+            dc: new DataCube(...)
+        }
+    }
+}
+</script>
+```
+
+### Example 3: Using colors as boilerplate
+
+```html
+<template>
+<trading-vue :data="dc" :colors="colors"/>
+</template>
+<script>
+
+import TradingVue from 'trading-vue-js'
+import XP from 'tvjs-xp'
+
+const mycolors = {
+    title: 'red'
+};
+
+export default {
+    name: 'app',
+    components: { TradingVue },
+    data() {
+        return {
+            colors: {...XP.darkside.colorpacks.darkside, ...mycolors},
+            dc: new DataCube(...)
+        }
+    }
+}
+</script>
+```

src/extensions/darkside/darkside.js

@@ -0,0 +1,34 @@
+export default {
+    id: 'darkside', // Skin id
+    /**
+     * Use js object instead of json, so we can comment colors and
+     * the IDE can show the hex color preview plus gui color picker
+     *
+     * To generate the json file run from this folder: "node ./jsoncompiler.js"
+     * or
+     * from the project root: "node ./src/extensions/darkside/jsoncompiler.js"
+     *
+     * Enjoy the dark side.
+     */
+    colors: { // Color pack
+        title: '#cccccc', // Title text color
+        back: '#18191b', // Background color
+        grid: '#202124', // Grid color
+        text: '#cccccc', // Text (labels) color
+        textHL: '#cccccc', // Highlighted text color
+        scale: '#585b62', // Scales border color
+        cross: '#758696', // Crosshair color
+        candleUp: '#159f49', // Green candle color
+        candleDw: '#df4249', // Red candle color
+        wickUp: '#159f49', // Green wick color
+        wickDw: '#df4249', // Red wick color
+        volUp: '#159f4980', // Green volume color
+        volDw: '#df424980', // Red volume color
+        panel: '#4c525e', // Value bars color
+        tbBack: '#18191b', // Toolbar background color
+        tbBorder: '#585b62' // Toolbar border color
+    },
+    shaders: [], // Background Shaders
+    font: '', // Font
+    styles: '' // Global css stylesheet
+}

src/extensions/darkside/darkside.json

@@ -0,0 +1 @@
+{"title":"#cccccc","back":"#18191b","grid":"#202124","text":"#cccccc","textHL":"#cccccc","scale":"#585b62","cross":"#758696","candleUp":"#159f49","candleDw":"#df4249","wickUp":"#159f49","wickDw":"#df4249","volUp":"#159f4980","volDw":"#df424980","panel":"#4c525e","tbBack":"#18191b","tbBorder":"#585b62"}

src/extensions/darkside/jsoncompiler.js

@@ -0,0 +1,10 @@
+const fs = require("fs");
+const path = require('path');
+
+// Hack, we cant import without babel
+const js = fs.readFileSync(path.join(__dirname, './darkside.js'), 'utf8');
+const str = js.slice(js.indexOf('{'));
+const obj = eval('(' + str + ')');
+
+fs.writeFileSync(path.join(__dirname, './darkside.json'), JSON.stringify(obj.colors));
+console.log('Done!');

src/extensions/darkside/main.js

@@ -0,0 +1,7 @@
+// Skins controller. Can be used as a boilerplate
+// for other skin packs
+
+export default class Main {
+
+
+}

src/extensions/darkside/x.json

@@ -0,0 +1,11 @@
+{
+    "name": "darkside",
+    "author": "ZeroBug",
+    "version": "1.0.0",
+    "components": [],
+    "widgets": [],
+    "overlays": [],
+    "skins": ["darkside.js"],
+    "colorpacks": ["darkside.json"],
+    "deps": {}
+}