[Bug] when call updateSpec, the theme does not update correctly

[kkxxkk2019]

Version

latest

Link to Minimal Reproduction

none

Steps to Reproduce

just paste the code:

 const lightSpec = {
    type: 'linearProgress',
    title: {
      text: '条形进度图'
    },
    data: {
      values: [
        {
          type: 'Tradition Industries',
          value: 0.795,
          text: '79.5%'
        },
        {
          type: 'Business Companies',
          value: 0.25,
          text: '25%'
        }
      ]
    },
    direction: 'horizontal',
    xField: 'value',
    yField: 'type',
    seriesField: 'type',
    axes: [
      {
        orient: 'left',
        domainLine: {
          visible: false
        }
      }
    ],
    theme: {
      colorScheme: {
        default: {
          dataScheme: [
            {
              maxDomainLength: 15,
              scheme: [
                '#4e83fd',
                '#50cefb',
                '#935af6',
                '#fad355',
                '#f76964',
                '#ffa53d',
                '#82a7fc',
                '#7edafb',
                '#ad82f7',
                '#f7dc82',
                '#f98e8b',
                '#ffba6b',
                '#3370ff',
                '#14c0ff',
                '#7f3bf5',
                '#ffc60a',
                '#f54a45',
                '#ff8800',
                '#bacefd',
                '#b1e8fc',
                '#cdb2fa',
                '#f8e6ab',
                '#fbbfbc',
                '#fed4a4',
                '#245bdb',
                '#049fd7',
                '#6425d0',
                '#dc9b04',
                '#d83931',
                '#de7802'
              ]
            }
          ],
          palette: {
            labelFontColor: '#333333',
            titleFontColor: '#333333',
            axisGridColor: '#d0d3d6',
            axisDomainColor: '#1f2329'
          }
        }
      },
      padding: {
        top: 12,
        right: 12,
        left: 12,
        bottom: 0
      },
      component: {
        title: {
          textStyle: {
            fontSize: 14,
            fill: '#333',
            fontWeight: 'bold'
          },
          subtextStyle: {
            fontSize: 12,
            fill: '#6F6F6F',
            fontWeight: 'normal'
          }
        },
        indicator: {
          title: {
            autoLimit: true,
            autoFit: true
          },
          content: {
            autoLimit: true,
            autoFit: true
          }
        },
        axisY: {
          label: {
            space: 10,
            autoLimit: true
          },
          domainLine: {
            visible: false
          },
          tick: {
            visible: false,
            tickSize: 0
          }
        },
        axisX: {
          sampling: false,
          label: {
            autoRotate: true,
            autoHide: true,
            autoLimit: true
          }
        },
        axis: {
          label: {
            space: 0,
            visible: true,
            style: {
              fontSize: 12,
              fill: '#646a73',
              fontWeight: 'normal',
              fillOpacity: 1
            }
          },
          domainLine: {
            visible: true,
            style: {
              lineWidth: 1,
              stroke: '#dee0e3',
              strokeOpacity: 1
            }
          },
          grid: {
            visible: true,
            style: {
              lineWidth: 1,
              stroke: '#dee0e3',
              strokeOpacity: 1,
              lineDash: [4, 4]
            }
          },
          tick: {
            visible: false,
            tickSize: 4,
            style: {
              lineWidth: 1,
              stroke: '#dee0e3',
              strokeOpacity: 1
            }
          },
          title: {
            space: 8,
            style: {
              fontSize: 12,
              fill: '#333333',
              fontWeight: 'normal',
              fillOpacity: 1
            }
          }
        },
        discreteLegend: {
          maxRow: 1,
          autoPage: true,
          padding: {
            bottom: 0,
            left: 12,
            right: 12,
            top: 16
          },
          pager: {
            padding: {
              left: 8,
              right: 8,
              top: 8,
              bottom: 0
            },
            handler: {
              style: {
                size: 8
              }
            },
            textStyle: {
              fill: '#000',
              fontSize: 12,
              lineHeight: 14
            }
          },
          maxLengthOnLeftRight: 214,
          orient: 'bottom',
          item: {
            visible: true,
            spaceCol: 8,
            spaceRow: 8,
            padding: {
              left: 4,
              right: 22,
              top: 4,
              bottom: 4
            },
            background: {
              visible: true,
              state: {
                selected: {
                  fill: '#fff',
                  fillOpacity: 0
                },
                unSelected: {
                  fill: '#fff',
                  fillOpacity: 0
                },
                selectedHover: {
                  fill: '#141414',
                  fillOpacity: 0.08
                },
                unSelectedHover: {
                  fill: '#141414',
                  fillOpacity: 0.08
                }
              }
            },
            label: {
              style: {
                fontSize: 12,
                fontWeight: 'normal',
                fontStyle: 'normal',
                fill: 'rgba(46, 47, 50, 0.8)',
                maxLineWidth: 400
              },
              state: {
                selected: {
                  fillOpacity: 1
                },
                unSelected: {
                  fillOpacity: 0.9
                },
                selectedHover: {
                  fillOpacity: 0.7,
                  fill: '#1f2329'
                },
                unSelectedHover: {
                  fillOpacity: 0.65
                }
              }
            },
            shape: {
              space: 4,
              style: {
                size: 8
              }
            }
          },
          title: {
            style: {
              fontSize: 12,
              fontWeight: 'normal',
              fill: 'rgba(46, 47, 50, 1)'
            }
          }
        },
        tooltip: {
          panel: {
            border: {
              width: 1,
              radius: 3,
              color: '#DEE0E3'
            },
            shadow: {
              color: 'rgba(0, 0, 0, 0)',
              x: 0,
              y: 4,
              blur: 12,
              spread: 0
            },
            padding: {
              top: 10,
              left: 10,
              right: 10,
              bottom: 10
            },
            backgroundColor: '#ffffff'
          },
          spaceRow: 6,
          maxWidth: 400,
          titleLabel: {
            fontSize: 14,
            fontColor: '#333',
            lineHeight: 20,
            textAlign: 'left'
          },
          offset: {
            x: 10,
            y: 10
          },
          shape: {
            size: 7
          },
          keyLabel: {
            fontSize: 14,
            fontColor: '#646a73',
            lineHeight: 18,
            textAlign: 'left',
            spacing: 12
          },
          valueLabel: {
            fontSize: 14,
            fontColor: '#333333',
            lineHeight: 18,
            textAlign: 'left',
            fontWeight: 'bold'
          }
        },
        colorLegend: {
          horizontal: {
            padding: {
              left: 0,
              right: 24,
              top: 18,
              bottom: 18
            },
            title: {
              visible: false,
              padding: 0,
              textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fill: 'rgba(46, 47, 50, 1)'
              },
              space: 12
            },
            handlerText: {
              style: {
                fontSize: 12
              }
            },
            rail: {
              width: 200,
              height: 8,
              style: {
                fill: 'rgba(0,0,0,0.04)'
              }
            }
          },
          vertical: {
            padding: {
              left: 0,
              right: 24,
              top: 18,
              bottom: 18
            },
            title: {
              visible: false,
              padding: 0,
              textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fill: 'rgba(46, 47, 50, 1)'
              },
              space: 12
            },
            handlerText: {
              style: {
                fontSize: 12
              }
            },
            rail: {
              width: 200,
              height: 8,
              style: {
                fill: 'rgba(0,0,0,0.04)'
              }
            }
          }
        },
        sizeLegend: {
          horizontal: {
            rail: {
              width: 200,
              height: 12,
              style: {
                fill: 'rgba(0,0,0,0.04)'
              }
            },
            padding: {
              left: 0,
              right: 24,
              top: 18,
              bottom: 18
            },
            title: {
              visible: false,
              padding: 0,
              textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fill: 'rgba(46, 47, 50, 1)'
              },
              space: 12
            },
            handler: {
              visible: true
            },
            startText: {
              style: {
                fontSize: 12
              }
            },
            endText: {
              style: {
                fontSize: 12
              }
            },
            handlerText: {
              style: {
                fontSize: 12
              }
            }
          },
          vertical: {
            rail: {
              width: 12,
              height: 200,
              style: {
                fill: 'rgba(0,0,0,0.04)'
              }
            },
            padding: {
              left: 0,
              right: 24,
              top: 18,
              bottom: 18
            },
            title: {
              visible: false,
              padding: 0,
              textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fill: 'rgba(46, 47, 50, 1)'
              },
              space: 12
            },
            handler: {
              visible: true
            },
            startText: {
              style: {
                fontSize: 12
              }
            },
            endText: {
              style: {
                fontSize: 12
              }
            },
            handlerText: {
              style: {
                fontSize: 12
              }
            }
          }
        },
        dataZoom: {
          showDetail: 'auto',
          middleHandler: {
            visible: false,
            background: {
              size: 5,
              style: {
                stroke: '#D1D5DA',
                cornerRadius: 2
              }
            },
            icon: {
              style: {
                size: 8,
                fill: 'white',
                stroke: '#D1D5DA',
                symbolType:
                  'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
                lineWidth: 0.5
              }
            }
          },
          background: {
            size: 28,
            style: {
              fill: '#e6e8eb',
              lineWidth: 0
            }
          },
          startHandler: {
            style: {
              stroke: '#7F899B'
            }
          },
          endHandler: {
            style: {
              stroke: '#7F899B'
            }
          },
          startText: {
            padding: 8,
            style: {
              fontSize: 10,
              fill: '#6F6F6F'
            }
          },
          endText: {
            padding: 8,
            style: {
              fontSize: 10,
              fill: '#6F6F6F'
            }
          },
          selectedBackground: {
            style: {
              fill: '#D8E4F7'
            }
          },
          dragMask: {
            style: {
              fill: '#D9E5F8',
              stroke: '#AEB8C6',
              lineWidth: 1
            }
          },
          backgroundChart: {
            area: {
              style: {
                stroke: false,
                fill: '#b2b8c3'
              }
            },
            line: {
              style: {
                stroke: '#b2b8c3',
                lineWidth: 1
              }
            }
          },
          selectedBackgroundChart: {
            area: {
              style: {
                stroke: false,
                fill: '#e0e7f6'
              }
            },
            line: {
              style: {
                stroke: '#e0e7f6',
                lineWidth: 1
              }
            }
          }
        },
        crosshair: {
          xField: {
            visible: false,
            line: {
              type: 'rect',
              visible: true,
              style: {
                fill: '#F2F3F5',
                opacity: 0.6
              }
            },
            label: {
              visible: true,
              style: {
                fill: '#fff',
                fontSize: 14
              },
              labelBackground: {
                style: {
                  fill: 'rgba(47, 59, 82, 0.9)',
                  cornerRadius: 4
                }
              }
            }
          },
          yField: {
            visible: false,
            line: {
              type: 'line',
              visible: true,
              style: {
                fill: '#F2F3F5',
                opacity: 0.6
              }
            },
            label: {
              visible: true,
              style: {
                fill: '#fff',
                fontSize: 14
              },
              labelBackground: {
                style: {
                  fill: 'rgba(47, 59, 82, 0.9)',
                  cornerRadius: 4
                }
              }
            }
          },
          categoryField: {
            visible: false,
            line: {
              type: 'line',
              visible: true,
              style: {
                stroke: 'rgba(47, 59, 82, 0.9)',
                opacity: 0.2
              }
            },
            label: {
              visible: true,
              style: {
                fill: '#fff',
                fontSize: 14
              },
              labelBackground: {
                style: {
                  fill: 'rgba(47, 59, 82, 0.9)',
                  cornerRadius: 4
                }
              }
            }
          },
          valueField: {
            visible: false,
            line: {
              type: 'line',
              visible: true,
              style: {
                stroke: 'rgba(47, 59, 82, 0.9)',
                opacity: 0.2
              }
            },
            label: {
              visible: true,
              style: {
                fill: '#fff',
                fontSize: 14
              },
              labelBackground: {
                style: {
                  fill: 'rgba(47, 59, 82, 0.9)',
                  cornerRadius: 4
                }
              }
            }
          }
        }
      },
      background: '#fff',
      fontFamily:
        'PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol',
      mark: {
        symbol: {
          state: {
            hover: {
              fillOpacity: 1,
              stroke: '#3370ff',
              lineWidth: 1,
              strokeOpacity: 1,
              scaleX: 1.2,
              scaleY: 1.2
            },
            dimension_hover: {
              fillOpacity: 1,
              scaleX: 1,
              scaleY: 1,
              stroke: '#3370ff',
              lineWidth: 1,
              strokeOpacity: 1
            }
          }
        },
        rect: {
          state: {
            hover: {
              fillOpacity: 1,
              scaleX: 1,
              scaleY: 1,
              stroke: '#3370ff',
              lineWidth: 1,
              strokeOpacity: 1
            },
            dimension_hover: {
              fillOpacity: 1,
              scaleX: 1,
              scaleY: 1,
              stroke: '#3370ff',
              lineWidth: 1,
              strokeOpacity: 1
            }
          }
        },
        arc: {
          state: {
            hover: {
              fillOpacity: 1,
              scaleX: 1.2,
              scaleY: 1.2,
              stroke: '#3370ff',
              lineWidth: 1,
              strokeOpacity: 1
            }
          }
        }
      }
    }
  };
  const darkSpec = {
    type: 'linearProgress',
    title: {
      text: '条形进度图'
    },
    data: {
      values: [
        {
          type: 'Tradition Industries',
          value: 0.795,
          text: '79.5%'
        },
        {
          type: 'Business Companies',
          value: 0.25,
          text: '25%'
        }
      ]
    },
    direction: 'horizontal',
    xField: 'value',
    yField: 'type',
    seriesField: 'type',
    axes: [
      {
        orient: 'left',
        domainLine: {
          visible: false
        }
      }
    ],
    theme: {
      colorScheme: {
        default: {
          dataScheme: [
            {
              maxDomainLength: 15,
              scheme: [
                '#54a5fd',
                '#56d0fb',
                '#965ef6',
                '#fad45a',
                '#f76b66',
                '#ffaa47',
                '#7bb9fc',
                '#78d8fb',
                '#a97df7',
                '#f7da7d',
                '#f98683',
                '#ffb969',
                '#3f9bff',
                '#28c5ff',
                '#8747f6',
                '#ffcb21',
                '#f6544f',
                '#ff941a',
                '#a5cffc',
                '#9fe3fb',
                '#c1a0f9',
                '#f7e19c',
                '#faaba7',
                '#fecc94',
                '#5096e2',
                '#38c7fb',
                '#7c42dd',
                '#fbbf34',
                '#dc4c44',
                '#fd9f32'
              ]
            }
          ],
          palette: {
            labelFontColor: '#ebebeb',
            titleFontColor: '#ebebeb',
            axisGridColor: '#cacaca',
            axisDomainColor: '#d0d0d0'
          }
        }
      },
      padding: {
        top: 12,
        right: 12,
        left: 12,
        bottom: 0
      },
      component: {
        title: {
          textStyle: {
            fontSize: 14,
            fill: '#ebebeb',
            fontWeight: 'bold'
          },
          subtextStyle: {
            fontSize: 12,
            fill: '#ebebeb',
            fontWeight: 'normal'
          }
        },
        indicator: {
          title: {
            autoLimit: true,
            autoFit: true
          },
          content: {
            autoLimit: true,
            autoFit: true
          }
        },
        axisY: {
          label: {
            space: 10,
            autoLimit: true
          },
          domainLine: {
            visible: false
          },
          tick: {
            visible: false,
            tickSize: 0
          }
        },
        axisX: {
          sampling: false,
          label: {
            autoRotate: true,
            autoHide: true,
            autoLimit: true
          }
        },
        axis: {
          label: {
            space: 0,
            visible: true,
            style: {
              fontSize: 12,
              fill: '#a6a6a6',
              fontWeight: 'normal',
              fillOpacity: 1
            }
          },
          domainLine: {
            visible: true,
            style: {
              lineWidth: 1,
              stroke: '#434343',
              strokeOpacity: 1
            }
          },
          grid: {
            visible: true,
            style: {
              lineWidth: 1,
              stroke: '#434343',
              strokeOpacity: 1,
              lineDash: [4, 4]
            }
          },
          tick: {
            visible: false,
            tickSize: 4,
            style: {
              lineWidth: 1,
              stroke: '#434343',
              strokeOpacity: 1
            }
          },
          title: {
            space: 8,
            style: {
              fontSize: 12,
              fill: '#505050',
              fontWeight: 'normal',
              fillOpacity: 1
            }
          }
        },
        discreteLegend: {
          maxRow: 1,
          autoPage: true,
          padding: {
            bottom: 0,
            left: 12,
            right: 12,
            top: 16
          },
          pager: {
            padding: {
              left: 8,
              right: 8,
              top: 8,
              bottom: 0
            },
            handler: {
              style: {
                size: 8
              }
            },
            textStyle: {
              fill: '#ebebeb',
              fontSize: 12,
              lineHeight: 14
            }
          },
          maxLengthOnLeftRight: 214,
          orient: 'bottom',
          item: {
            visible: true,
            spaceCol: 8,
            spaceRow: 8,
            padding: {
              left: 4,
              right: 22,
              top: 4,
              bottom: 4
            },
            background: {
              visible: true,
              state: {
                selected: {
                  fill: '#dcdcdc',
                  fillOpacity: 0
                },
                unSelected: {
                  fill: '#ebebeb',
                  fillOpacity: 0
                },
                selectedHover: {
                  fill: '#dcdcdc',
                  fillOpacity: 0.08
                },
                unSelectedHover: {
                  fill: '#dcdcdc',
                  fillOpacity: 0.08
                }
              }
            },
            label: {
              style: {
                fontSize: 12,
                fontWeight: 'normal',
                fontStyle: 'normal',
                fill: '#ffffff',
                maxLineWidth: 400
              },
              state: {
                selected: {
                  fillOpacity: 1
                },
                unSelected: {
                  fillOpacity: 0.9
                },
                selectedHover: {
                  fillOpacity: 0.7,
                  fill: '#d0d0d0'
                },
                unSelectedHover: {
                  fillOpacity: 0.65
                }
              }
            },
            shape: {
              space: 4,
              style: {
                size: 8
              }
            }
          },
          title: {
            style: {
              fontSize: 12,
              fontWeight: 'normal',
              fill: '#ffffff'
            }
          }
        },
        tooltip: {
          panel: {
            border: {
              width: 1,
              radius: 3,
              color: '#EBEBEB26'
            },
            shadow: {
              color: 'rgba(0, 0, 0, 0)',
              x: 0,
              y: 4,
              blur: 12,
              spread: 0
            },
            padding: {
              top: 10,
              left: 10,
              right: 10,
              bottom: 10
            },
            backgroundColor: '#373c43'
          },
          spaceRow: 6,
          maxWidth: 400,
          titleLabel: {
            fontSize: 14,
            fontColor: '#ffffff',
            lineHeight: 20,
            textAlign: 'left'
          },
          offset: {
            x: 10,
            y: 10
          },
          shape: {
            size: 7
          },
          keyLabel: {
            fontSize: 14,
            fontColor: '#ffffff',
            lineHeight: 18,
            textAlign: 'left',
            spacing: 12
          },
          valueLabel: {
            fontSize: 14,
            fontColor: '#ffffff',
            lineHeight: 18,
            textAlign: 'left',
            fontWeight: 'bold'
          }
        },
        colorLegend: {
          horizontal: {
            padding: {
              left: 0,
              right: 24,
              top: 18,
              bottom: 18
            },
            title: {
              visible: false,
              padding: 0,
              textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fill: '#ebebeb'
              },
              space: 12
            },
            handlerText: {
              style: {
                fontSize: 12
              }
            },
            rail: {
              width: 200,
              height: 8,
              style: {
                fill: '#ebebeb'
              }
            }
          },
          vertical: {
            padding: {
              left: 0,
              right: 24,
              top: 18,
              bottom: 18
            },
            title: {
              visible: false,
              padding: 0,
              textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fill: '#ebebeb'
              },
              space: 12
            },
            handlerText: {
              style: {
                fontSize: 12
              }
            },
            rail: {
              width: 200,
              height: 8,
              style: {
                fill: '#ebebeb'
              }
            }
          }
        },
        sizeLegend: {
          horizontal: {
            rail: {
              width: 200,
              height: 12,
              style: {
                fill: '#ebebeb'
              }
            },
            padding: {
              left: 0,
              right: 24,
              top: 18,
              bottom: 18
            },
            title: {
              visible: false,
              padding: 0,
              textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fill: '#ebebeb'
              },
              space: 12
            },
            handler: {
              visible: true
            },
            startText: {
              style: {
                fontSize: 12
              }
            },
            endText: {
              style: {
                fontSize: 12
              }
            },
            handlerText: {
              style: {
                fontSize: 12
              }
            }
          },
          vertical: {
            rail: {
              width: 12,
              height: 200,
              style: {
                fill: '#ebebeb'
              }
            },
            padding: {
              left: 0,
              right: 24,
              top: 18,
              bottom: 18
            },
            title: {
              visible: false,
              padding: 0,
              textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                fill: '#ebebeb'
              },
              space: 12
            },
            handler: {
              visible: true
            },
            startText: {
              style: {
                fontSize: 12
              }
            },
            endText: {
              style: {
                fontSize: 12
              }
            },
            handlerText: {
              style: {
                fontSize: 12
              }
            }
          }
        },
        dataZoom: {
          showDetail: 'auto',
          middleHandler: {
            visible: false,
            background: {
              size: 5,
              style: {
                stroke: '#cccccc',
                cornerRadius: 2
              }
            },
            icon: {
              style: {
                size: 8,
                fill: 'white',
                stroke: '#cccccc',
                symbolType:
                  'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
                lineWidth: 0.5
              }
            }
          },
          background: {
            size: 28,
            style: {
              fill: '#dadada',
              lineWidth: 0
            }
          },
          startHandler: {
            style: {
              stroke: '#969696'
            }
          },
          endHandler: {
            style: {
              stroke: '#969696'
            }
          },
          startText: {
            padding: 8,
            style: {
              fontSize: 10,
              fill: '#999999'
            }
          },
          endText: {
            padding: 8,
            style: {
              fontSize: 10,
              fill: '#999999'
            }
          },
          selectedBackground: {
            style: {
              fill: '#c1daf2'
            }
          },
          dragMask: {
            style: {
              fill: '#c1dbf4',
              stroke: '#b8b8b8',
              lineWidth: 1
            }
          },
          backgroundChart: {
            area: {
              style: {
                stroke: false,
                fill: '#b8b8b8'
              }
            },
            line: {
              style: {
                stroke: '#b8b8b8',
                lineWidth: 1
              }
            }
          },
          selectedBackgroundChart: {
            area: {
              style: {
                stroke: false,
                fill: '#c9dcef'
              }
            },
            line: {
              style: {
                stroke: '#c9dcef',
                lineWidth: 1
              }
            }
          }
        },
        crosshair: {
          xField: {
            visible: false,
            line: {
              type: 'rect',
              visible: true,
              style: {
                fill: '#ebebeb',
                opacity: 0.6
              }
            },
            label: {
              visible: true,
              style: {
                fill: '#ebebeb',
                fontSize: 14
              },
              labelBackground: {
                style: {
                  fill: 'rgba(47, 59, 82, 0.9)',
                  cornerRadius: 4
                }
              }
            }
          },
          yField: {
            visible: false,
            line: {
              type: 'line',
              visible: true,
              style: {
                fill: '#ebebeb',
                opacity: 0.6
              }
            },
            label: {
              visible: true,
              style: {
                fill: '#ebebeb',
                fontSize: 14
              },
              labelBackground: {
                style: {
                  fill: 'rgba(47, 59, 82, 0.9)',
                  cornerRadius: 4
                }
              }
            }
          },
          categoryField: {
            visible: false,
            line: {
              type: 'line',
              visible: true,
              style: {
                stroke: 'rgba(47, 59, 82, 0.9)',
                opacity: 0.2
              }
            },
            label: {
              visible: true,
              style: {
                fill: '#ebebeb',
                fontSize: 14
              },
              labelBackground: {
                style: {
                  fill: 'rgba(47, 59, 82, 0.9)',
                  cornerRadius: 4
                }
              }
            }
          },
          valueField: {
            visible: false,
            line: {
              type: 'line',
              visible: true,
              style: {
                stroke: 'rgba(47, 59, 82, 0.9)',
                opacity: 0.2
              }
            },
            label: {
              visible: true,
              style: {
                fill: '#ebebeb',
                fontSize: 14
              },
              labelBackground: {
                style: {
                  fill: 'rgba(47, 59, 82, 0.9)',
                  cornerRadius: 4
                }
              }
            }
          }
        }
      },
      background: '#1f2329',
      fontFamily:
        'PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol',
      mark: {
        symbol: {
          state: {
            hover: {
              fillOpacity: 1,
              stroke: '#ffffff',
              lineWidth: 1,
              strokeOpacity: 1,
              scaleX: 1.2,
              scaleY: 1.2
            },
            dimension_hover: {
              fillOpacity: 1,
              scaleX: 1,
              scaleY: 1,
              stroke: '#ffffff',
              lineWidth: 1,
              strokeOpacity: 1
            }
          }
        },
        rect: {
          state: {
            hover: {
              fillOpacity: 1,
              scaleX: 1,
              scaleY: 1,
              stroke: '#ffffff',
              lineWidth: 1,
              strokeOpacity: 1
            },
            dimension_hover: {
              fillOpacity: 1,
              scaleX: 1,
              scaleY: 1,
              stroke: '#ffffff',
              lineWidth: 1,
              strokeOpacity: 1
            }
          }
        },
        arc: {
          state: {
            hover: {
              fillOpacity: 1,
              scaleX: 1.2,
              scaleY: 1.2,
              stroke: '#ffffff',
              lineWidth: 1,
              strokeOpacity: 1
            }
          }
        }
      }
    }
  };

  const vchart = new VChart(lightSpec, { dom: CONTAINER_ID });
  vchart.renderAsync();

  setTimeout(() => {
    vchart.updateSpec(darkSpec);
  }, 1000);

Current Behavior

Expected Behavior

fix it

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response