mango-v4-ui/public/styles/tradingview.css

: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);
}