From e8a3a85d885f668c148c384655004e3987ba78d8 Mon Sep 17 00:00:00 2001 From: tim Date: Wed, 9 Oct 2024 16:35:44 -0400 Subject: [PATCH] palette and themes --- src/charts/chart.js | 8 ++++- src/plugins/vuetify.js | 52 +++++++++++++++++++++---------- src/store/store.js | 3 +- src/styles/vars.scss | 18 ++++++----- theme.js | 70 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 126 insertions(+), 25 deletions(-) create mode 100644 theme.js diff --git a/src/charts/chart.js b/src/charts/chart.js index 73dad87..5eb7485 100644 --- a/src/charts/chart.js +++ b/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) } diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js index b73252c..85f5566 100644 --- a/src/plugins/vuetify.js +++ b/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: {}, + }, }, }, }) diff --git a/src/store/store.js b/src/store/store.js index b649a6a..2b31f80 100644 --- a/src/store/store.js +++ b/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, } diff --git a/src/styles/vars.scss b/src/styles/vars.scss index ae41400..f297c86 100644 --- a/src/styles/vars.scss +++ b/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; diff --git a/theme.js b/theme.js new file mode 100644 index 0000000..e44a0a8 --- /dev/null +++ b/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