Orderbook - Svelte

App: orderbook-svelte-d3.vercel.app.

Storybook: orderbook-svelte-d3-ltd2.vercel.app.

Define Theme Pack

Theme configuration are stored in the configuration context (./src/lib/configuration/context.ts) under the theme object, first you have to define the context on a top level parent where it will be available for the whole app using the function called setConfigurationContext, the OrderbookTheme is defined like follows:

export type OffsetColor = [color: string, offset: number];
export type OrderbookTheme = {
	askBin: [OffsetColor, OffsetColor];
	askArea: [OffsetColor, OffsetColor];
	bidBin: [OffsetColor, OffsetColor];
	bidArea: [OffsetColor, OffsetColor];
	marketPrice: {
		line: string;
		text: string;
	};
	boundaries: {
		line: string;
		text: string;
	};
	priceTicks: {
		primary: string,
		secondary: string,
	
	}
};

The bin and area theming must be a gradient color, which necessitates the use of a start color and a stop color. We are using an array as a structure to hold such information, and each of the start and stop colors must be of the OffsetColor type, which is an array with the first element being a color string and the second being an offset number (between 0 and 1) used when creating the gradient color.

To change the theme you can follow these steps in the following piece of code:

// a top level +layout.svelte of a parent
<script>
	import { setConfigurationContext } from '$lib/configuration';
    // import a pre-defined theme
    import { customTheme } from '$lib/themes'

    // You can refactor the `setConfigurationContext` to accept a default theme object as an argument
    const { grouping$, theme$ } = setConfigurationContext();

    // overrides the default theme, the change will be real-time due the usabe of Svelte stores
    applyTheme(theme$, customTheme)

    // You can move this function under configuration context so it can reused across your app
    
    function applyTheme(theme$: Writable<OrderbookTheme>, customTheme: OrderbookTheme){
        theme$.set(structuredClone(customTheme))
    }
</script>