CL with Custom CSS

by TradingView

HTML

<!DOCTYPE HTML>
<html>
	<head>
		<title>TradingView Charting Library demo</title>
		<!-- Fix for iOS Safari zooming bug -->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<script type="text/javascript" src="https://charting-library.tradingview-widget.com/charting_library/charting_library.standalone.js"></script>
		<script type="text/javascript" src="https://charting-library.tradingview-widget.com/datafeeds/udf/dist/bundle.js"></script>
	</head>
	<body style="margin:0px;">
		<div id="tv_chart_container"></div>
	</body>
</html>

JavaScript

var customCSS =
  `:root:not(.theme-dark) {
	--tv-color-platform-background: #d1c4e9;
	--tv-color-pane-background: rgb(251, 223, 244);
	--tv-color-toolbar-button-background-hover: rgb(244, 143, 177);
	--tv-color-toolbar-button-background-expanded: rgb(244, 143, 177);
	--tv-color-toolbar-button-background-active: rgb(249, 185, 233);
	--tv-color-toolbar-button-background-active-hover: rgb(244, 143, 177);
	--tv-color-toolbar-button-text: rgb(136, 24, 79);
	--tv-color-toolbar-button-text-hover: rgb(74, 20, 140);
	--tv-color-toolbar-button-text-active: red;
	--tv-color-toolbar-button-text-active-hover: red;
	--tv-color-item-active-text: rgb(6, 6, 255);
	--tv-color-toolbar-toggle-button-background-active: red;
	--tv-color-toolbar-toggle-button-background-active-hover: magenta;
	--tv-color-toolbar-divider-background: rgb(251, 223, 244);
}

.theme-dark:root {
	--tv-color-platform-background: #d1c4e9;
	--tv-color-pane-background: rgb(251, 223, 244);
	--tv-color-toolbar-button-background-hover: rgb(244, 143, 177);
	--tv-color-toolbar-button-background-expanded: rgb(244, 143, 177);
	--tv-color-toolbar-button-background-active: rgb(249, 185, 233);
	--tv-color-toolbar-button-background-active-hover: rgb(244, 143, 177);
	--tv-color-toolbar-button-text: rgb(136, 24, 79);
	--tv-color-toolbar-button-text-hover: rgb(74, 20, 140);
	--tv-color-toolbar-button-text-active: red;
	--tv-color-toolbar-button-text-active-hover: red;
	--tv-color-item-active-text: rgb(6, 255, 6);
	--tv-color-toolbar-toggle-button-background-active: red;
	--tv-color-toolbar-toggle-button-background-active-hover: magenta;
	--tv-color-toolbar-divider-background: rgb(251, 223, 244);
}
`;

function initOnReady() {
  const cssBlob = new Blob([customCSS], {
    type: "text/css",
  });
  const cssBlobUrl = URL.createObjectURL(cssBlob);
  var widget = window.tvWidget = new TradingView.widget({
    library_path: "https://charting-library.tradingview-widget.com/charting_library/",
    // debug: true, // uncomment this...