Skip to content

Commit edd41dc

Browse files
mrholekmrholek
committed
refactor: update color mode switch
1 parent e489d34 commit edd41dc

File tree

3 files changed

+79
-30
lines changed

3 files changed

+79
-30
lines changed

‎src/js/color-modes.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
} else {
2626
document.documentElement.setAttribute('data-coreui-theme', theme)
2727
}
28+
29+
const event = new Event('ColorSchemeChange')
30+
document.documentElement.dispatchEvent(event)
2831
}
2932

3033
setTheme(getPreferredTheme())

‎src/js/main.js‎

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
/**
44
* --------------------------------------------------------------------------
5-
* CoreUI Boostrap Admin Template (v4.2.2): main.js
6-
* Licensed under MIT (https://coreui.io/license)
5+
* CoreUI Boostrap Admin Template main.js
6+
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
77
* --------------------------------------------------------------------------
88
*/
99

@@ -13,13 +13,26 @@ Chart.defaults.plugins.tooltip.enabled = false
1313
Chart.defaults.plugins.tooltip.mode = 'index'
1414
Chart.defaults.plugins.tooltip.position = 'nearest'
1515
Chart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips
16-
Chart.defaults.defaultFontColor = '#646470'
16+
Chart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color')
17+
18+
document.documentElement.addEventListener('ColorSchemeChange', () => {
19+
cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary')
20+
cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info')
21+
mainChart.options.scales.x.grid.color = coreui.Utils.getStyle('--cui-border-color-translucent')
22+
mainChart.options.scales.x.ticks.color = coreui.Utils.getStyle('--cui-body-color')
23+
mainChart.options.scales.y.border.color = coreui.Utils.getStyle('--cui-border-color-translucent')
24+
mainChart.options.scales.y.grid.color = coreui.Utils.getStyle('--cui-border-color-translucent')
25+
mainChart.options.scales.y.ticks.color = coreui.Utils.getStyle('--cui-body-color')
26+
27+
cardChart1.update()
28+
cardChart2.update()
29+
mainChart.update()
30+
})
1731

1832
const random = (min, max) =>
1933
// eslint-disable-next-line no-mixed-operators
2034
Math.floor(Math.random() * (max - min + 1) + min)
2135

22-
// eslint-disable-next-line no-unused-vars
2336
const cardChart1 = new Chart(document.getElementById('card-chart1'), {
2437
type: 'line',
2538
data: {
@@ -43,9 +56,11 @@ const cardChart1 = new Chart(document.getElementById('card-chart1'), {
4356
maintainAspectRatio: false,
4457
scales: {
4558
x: {
59+
border: {
60+
display: false
61+
},
4662
grid: {
47-
display: false,
48-
drawBorder: false
63+
display: false
4964
},
5065
ticks: {
5166
display: false
@@ -77,7 +92,6 @@ const cardChart1 = new Chart(document.getElementById('card-chart1'), {
7792
}
7893
})
7994

80-
// eslint-disable-next-line no-unused-vars
8195
const cardChart2 = new Chart(document.getElementById('card-chart2'), {
8296
type: 'line',
8397
data: {
@@ -101,9 +115,11 @@ const cardChart2 = new Chart(document.getElementById('card-chart2'), {
101115
maintainAspectRatio: false,
102116
scales: {
103117
x: {
118+
border: {
119+
display: false
120+
},
104121
grid: {
105-
display: false,
106-
drawBorder: false
122+
display: false
107123
},
108124
ticks: {
109125
display: false
@@ -212,6 +228,9 @@ const cardChart4 = new Chart(document.getElementById('card-chart4'), {
212228
}
213229
},
214230
y: {
231+
border: {
232+
display: false
233+
},
215234
grid: {
216235
display: false,
217236
drawBorder: false,
@@ -225,15 +244,14 @@ const cardChart4 = new Chart(document.getElementById('card-chart4'), {
225244
}
226245
})
227246

228-
// eslint-disable-next-line no-unused-vars
229247
const mainChart = new Chart(document.getElementById('main-chart'), {
230248
type: 'line',
231249
data: {
232250
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
233251
datasets: [
234252
{
235253
label: 'My First dataset',
236-
backgroundColor: coreui.Utils.hexToRgba(coreui.Utils.getStyle('--cui-info'), 10),
254+
backgroundColor: `rgba(${coreui.Utils.getStyle('--cui-info-rgb')}, .1)`,
237255
borderColor: coreui.Utils.getStyle('--cui-info'),
238256
pointHoverBackgroundColor: '#fff',
239257
borderWidth: 2,
@@ -262,36 +280,51 @@ const mainChart = new Chart(document.getElementById('main-chart'), {
262280
random(50, 200),
263281
random(50, 200)
264282
]
265-
},
266-
{
267-
label: 'My Third dataset',
268-
borderColor: coreui.Utils.getStyle('--cui-danger'),
269-
pointHoverBackgroundColor: '#fff',
270-
borderWidth: 1,
271-
borderDash: [8, 5],
272-
data: [65, 65, 65, 65, 65, 65, 65]
273283
}
274284
]
275285
},
276286
options: {
277287
maintainAspectRatio: false,
278288
plugins: {
289+
annotation: {
290+
annotations: {
291+
line1: {
292+
type: 'line',
293+
yMin: 95,
294+
yMax: 95,
295+
borderColor: coreui.Utils.getStyle('--cui-danger'),
296+
borderWidth: 1,
297+
borderDash: [8, 5]
298+
}
299+
}
300+
},
279301
legend: {
280302
display: false
281303
}
282304
},
283305
scales: {
284306
x: {
285307
grid: {
308+
color: coreui.Utils.getStyle('--cui-border-color-translucent'),
286309
drawOnChartArea: false
310+
},
311+
ticks: {
312+
color: coreui.Utils.getStyle('--cui-body-color')
287313
}
288314
},
289315
y: {
316+
border: {
317+
color: coreui.Utils.getStyle('--cui-border-color-translucent')
318+
},
319+
grid: {
320+
color: coreui.Utils.getStyle('--cui-border-color-translucent')
321+
},
290322
ticks: {
291323
beginAtZero: true,
324+
color: coreui.Utils.getStyle('--cui-body-color'),
325+
max: 250,
292326
maxTicksLimit: 5,
293-
stepSize: Math.ceil(250 / 5),
294-
max: 250
327+
stepSize: Math.ceil(250 / 5)
295328
}
296329
}
297330
},

‎src/js/widgets.js‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
/**
44
* --------------------------------------------------------------------------
5-
* CoreUI Boostrap Admin Template (v4.2.2): main.js
6-
* Licensed under MIT (https://coreui.io/license)
5+
* CoreUI Boostrap Admin Template widgets.js
6+
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
77
* --------------------------------------------------------------------------
88
*/
99

@@ -13,9 +13,16 @@ Chart.defaults.plugins.tooltip.enabled = false
1313
Chart.defaults.plugins.tooltip.mode = 'index'
1414
Chart.defaults.plugins.tooltip.position = 'nearest'
1515
Chart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips
16-
Chart.defaults.defaultFontColor = '#646470'
16+
Chart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color')
17+
18+
document.documentElement.addEventListener('ColorSchemeChange', () => {
19+
cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary')
20+
cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info')
21+
22+
cardChart1.update()
23+
cardChart2.update()
24+
})
1725

18-
// eslint-disable-next-line no-unused-vars
1926
const cardChart1 = new Chart(document.getElementById('card-chart1'), {
2027
type: 'line',
2128
data: {
@@ -39,9 +46,11 @@ const cardChart1 = new Chart(document.getElementById('card-chart1'), {
3946
maintainAspectRatio: false,
4047
scales: {
4148
x: {
49+
border: {
50+
display: false
51+
},
4252
grid: {
43-
display: false,
44-
drawBorder: false
53+
display: false
4554
},
4655
ticks: {
4756
display: false
@@ -73,7 +82,6 @@ const cardChart1 = new Chart(document.getElementById('card-chart1'), {
7382
}
7483
})
7584

76-
// eslint-disable-next-line no-unused-vars
7785
const cardChart2 = new Chart(document.getElementById('card-chart2'), {
7886
type: 'line',
7987
data: {
@@ -97,9 +105,11 @@ const cardChart2 = new Chart(document.getElementById('card-chart2'), {
97105
maintainAspectRatio: false,
98106
scales: {
99107
x: {
108+
border: {
109+
display: false
110+
},
100111
grid: {
101-
display: false,
102-
drawBorder: false
112+
display: false
103113
},
104114
ticks: {
105115
display: false
@@ -208,6 +218,9 @@ const cardChart4 = new Chart(document.getElementById('card-chart4'), {
208218
}
209219
},
210220
y: {
221+
border: {
222+
display: false
223+
},
211224
grid: {
212225
display: false,
213226
drawBorder: false,

0 commit comments

Comments
 (0)