Skip to content

Commit a76226f

Browse files
mrholekmrholek
committed
feat: add color modes support
1 parent fcba592 commit a76226f

File tree

10 files changed

+176
-51
lines changed

10 files changed

+176
-51
lines changed

‎public/index.html‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!DOCTYPE html>
22
<!--
3-
* CoreUI Vue.js Admin Template
3+
* CoreUI Free Vue.js Admin Template
44
* @version v4.2.0
5-
* @link https://coreui.io/vue/
6-
* Copyright (c) 2021 creativeLabs Łukasz Holeczek
7-
* License (https://coreui.io/pro/license)
5+
* @link https://coreui.io/product/free-vue-admin-template/
6+
* Copyright (c) 2023 creativeLabs Łukasz Holeczek
7+
* Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
88
-->
99
<html>
1010
<head>
@@ -32,6 +32,13 @@
3232
<meta name="msapplication-TileColor" content="#ffffff">
3333
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
3434
<meta name="theme-color" content="#ffffff">
35+
<script>
36+
const userMode = localStorage.getItem('coreui-free-vue-admin-template-theme');
37+
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
38+
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
39+
document.documentElement.dataset.coreuiTheme = 'dark';
40+
}
41+
</script>
3542
</head>
3643
<body>
3744
<noscript>

‎src/assets/icons/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import {
4242
cilCheckCircle,
4343
cilCode,
4444
cilCommentSquare,
45+
cilContrast,
4546
cilCursor,
4647
cilDrop,
4748
cilDollar,
@@ -72,6 +73,7 @@ import {
7273
cilSpeech,
7374
cilSpeedometer,
7475
cilStar,
76+
cilSun,
7577
cilTask,
7678
cilUser,
7779
cilUserFemale,
@@ -98,6 +100,7 @@ export const iconsSet = Object.assign(
98100
cilCheckCircle,
99101
cilCode,
100102
cilCommentSquare,
103+
cilContrast,
101104
cilCursor,
102105
cilDrop,
103106
cilDollar,
@@ -128,6 +131,7 @@ export const iconsSet = Object.assign(
128131
cilSpeech,
129132
cilSpeedometer,
130133
cilStar,
134+
cilSun,
131135
cilTask,
132136
cilUser,
133137
cilUserFemale,

‎src/components/AppHeader.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,58 @@
3434
<CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
3535
</CNavLink>
3636
</CNavItem>
37+
<li class="nav-item py-2 py-lg-1">
38+
<div
39+
class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
40+
></div>
41+
<hr class="d-lg-none my-2 text-white-50" />
42+
</li>
43+
<CDropdown variant="nav-item" placement="bottom-end">
44+
<CDropdownToggle :caret="false">
45+
<CIcon v-if="getColorMode() === 'dark'" icon="cil-moon" size="xl" />
46+
<CIcon
47+
v-else-if="getColorMode() === 'light'"
48+
icon="cil-sun"
49+
size="xl"
50+
/>
51+
<CIcon v-else icon="cil-contrast" size="xl" />
52+
</CDropdownToggle>
53+
<CDropdownMenu>
54+
<CDropdownItem
55+
:active="getColorMode() === 'light'"
56+
class="d-flex align-items-center"
57+
component="button"
58+
type="button"
59+
@click="setColorMode('light')"
60+
>
61+
<CIcon class="me-2" icon="cil-sun" size="lg" /> Light
62+
</CDropdownItem>
63+
<CDropdownItem
64+
:active="getColorMode() === 'dark'"
65+
class="d-flex align-items-center"
66+
component="button"
67+
type="button"
68+
@click="setColorMode('dark')"
69+
>
70+
<CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
71+
</CDropdownItem>
72+
<CDropdownItem
73+
:active="getColorMode() === 'auto'"
74+
class="d-flex align-items-center"
75+
component="button"
76+
type="button"
77+
@click="setColorMode('auto')"
78+
>
79+
<CIcon class="me-2" icon="cil-contrast" size="lg" /> Auto
80+
</CDropdownItem>
81+
</CDropdownMenu>
82+
</CDropdown>
83+
<li class="nav-item py-2 py-lg-1">
84+
<div
85+
class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
86+
></div>
87+
<hr class="d-lg-none my-2 text-white-50" />
88+
</li>
3789
<AppHeaderDropdownAccnt />
3890
</CHeaderNav>
3991
</CContainer>
@@ -45,6 +97,7 @@
4597
</template>
4698

4799
<script>
100+
import { useColorModes } from '@coreui/vue/'
48101
import AppBreadcrumb from './AppBreadcrumb'
49102
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
50103
import { logo } from '@/assets/brand/logo'
@@ -55,8 +108,13 @@ export default {
55108
AppHeaderDropdownAccnt,
56109
},
57110
setup() {
111+
const { getColorMode, setColorMode } = useColorModes(
112+
'coreui-free-vue-admin-template-theme',
113+
)
58114
return {
59115
logo,
116+
setColorMode,
117+
getColorMode,
60118
}
61119
},
62120
}

‎src/layouts/DefaultLayout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<AppSidebar />
4-
<div class="wrapper d-flex flex-column min-vh-100 bg-light">
4+
<div class="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
55
<AppHeader />
66
<div class="body flex-grow-1 px-3">
77
<CContainer lg>

‎src/styles/_example.scss‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,23 @@
1+
/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
2+
@import "@coreui/coreui/scss/functions";
3+
@import "@coreui/coreui/scss/variables";
4+
@import "@coreui/coreui/scss/mixins";
5+
16
.example {
27
&:not(:first-child) {
38
margin-top: 1.5rem;
49
}
510

611
.tab-content {
7-
background-color: $light-50 !important;
8-
9-
@at-root .dark-theme & {
10-
background-color: rgba(255, 255, 255, .1) !important;
11-
}
12-
}
13-
14-
code[class*="language-"],
15-
pre[class*="language-"] {
16-
font-size: .875rem !important;
17-
}
18-
19-
:not(pre) > code[class*="language-"],
20-
pre[class*="language-"] {
21-
background: transparent;
12+
background-color: var(--#{$prefix}tertiary-bg) !important;
2213
}
2314

2415
& + p {
25-
margin-top: 1.5rem
16+
margin-top: 1.5rem;
2617
}
2718

2819
// Components examples
29-
.preview,
30-
.preview .col {
20+
.preview {
3121
+ p {
3222
margin-top: 2rem;
3323
}
@@ -105,5 +95,20 @@
10595
margin-top: .5rem;
10696
margin-bottom: .5rem;
10797
}
98+
99+
.docs-example-modal {
100+
.modal {
101+
position: static;
102+
display: block;
103+
}
104+
}
108105
}
109106
}
107+
108+
@if $enable-dark-mode {
109+
@include color-mode(dark) {
110+
.example .tab-content {
111+
background-color: var(--#{$prefix}secondary-bg) !important;
112+
}
113+
}
114+
}

‎src/styles/_variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
// Variable overrides
2+
//
3+
// If you want to customize your project please add your variables below.

‎src/styles/style.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
$enable-ltr: true;
55
$enable-rtl: true;
66

7-
// Import styles
8-
@import "~@coreui/coreui/scss/coreui";
7+
// Import CoreUI for React components library
8+
@import "@coreui/coreui/scss/coreui";
99

10-
// Import Chart.js Tooltips
11-
@import "~@coreui/chartjs/scss/tooltips";
10+
// Import Chart.js custom tooltips styles
11+
@import "@coreui/chartjs/scss/coreui-chartjs";
1212

1313
@import "layout";
1414
@import "example";
1515

16-
// If you want to add something do it here
16+
// If you want to add custom CSS you can put it here.
1717
@import "custom";

‎src/views/Dashboard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@
194194
</CRow>
195195
<br />
196196
<CTable align="middle" class="mb-0 border" hover responsive>
197-
<CTableHead color="light">
197+
<CTableHead class="bg-body-secondary">
198198
<CTableRow>
199199
<CTableHeaderCell class="text-center">
200200
<CIcon name="cil-people" />

‎src/views/charts/MainChartExample.vue‎

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
11
<template>
2-
<CChart
3-
type="line"
4-
:data="data"
5-
:options="options"
6-
@get-dataset-at-event="aa"
7-
@get-element-at-event="aa"
8-
@get-elements-at-event="aa"
9-
/>
2+
<CChart type="line" :data="data" :options="options" ref="mainChartRef" />
103
</template>
114

125
<script>
6+
import { onMounted, ref } from 'vue'
137
import { CChart } from '@coreui/vue-chartjs'
14-
import { getStyle, hexToRgba } from '@coreui/utils/src'
8+
import { getStyle } from '@coreui/utils'
159
16-
function random(min, max) {
17-
return Math.floor(Math.random() * (max - min + 1) + min)
18-
}
10+
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
1911
2012
export default {
2113
name: 'MainChartExample',
2214
components: {
2315
CChart,
2416
},
2517
setup() {
18+
const mainChartRef = ref()
2619
const data = {
2720
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
2821
datasets: [
2922
{
3023
label: 'My First dataset',
31-
backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
24+
backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
3225
borderColor: getStyle('--cui-info'),
3326
pointHoverBackgroundColor: getStyle('--cui-info'),
3427
borderWidth: 2,
@@ -81,15 +74,26 @@ export default {
8174
scales: {
8275
x: {
8376
grid: {
77+
color: getStyle('--cui-border-color-translucent'),
8478
drawOnChartArea: false,
8579
},
80+
ticks: {
81+
color: getStyle('--cui-body-color'),
82+
},
8683
},
8784
y: {
85+
border: {
86+
color: getStyle('--cui-border-color-translucent'),
87+
},
88+
grid: {
89+
color: getStyle('--cui-border-color-translucent'),
90+
},
8891
ticks: {
8992
beginAtZero: true,
93+
color: getStyle('--cui-body-color'),
94+
max: 250,
9095
maxTicksLimit: 5,
9196
stepSize: Math.ceil(250 / 5),
92-
max: 250,
9397
},
9498
},
9599
},
@@ -106,16 +110,39 @@ export default {
106110
},
107111
}
108112
113+
onMounted(() => {
114+
document.documentElement.addEventListener('ColorSchemeChange', () => {
115+
if (mainChartRef.value) {
116+
mainChartRef.value.chart,
117+
(options.scales.x.grid.borderColor = getStyle(
118+
'--cui-border-color-translucent',
119+
))
120+
mainChartRef.value.chart,
121+
(options.scales.x.grid.color = getStyle(
122+
'--cui-border-color-translucent',
123+
))
124+
mainChartRef.value.chart,
125+
(options.scales.x.ticks.color = getStyle('--cui-body-color'))
126+
mainChartRef.value.chart,
127+
(options.scales.y.grid.borderColor = getStyle(
128+
'--cui-border-color-translucent',
129+
))
130+
mainChartRef.value.chart,
131+
(options.scales.y.grid.color = getStyle(
132+
'--cui-border-color-translucent',
133+
))
134+
mainChartRef.value.chart,
135+
(options.scales.y.ticks.color = getStyle('--cui-body-color'))
136+
mainChartRef.value.chart.update()
137+
}
138+
})
139+
})
140+
109141
return {
110142
data,
143+
mainChartRef,
111144
options,
112145
}
113146
},
114-
methods: {
115-
aa(value, value2) {
116-
console.log(value)
117-
console.log(value2)
118-
},
119-
},
120147
}
121148
</script>

0 commit comments

Comments
 (0)