vue 修改tradingview工具栏的颜色（第三天）

tradingview官网：https://cn.tradingview.com/lightweight-charts/

关于修改工具栏颜色的办法：

引入文件的配置：

library_path: "charting_library/",//资源库根路径

custom_css_url: "custom-styles.css",//自定义样式文件

“custom-styles.css”文件必须放在“charting_library”目录之下哈。

每一行我都注释了，上下一致哈。custom-styles.css：

标准：

:root:not(.theme-dark) {
	--tv-color-platform-background: #212121;    /*设置所有元素的页面的主要颜色*/
	--tv-color-pane-background:#212121;     /*工具栏背景色*/
	--tv-color-pane-background-secondary: #212121;       /*工具栏的其他背景色（例如，右侧有打开的工具栏时）*/
	--tv-color-toolbar-button-background-hover: #111111;     /*工具栏按钮的悬停效果颜色*/
	--tv-color-toolbar-button-background-secondary-hover: #24AE8F;      /*工具栏按钮的其他悬停颜色（例如，右侧有打开的工具栏时）*/
	--tv-color-toolbar-button-background-expanded: #111111;      /*右侧工具栏上活动按钮的悬停效果颜色*/
	--tv-color-toolbar-button-text: #c8c7d8;       /*工具栏按钮的文本和图标颜色*/
	--tv-color-toolbar-button-text-hover: #ffffff;     /*将鼠标悬停在工具栏按钮上时，文本和图标的颜色*/
	--tv-color-toolbar-button-text-active: #24AE8F;     /*活动工具栏按钮的文本和图标颜色*/
	--tv-color-toolbar-button-text-active-hover: #24AE8F;       /* 将鼠标悬停在它们上方时，工具栏按钮的文本和图标颜色*/
	--tv-color-item-active-text: rgb(6, 6, 255);        /*切换工具栏按钮的文本颜色（例如，“磁铁模式”，“锁定所有图形”）*/
	--tv-color-toolbar-toggle-button-background-active: #37A6EF;        /*切换工具栏按钮的文本颜色（例如，“磁铁模式”，“锁定所有图形”）*/
	--tv-color-toolbar-toggle-button-background-active-hover: #37A6EF;      /*将切换工具栏按钮悬停在其上时填充颜色（例如，“磁铁模式”，“锁定所有图形”）*/
}

.theme-dark:root {
	--tv-color-platform-background: #212121;
	--tv-color-pane-background: #212121;
	--tv-color-pane-background-secondary: #212121;
	--tv-color-toolbar-button-background-hover: #111111;
	--tv-color-toolbar-button-background-secondary-hover: #24AE8F;
	--tv-color-toolbar-button-background-expanded: #111111;
	--tv-color-toolbar-button-text: #c8c7d8;
	--tv-color-toolbar-button-text-hover: #ffffff;
	--tv-color-toolbar-button-text-active: #24AE8F;
	--tv-color-toolbar-button-text-active-hover: #24AE8F;
	--tv-color-item-active-text: rgb(6, 255, 6);
	--tv-color-toolbar-toggle-button-background-active: #37A6EF;
	--tv-color-toolbar-toggle-button-background-active-hover: #37A6EF;
}

弹窗中：

body {
    font-family: relative pro;
    font-weight: 500;
    color: #787B86;
    background-color: transparent !important;
}

.layout__area--top {
    background-color: #2d2d3d;
    border-bottom: solid 1px #2d2d3d
}

.layout__area--left {
    border-right: solid 1px #2d2d3d
}

.common-tooltip__body-356XFpBj {
    background-color: #303044 !important
}

.common-tooltip__ear-holder-yIJjpvgu:after {
    display: none
}

.button-2ioYhFEY.isInteractive-20uLObIc.isOpened-p-Ume5l9 {
    color: var(--tv-color-toolbar-button-text-hover);   /*指标选中项颜色*/
}

.menuWrap-1gEtmoET {
    background-color: #212121 !important;       /*弹窗的背景色*/
}

.item-2xPVYue0 {
    color: #9c9b9e;     /*弹窗每一项菜单的文字颜色*/
    background-color: #212121 !important;       /*弹窗每一项菜单的背景色*/
}

.item-2xPVYue0:hover {
    color: #9c9b9e;
    background-color: #3f3d3d !important;       /*弹窗每一项菜单的hover背景色*/
}

.title-34kQlbrM{
    color:#9c9b9e;   /*指标菜单项的颜色*/
}
.title-34aDs39w{
    color:#9c9b9e;   /*指标菜单项的颜色*/
}

.title-TQFObfxW{
    color:#9c9b9e; /*指标菜单标题的颜色*/
}

.input-2pz7DtzH{
    color:#9c9b9e;/*指标菜单搜索的颜色*/
}
.description-3sR4j2iN{
    color:#9c9b9e;/*指标菜单搜索结果的颜色*/
}

/*图表设置相关*/
/* .title-1uAaOORo{
    color:#9c9b9e;
} */

.checkbox-3xZUD-2M .label-cyItEVpF{
    color:#9c9b9e;
}

.content-jw-2aYgg{
    color:#9c9b9e;
}
.tab-1EqAs-Lb{
    color:#9c9b9e;
}
.inputWithErrorWrapper-3VldItns,.inputWithErrorWrapper-3VldItns:focus{
    color:#9c9b9e;/*输入框*/
}
.innerInput-29Ku0bwF{
    color:#9c9b9e;
}
.focused-3rk113Ah input{
    color:#9c9b9e !important;/*输入框聚焦*/
}
/*图表设置相关*/

.valueTitle-1myNPdtH {
    margin-right: 4px
}

.tv-dialog,
.dialog-2APwxL3O,
.tv-tabbed-dialog,
.tv-insert-indicator-dialog__search-control,
.tv-insert-indicator-dialog__search-control input {
    background-color: #212121 !important        /*弹窗的背景色*/
}

.tv-dialog__section,
.tv-search-row,
.header-dpl-vtN_ {
    border-bottom: solid 1px #2d2d3d !important
}

.footer-1mvnCDqp,
.content-1KOxICHZ {
    border-top: solid 1px #2d2d3d !important
}

.sidebar-1CxuYEaZ {
    border-right: solid 1px #2d2d3d !important
}

如果没有效果，首先检查css样式是否被引入，检查css是否引入的方法：

js 检测文件是否被页面加载（css或js等）_草字的博客-CSDN博客