Theme Toggle for TradingView Advanced Charts Library which matches the TradingView brand style guidelines.

custom.css

// The following should be added to the custom css file.
// see: https://www.tradingview.com/charting-library-docs/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#custom_css_url

#theme-toggle {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}
.switcher {
	display: inline-block;
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 20px;
	vertical-align: middle;
	z-index: 0;
	-webkit-tap-highlight-color: transparent;
}

.switcher input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
	cursor: default;
}

.switcher .thumb-wrapper {
	display: block;
	border-radius: 20px;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.switcher .track {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background-color: #a3a6af;
}

#theme-switch:checked + .thumb-wrapper .track {
	background-color: #2962ff;
}

.switcher .thumb {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 14px;
	transition-duration: 250ms;
	transition-property: transform;
	transition-timing-function: ease-out;
	transform: translate(3px, 3px);
	background: #ffffff;
}

.switcher input:checked + .thumb-wrapper .thumb {
	transform: translate(21px, 3px);
}

script.js

const isDark =
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: dark)').matches;

const theme = isDark ? 'dark' : 'light'; // 

var widget = (window.tvWidget = new TradingView.widget({
  /* The usual widget constructors here */
  custom_css_url: './css/custom.css', // <- this should point to the custom.css file (Adds your custom CSS to the chart. url should be an absolute or relative path to the static folder.)
  theme: theme,
});

widget.headerReady().then(() => {
	const themeToggleEl = widget.createButton({
		useTradingViewStyle: false,
		align: 'right',
	});
	themeToggleEl.id = 'theme-toggle';
	themeToggleEl.innerHTML = `<label for="theme-switch" id="theme-switch-label">Dark Mode</label>
	<div class="switcher">
		<input type="checkbox" id="theme-switch">
		<span class="thumb-wrapper">
			<span class="track"></span>
			<span class="thumb"></span>
		</span>
	</div>`;
	themeToggleEl.title = 'Toggle theme';
	const checkboxEl = themeToggleEl.querySelector('#theme-switch');
	checkboxEl.checked = theme === 'dark';
	checkboxEl.addEventListener('change', function() {
		const themeToSet = this.checked ? 'dark' : 'light'
		widget.changeTheme(themeToSet, { disableUndo: true });
	});
});

it cann't work according to website theme color plz help me