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',
-          surface: '#fdfffe',
-          primary: '#00CC33',
-          success: '#00CC33',
-          warning: '#ffcc00',
-          error: '#CC0033',
-          "on-background": black,
-          "on-surface": black,
-          "on-primary": black,
-          "on-secondary": black,
-          "on-success": black,
-          "on-info": black,
-          "on-warning": black,
-          "on-error": black,
+          background: '#ffffff',
+          surface: '#ffffff',
+          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: 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;
-$red: #CC0033;
-$yellow: #ffcc00;
-$blue: #0033CC;
-$white: #fdfffe; // just a touch greenblue
-$black: #000201; // just a touch greenblue
+// OFFICIAL DEXORDER PALETTE
+$green:  #35D721;
+$red:    #DD1A10;
+$yellow: #FFDE00;
+$orange: #F58A00;
+$blue:   #1666EB;
+$gray:   #969696;
+$purple: #892ABF;
+$white:  #FFFFFF;
+$black:  #000000;
 
 $arbitrum-color: #12aaff;
 $uniswap-color: #ff007a;