Configurable background color

[ZihanLi0920]

I'm trying to use vistio recently and it looks really cool. But the thing is that the color of the data and the background are really similar. So if there is anyway that I can change the outlook of the page?

[nmnellis]

There is two places, the first and easiest would be to modify the global variables here.

vistio/web/src/app.css

Lines 100 to 118 in c6e2738

	--colorText: rgb(70,107,176);
	--colorTextDisabled: rgb(129, 129, 129);
	--colorNormal: rgb(70,107,176);
	--colorWhite: rgb(255,255,255);
	--colorWarning: rgb(268, 185, 73);
	--colorDanger: rgb(184, 36, 36);
	--colorNormalDimmed: rgb(101, 117, 128);
	--colorBackgroundDark: rgb(70,107,176);
	--colorNormalDonut: rgb(70,107,176);
	--colorInactive: rgb(186, 213, 237);
	--colorLabelBorder: rgb(16, 17, 18);
	--colorLabelText: rgb(0, 0, 0);
	--colorDonutInternalColor: rgb(70,107,176);
	--colorDonutInternalColorHighlighted: rgb(255, 255, 255);
	--colorConnectionLine: rgb(91, 91, 91);
	--colorPageBackground: rgb(255, 255, 255);
	--colorPageBackgroundTransparent: rgba(255, 255, 255, 0);
	--colorBorderLines: rgb(137, 137, 137);
	--colorDetailsPanel: rgb(70,107,176);

Secondly you can override vizceral settings here

vistio/web/src/components/connectionChart.jsx

Lines 10 to 84 in c6e2738

	const defaultConfig = {
	global: {
	timezoneOffset: (new Date()).getTimezoneOffset()
	},
	chart: {
	type: 'area',
	width: 300,
	height: 400,
	backgroundColor: '#466bb0'
	},
	title: '',
	xAxis: [{
	categories: [],
	type: 'datetime',
	crosshair: false,
	labels: {
	format: '{value:%m/%d %H:%M:%S}',
	step: 0,
	style: {
	color: '#ffffff'
	}
	},
	tickInterval: 60 * 1000 // 1 minute
	}],
	yAxis: [{
	title: {
	text: 'count',
	labels: {
	format: '{value:%.2f}',
	style: {
	color: '#ffffff'
	}
	}
	},
	labels: {
	style: {
	color: '#ffffff'
	}
	}
	}],
	tooltip: {
	shared: true,
	xDateFormat: '%Y/%m/%d %H:%M:%S',
	pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y:%.2f}</b><br/>'
	},
	plotOptions: {
	area: {
	marker: {
	enabled: false,
	symbol: 'circle',
	radius: 1,
	states: {
	hover: {
	enabled: true
	}
	}
	}
	}
	},
	series: [{
	name: 'RPS',
	data: history.total,
	color: '#BAD5ED'
	},
	{
	name: 'errors',
	data: history.errors,
	color: '#B82424'
	}],
	legend: {
	itemStyle: {
	color: '#D6D6D6'
	}
	}
	};