[Solved]-change theme of highscharts (highstock) chart-Highcharts

i had a similar doubt. then i went through the documentation to get this theme code .

and i put it before

highcharts.chart(....) segment

the following is the theme code

highcharts.theme = {
 colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798bf', '#aaeeee', '#ff0066',
  '#eeaaee', '#55bf3b', '#df5353', '#7798bf', '#aaeeee'],
 chart: {
  backgroundcolor: {
     lineargradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
     stops: [
        [0, '#2a2a2b'],
        [1, '#3e3e40']
     ]
  },
  style: {
     fontfamily: '\'unica one\', sans-serif'
  },
  plotbordercolor: '#606063'
 },
 title: {
  style: {
     color: '#e0e0e3',
     texttransform: 'uppercase',
     fontsize: '20px'
  }
 },
 subtitle: {
  style: {
     color: '#e0e0e3',
     texttransform: 'uppercase'
  }
},
xaxis: {
  gridlinecolor: '#707073',
  labels: {
     style: {
        color: '#e0e0e3'
     }
  },
  linecolor: '#707073',
  minorgridlinecolor: '#505053',
  tickcolor: '#707073',
  title: {
     style: {
        color: '#a0a0a3'

     }
  }
},
yaxis: {
  gridlinecolor: '#707073',
  labels: {
     style: {
        color: '#e0e0e3'
     }
  },
  linecolor: '#707073',
  minorgridlinecolor: '#505053',
  tickcolor: '#707073',
  tickwidth: 1,
  title: {
     style: {
        color: '#a0a0a3'
     }
  }
},
tooltip: {
  backgroundcolor: 'rgba(0, 0, 0, 0.85)',
  style: {
     color: '#f0f0f0'
  }
},
plotoptions: {
  series: {
     datalabels: {
        color: '#b0b0b3'
     },
     marker: {
        linecolor: '#333'
     }
  },
  boxplot: {
     fillcolor: '#505053'
  },
  candlestick: {
     linecolor: 'white'
  },
  errorbar: {
     color: 'white'
  }
},
legend: {
  itemstyle: {
     color: '#e0e0e3'
  },
  itemhoverstyle: {
     color: '#fff'
  },
  itemhiddenstyle: {
     color: '#606063'
  }
},
credits: {
  style: {
     color: '#666'
  }
},
labels: {
  style: {
     color: '#707073'
  }
},

drilldown: {
  activeaxislabelstyle: {
     color: '#f0f0f3'
  },
  activedatalabelstyle: {
     color: '#f0f0f3'
  }
},

navigation: {
  buttonoptions: {
     symbolstroke: '#dddddd',
     theme: {
        fill: '#505053'
     }
  }
},

// scroll charts
rangeselector: {
  buttontheme: {
     fill: '#505053',
     stroke: '#000000',
     style: {
        color: '#ccc'
     },
     states: {
        hover: {
           fill: '#707073',
           stroke: '#000000',
           style: {
              color: 'white'
           }
        },
        select: {
           fill: '#000003',
           stroke: '#000000',
           style: {
              color: 'white'
           }
        }
     }
  },
  inputboxbordercolor: '#505053',
  inputstyle: {
     backgroundcolor: '#333',
     color: 'silver'
  },
  labelstyle: {
     color: 'silver'
  }
},

navigator: {
  handles: {
     backgroundcolor: '#666',
     bordercolor: '#aaa'
  },
  outlinecolor: '#ccc',
  maskfill: 'rgba(255,255,255,0.1)',
  series: {
     color: '#7798bf',
     linecolor: '#a6c7ed'
  },
  xaxis: {
     gridlinecolor: '#505053'
  }
},

scrollbar: {
  barbackgroundcolor: '#808083',
  barbordercolor: '#808083',
  buttonarrowcolor: '#ccc',
  buttonbackgroundcolor: '#606063',
  buttonbordercolor: '#606063',
  riflecolor: '#fff',
  trackbackgroundcolor: '#404043',
  trackbordercolor: '#404043'
},

// special colors for some of the
legendbackgroundcolor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
datalabelscolor: '#b0b0b3',
textcolor: '#c0c0c0',
contrasttextcolor: '#f0f0f3',
maskcolor: 'rgba(255,255,255,0.3)'
};

// apply the theme
highcharts.setoptions(highcharts.theme);

simply add this line in your html after all highcharts include scripts

<script src="https://code.highcharts.com/themes/dark-unica.js"></script>

so it could look like this

<script src="https://code.highcharts.com/8.0.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.0.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/treemap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/export-data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/8.0.0/themes/dark-unica.js"></script>

credit: @fernanda ines duran (in the comments)