palette and themes

src/charts/chart.js

@@ -3,6 +3,7 @@ import {invokeCallbacks, prototype} from "@/common.js";
 import {DataFeed, initFeeDropdown, lookupSymbol} from "@/charts/datafeed.js";
 import {intervalToSeconds, SingletonCoroutine} from "@/misc.js";
 import {useStore} from "@/store/store.js";
+import {tvCustomThemes} from "../../theme.js";
 
 export let widget = null
 export let chart = null
@@ -82,6 +83,8 @@ export function initWidget(el) {
         disabled_features: [],
         enabled_features: ['saveload_separate_drawings_storage'],
         drawings_access: {type: 'white', tools: [],}, // show no tools
+        custom_themes: tvCustomThemes,
+        theme: 'dark',
     });
 
     // debug dump all events
@@ -94,12 +97,15 @@ export function initWidget(el) {
     widget.subscribe('mouse_up', mouseUp)
     widget.headerReady().then(()=>initFeeDropdown(widget))
     widget.onChartReady(initChart)
+    console.log('tv widget initialized')
 }
 
 
 function initChart() {
     console.log('init chart')
     chart = widget.activeChart()
+    const themeName = useStore().theme;
+    widget.changeTheme(themeName).catch((e)=>console.warn(`Could not change theme to ${themeName}`, e))
     chart.crossHairMoved().subscribe(null, (point)=>setTimeout(()=>handleCrosshairMovement(point),0) )
     chart.onSymbolChanged().subscribe(null, changeSymbol)
     chart.onIntervalChanged().subscribe(null, changeInterval)
@@ -110,7 +116,7 @@ function initChart() {
     // chart.onHoveredSourceChanged().subscribe(null, ()=>console.log('hovered source changed', arguments))
     // chart.selection().onChanged().subscribe(null, s => console.log('selection', chart.selection().allSources()));
     const symbolExt = chart.symbolExt();
-    console.log('symbolExt', symbolExt);
+    // console.log('symbolExt', symbolExt);
     if(symbolExt) {
         changeSymbol(symbolExt)
     }

src/plugins/vuetify.js

@@ -12,31 +12,51 @@ import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-const black = '#333'
+const darkGray = '#333'
+
 export default createVuetify({
   theme: {
     themes: {
       light: {
         colors: {
-          background: '#fdfffe',
+          background: '#ffffff',
-          surface: '#fdfffe',
+          surface: '#ffffff',
-          primary: '#00CC33',
+          primary: '#35D721',
-          success: '#00CC33',
+          success: '#35D721',
-          warning: '#ffcc00',
+          warning: '#FFDE00',
-          error: '#CC0033',
+          error: '#DD1A10',
-          "on-background": black,
+          "on-background": darkGray,
-          "on-surface": black,
+          "on-surface": darkGray,
-          "on-primary": black,
+          "on-primary": darkGray,
-          "on-secondary": black,
+          "on-secondary": darkGray,
-          "on-success": black,
+          "on-success": darkGray,
-          "on-info": black,
+          "on-info": darkGray,
-          "on-warning": black,
+          "on-warning": darkGray,
-          "on-error": black,
+          "on-error": darkGray,
         },
         dark: false,
         variables: {},
       },
-      // todo dark mode
+      dark: {
+        colors: {
+          background: '#000',
+          surface: '#000',
+          primary: '#35D721',
+          success: '#35D721',
+          warning: '#FFDE00',
+          error: '#DD1A10',
+          "on-background": darkGray,
+          "on-surface": darkGray,
+          "on-primary": darkGray,
+          "on-secondary": darkGray,
+          "on-success": darkGray,
+          "on-info": darkGray,
+          "on-warning": darkGray,
+          "on-error": darkGray,
+        },
+        dark: true,
+        variables: {},
+      },
     },
   },
 })

src/store/store.js

@@ -41,6 +41,7 @@ export const useStore = defineStore('app', ()=> {
   const timeZone = ref('Etc/UTC')
 
   const nav = ref(false) // controls opening navigation drawer
+  const theme = ref('dark')
 
   const connected = ref(false)
   const allowed = ref(!REQUIRE_AUTH)
@@ -134,7 +135,7 @@ export const useStore = defineStore('app', ()=> {
     connected,
     allowed, nav, chainId, chainInfo, chain, provider, providerRef, vaultInitCodeHash, account, vaults, vaultVersions,
     transactionSenders, errors, extraTokens, poolPrices, vaultBalances, orders, vault, version, upgrade, vaultOrders,
-    tokens, factory, helper,
+    tokens, factory, helper, theme,
     mockenv, mockCoins,
     removeTransactionSender, error, closeError, addToken, clock, timeZone, balances,
   }

src/styles/vars.scss

@@ -1,11 +1,15 @@
-// these must also be set in vuetify.ts for the "theme"
+// these must also be set in vuetify.js for the "theme"
 
-$green: #00CC33;
+// OFFICIAL DEXORDER PALETTE
-$red: #CC0033;
+$green:  #35D721;
-$yellow: #ffcc00;
+$red:    #DD1A10;
-$blue: #0033CC;
+$yellow: #FFDE00;
-$white: #fdfffe; // just a touch greenblue
+$orange: #F58A00;
-$black: #000201; // just a touch greenblue
+$blue:   #1666EB;
+$gray:   #969696;
+$purple: #892ABF;
+$white:  #FFFFFF;
+$black:  #000000;
 
 $arbitrum-color: #12aaff;
 $uniswap-color: #ff007a;

theme.js

@@ -0,0 +1,70 @@
+import Color from "color";
+
+
+export const green =  '#35D721';
+export const red =    '#DD1A10';
+export const yellow = '#FFDE00';
+export const orange = '#F58A00';
+export const blue =   '#1666EB';
+export const gray =   '#969696';
+export const purple = '#892ABF';
+export const white =  '#FFFFFF';
+export const black =  '#000000';
+
+// adjust this number upwards to make the TradingView palette brighter and downwards for darker
+const middleShadeIndex = 5
+
+const numShades = 20
+
+function shadesOf(rgb) {
+    const c = new Color(rgb)
+    const lights = []
+    const darks = []
+    const numLightShades = middleShadeIndex + 1
+    const numDarkShades = numShades - numLightShades
+    for (let j=0; j<numLightShades; j++) {
+        const ratio = j/(numLightShades-1);
+        lights.push(c.lighten(ratio).rgb().toString())
+    }
+    // start iteration at 1 because the unaltered color was already included with the lights
+    for (let j=1; j<=numDarkShades; j++) {
+        const ratio = j/numDarkShades;
+        darks.push(c.darken(ratio).rgb().toString())
+    }
+    return [...lights.toReversed(), ...darks]
+}
+
+export const greens = shadesOf(green);
+export const reds = shadesOf(red);
+export const yellows = shadesOf(yellow);
+export const oranges = shadesOf(orange);
+export const blues = shadesOf(blue);
+export const grays = shadesOf(gray);
+export const purples = shadesOf(purple);
+
+export const tvLightTheme = {
+    "color1": blues,
+    "color2": grays,
+    "color3": reds,
+    "color4": greens,
+    "color5": oranges,
+    "color6": purples,
+    "color7": yellows,
+    "white": white,
+    "black": black,
+}
+
+export const tvDarkTheme = {
+    "color1": blues,
+    "color2": grays,
+    "color3": reds,
+    "color4": greens,
+    "color5": oranges,
+    "color6": purples,
+    "color7": yellows,
+    "white": white,
+    "black": black,
+}
+
+export const tvCustomThemes = {light: tvLightTheme, dark: tvDarkTheme};
+// console.log('themes', tvLightTheme);