:root:not(.theme-dark) { --black: #fff; --primary: #ff9c24; --bkg-light: rgba(0, 0, 0, 0.05); --bkg-dark: rgba(0, 0, 0, 0.1); --bkg-darker: rgba(0, 0, 0, 0.15); --bkg-darkest: rgba(0, 0, 0, 0.2); --text: rgba(0, 0, 0, 0.6); --tv-color-platform-background: transparent; --tv-color-pane-background: transparent; --tv-color-pane-background-secondary: var(--bkg-dark); --tv-color-toolbar-button-background-hover: transparent; --tv-color-toolbar-button-background-secondary-hover: var(--bkg-darker); --tv-color-toolbar-button-background-expanded: var(--bkg-dark); --tv-color-pane-background-secondary: var(--bkg-dark); --tv-color-toolbar-button-text: var(--text); --tv-color-toolbar-button-text-hover: var(--primary); --tv-color-toolbar-button-text-active: var(--primary); --tv-color-toolbar-button-text-active-hover: var(--primary); --tv-color-item-active-text: var(--primary); --tv-color-toolbar-toggle-button-background-active: var(--primary); --tv-color-toolbar-toggle-button-background-active-hover: var(--primary); } .theme-dark:root { --black: #141414; --primary: #f2c94c; --bkg-light: rgba(255, 255, 255, 0.1); --bkg-dark: rgba(0, 0, 0, 0.1); --bkg-darker: rgba(0, 0, 0, 0.2); --bkg-darkest: rgba(0, 0, 0, 0.4); --text: rgba(255, 255, 255, 0.6); --tv-color-platform-background: transparent; --tv-color-pane-background: transparent; --tv-color-pane-background-secondary: var(--bkg-dark); --tv-color-toolbar-button-text: var(--text); --tv-color-toolbar-button-background-hover: transparent; --tv-color-toolbar-button-background-secondary-hover: var(--bkg-darker); --tv-color-toolbar-button-background-expanded: var(--bkg-darkest); --tv-color-toolbar-button-text: var(--text); --tv-color-toolbar-button-text-hover: var(--primary); --tv-color-toolbar-button-text-active: var(--primary); --tv-color-toolbar-button-text-active-hover: var(--primary); --tv-color-item-active-text: var(--text); --tv-color-toolbar-toggle-button-background-active: var(--primary); --tv-color-toolbar-toggle-button-background-active-hover: var(--primary); } /* market name title */ [data-name="legend-source-title"] { color: var(--text)!important; } /* market name hover */ .chart-widget__top--themed-dark .withAction-OYqjX7Sg .titleWrapper-OYqjX7Sg { background-color: var(--bkg-dark); } /* ohlcv labels */ .chart-widget__top--themed-dark .series-OYqjX7Sg .valueItem-OYqjX7Sg .valueTitle-OYqjX7Sg { color: var(--text); } .marketStatusOpen-OPHVUfI4, html.theme-dark .marketStatusOpen-OPHVUfI4 { color: #60BF4F; } /* light theme */ html .chart-page .chart-container-border { background-color: transparent; } html .chart-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } html .loading-indicator { background: transparent; } html .tv-spinner { color: var(--primary); } html ::selection { background-color: var(--bkg-light); } html .container-113jHcZc { background: var(--text); } /* toggle toolbar arrow */ html .toggleButton-5IlBhjdP .arrow-5IlBhjdP { stroke: var(--black) } html .toggleButton-5IlBhjdP:hover .arrow-5IlBhjdP { stroke: var(--black) } html .container-68Nk42BD:hover .arrow-68Nk42BD { stroke: var(--black) } /* menu background */ html .menuWrap-g78rwseC { background-color: var(--black); } html .item-2IihgTnv { background-color: var(--black); } /* menu hover */ html .item-2IihgTnv:hover { background-color: var(--bkg-light); } /* minutes, hours, days menu hover */ html .summary-3UYGeClB:hover { background-color: var(--bkg-light); } /* menu active highlight */ html .item-2IihgTnv.isActive-2IihgTnv, html .item-2IihgTnv.isActive-2IihgTnv:active { background-color: var(--bkg-light); } html .item-2IihgTnv.isActive-2IihgTnv:hover { background-color: var(--bkg-light); } /* dialog */ html .dialog-UM6w7sFp { background-color: var(--black); } /* dialog item hovers */ html .container-3Ywm3-oo:not(.disabled-3Ywm3-oo):hover { background-color: var(--bkg-light); } /* dialog item selected */ html .container-3Ywm3-oo.selected-3Ywm3-oo { background-color: var(--bkg-light); } html .container-3Ywm3-oo.selected-3Ywm3-oo.highlighted-3Ywm3-oo.dark-3Ywm3-oo { background-color: var(--bkg-light); } html .container-3Ywm3-oo:not(.disabled-3Ywm3-oo):hover.selected-3Ywm3-oo { background-color: var(--bkg-light); } /* dark theme */ html.theme-dark .chart-page .chart-container-border { background-color: transparent; } html.theme-dark .chart-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } html.theme-dark .loading-indicator { background: transparent; } html.theme-dark .tv-spinner { color: var(--primary); } html.theme-dark ::selection { background-color: var(--bkg-light); } html.theme-dark .container-113jHcZc { background: var(--black); } /* toggle toolbar arrow */ html.theme-dark .toggleButton-5IlBhjdP .arrow-5IlBhjdP { stroke: var(--black) } html.theme-dark .toggleButton-5IlBhjdP:hover .arrow-5IlBhjdP { stroke: var(--black) } html.theme-dark .container-68Nk42BD:hover .arrow-68Nk42BD { stroke: var(--black) } /* menu background */ html.theme-dark .menuWrap-g78rwseC { background-color: var(--black); } html.theme-dark .item-2IihgTnv { background-color: var(--black); } /* menu hover */ html.theme-dark .item-2IihgTnv:hover { background-color: var(--bkg-light); } /* minutes, hours, days menu hover */ html.theme-dark .summary-3UYGeClB:hover { background-color: var(--bkg-light); } /* menu active highlight */ html.theme-dark .item-2IihgTnv.isActive-2IihgTnv, html.theme-dark .item-2IihgTnv.isActive-2IihgTnv:active { background-color: var(--bkg-light); } html.theme-dark .item-2IihgTnv.isActive-2IihgTnv:hover { background-color: var(--bkg-light); } /* dialog */ html.theme-dark .dialog-UM6w7sFp { background-color: var(--black); } /* dialog item hovers */ html.theme-dark .container-3Ywm3-oo:not(.disabled-3Ywm3-oo):hover { background-color: var(--bkg-light); } /* dialog item selected */ html.theme-dark .container-3Ywm3-oo.selected-3Ywm3-oo { background-color: var(--bkg-light); } html.theme-dark .container-3Ywm3-oo.selected-3Ywm3-oo.highlighted-3Ywm3-oo.dark-3Ywm3-oo { background-color: var(--bkg-light); } html.theme-dark .container-3Ywm3-oo:not(.disabled-3Ywm3-oo):hover.selected-3Ywm3-oo { background-color: var(--bkg-light); }