sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: add color modes support

Browse Source
This commit is contained in:
mrholek
2023-06-12 23:33:29 +02:00
parent fcba592f47
commit a76226fb16
10 changed files with 176 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+11 -4
View File
@@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- <!--
* CoreUI Vue.js Admin Template * CoreUI Free Vue.js Admin Template
* @version v4.2.0 * @version v4.2.0
* @link https://coreui.io/vue/ * @link https://coreui.io/product/free-vue-admin-template/
* Copyright (c) 2021 creativeLabs Łukasz Holeczek * Copyright (c) 2023 creativeLabs Łukasz Holeczek
* License (https://coreui.io/pro/license) * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
--> -->
<html> <html>
<head> <head>
@@ -32,6 +32,13 @@
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<script>
const userMode = localStorage.getItem('coreui-free-vue-admin-template-theme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.dataset.coreuiTheme = 'dark';
}
</script>
</head> </head>
<body> <body>
<noscript> <noscript>
src/assets/icons/index.js
+4
View File
@@ -42,6 +42,7 @@ import {
cilCheckCircle, cilCheckCircle,
cilCode, cilCode,
cilCommentSquare, cilCommentSquare,
cilContrast,
cilCursor, cilCursor,
cilDrop, cilDrop,
cilDollar, cilDollar,
@@ -72,6 +73,7 @@ import {
cilSpeech, cilSpeech,
cilSpeedometer, cilSpeedometer,
cilStar, cilStar,
cilSun,
cilTask, cilTask,
cilUser, cilUser,
cilUserFemale, cilUserFemale,
@@ -98,6 +100,7 @@ export const iconsSet = Object.assign(
cilCheckCircle, cilCheckCircle,
cilCode, cilCode,
cilCommentSquare, cilCommentSquare,
cilContrast,
cilCursor, cilCursor,
cilDrop, cilDrop,
cilDollar, cilDollar,
@@ -128,6 +131,7 @@ export const iconsSet = Object.assign(
cilSpeech, cilSpeech,
cilSpeedometer, cilSpeedometer,
cilStar, cilStar,
cilSun,
cilTask, cilTask,
cilUser, cilUser,
cilUserFemale, cilUserFemale,
src/components/AppHeader.vue
+58
View File
@@ -34,6 +34,58 @@
<CIcon class="mx-2" icon="cil-envelope-open" size="lg" /> <CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
<li class="nav-item py-2 py-lg-1">
<div
class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
></div>
<hr class="d-lg-none my-2 text-white-50" />
</li>
<CDropdown variant="nav-item" placement="bottom-end">
<CDropdownToggle :caret="false">
<CIcon v-if="getColorMode() === 'dark'" icon="cil-moon" size="xl" />
<CIcon
v-else-if="getColorMode() === 'light'"
icon="cil-sun"
size="xl"
/>
<CIcon v-else icon="cil-contrast" size="xl" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem
:active="getColorMode() === 'light'"
class="d-flex align-items-center"
component="button"
type="button"
@click="setColorMode('light')"
>
<CIcon class="me-2" icon="cil-sun" size="lg" /> Light
</CDropdownItem>
<CDropdownItem
:active="getColorMode() === 'dark'"
class="d-flex align-items-center"
component="button"
type="button"
@click="setColorMode('dark')"
>
<CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
</CDropdownItem>
<CDropdownItem
:active="getColorMode() === 'auto'"
class="d-flex align-items-center"
component="button"
type="button"
@click="setColorMode('auto')"
>
<CIcon class="me-2" icon="cil-contrast" size="lg" /> Auto
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<li class="nav-item py-2 py-lg-1">
<div
class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
></div>
<hr class="d-lg-none my-2 text-white-50" />
</li>
<AppHeaderDropdownAccnt /> <AppHeaderDropdownAccnt />
</CHeaderNav> </CHeaderNav>
</CContainer> </CContainer>
@@ -45,6 +97,7 @@
</template> </template>
<script> <script>
import { useColorModes } from '@coreui/vue/'
import AppBreadcrumb from './AppBreadcrumb' import AppBreadcrumb from './AppBreadcrumb'
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt' import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
import { logo } from '@/assets/brand/logo' import { logo } from '@/assets/brand/logo'
@@ -55,8 +108,13 @@ export default {
AppHeaderDropdownAccnt, AppHeaderDropdownAccnt,
}, },
setup() { setup() {
const { getColorMode, setColorMode } = useColorModes(
'coreui-free-vue-admin-template-theme',
)
return { return {
logo, logo,
setColorMode,
getColorMode,
} }
}, },
} }
src/layouts/DefaultLayout.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<AppSidebar /> <AppSidebar />
<div class="wrapper d-flex flex-column min-vh-100 bg-light"> <div class="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
<AppHeader /> <AppHeader />
<div class="body flex-grow-1 px-3"> <div class="body flex-grow-1 px-3">
<CContainer lg> <CContainer lg>
src/styles/_example.scss
+23 -18
View File
@@ -1,33 +1,23 @@
/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
@import "@coreui/coreui/scss/functions";
@import "@coreui/coreui/scss/variables";
@import "@coreui/coreui/scss/mixins";
.example { .example {
&:not(:first-child) { &:not(:first-child) {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.tab-content { .tab-content {
background-color: $light-50 !important; background-color: var(--#{$prefix}tertiary-bg) !important;
@at-root .dark-theme & {
background-color: rgba(255, 255, 255, .1) !important;
}
}
code[class*="language-"],
pre[class*="language-"] {
font-size: .875rem !important;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: transparent;
} }
& + p { & + p {
margin-top: 1.5rem margin-top: 1.5rem;
} }
// Components examples // Components examples
.preview, .preview {
.preview .col {
+ p { + p {
margin-top: 2rem; margin-top: 2rem;
} }
@@ -105,5 +95,20 @@
margin-top: .5rem; margin-top: .5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.docs-example-modal {
.modal {
position: static;
display: block;
}
}
} }
} }
@if $enable-dark-mode {
@include color-mode(dark) {
.example .tab-content {
background-color: var(--#{$prefix}secondary-bg) !important;
}
}
}
src/styles/_variables.scss
+2
View File
@@ -1 +1,3 @@
// Variable overrides // Variable overrides
//
// If you want to customize your project please add your variables below.
src/styles/style.scss
+5 -5
View File
@@ -4,14 +4,14 @@
$enable-ltr: true; $enable-ltr: true;
$enable-rtl: true; $enable-rtl: true;
// Import styles // Import CoreUI for React components library
@import "~@coreui/coreui/scss/coreui"; @import "@coreui/coreui/scss/coreui";
// Import Chart.js Tooltips // Import Chart.js custom tooltips styles
@import "~@coreui/chartjs/scss/tooltips"; @import "@coreui/chartjs/scss/coreui-chartjs";
@import "layout"; @import "layout";
@import "example"; @import "example";
// If you want to add something do it here // If you want to add custom CSS you can put it here.
@import "custom"; @import "custom";
src/views/Dashboard.vue
+1 -1
View File
@@ -194,7 +194,7 @@
</CRow> </CRow>
<br /> <br />
<CTable align="middle" class="mb-0 border" hover responsive> <CTable align="middle" class="mb-0 border" hover responsive>
<CTableHead color="light"> <CTableHead class="bg-body-secondary">
<CTableRow> <CTableRow>
<CTableHeaderCell class="text-center"> <CTableHeaderCell class="text-center">
<CIcon name="cil-people" /> <CIcon name="cil-people" />
src/views/charts/MainChartExample.vue
+47 -20
View File
@@ -1,21 +1,13 @@
<template> <template>
<CChart <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
type="line"
:data="data"
:options="options"
@get-dataset-at-event="aa"
@get-element-at-event="aa"
@get-elements-at-event="aa"
/>
</template> </template>
<script> <script>
import { onMounted, ref } from 'vue'
import { CChart } from '@coreui/vue-chartjs' import { CChart } from '@coreui/vue-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils/src' import { getStyle } from '@coreui/utils'
function random(min, max) { const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
return Math.floor(Math.random() * (max - min + 1) + min)
}
export default { export default {
name: 'MainChartExample', name: 'MainChartExample',
@@ -23,12 +15,13 @@ export default {
CChart, CChart,
}, },
setup() { setup() {
const mainChartRef = ref()
const data = { const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: hexToRgba(getStyle('--cui-info'), 10), backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
borderColor: getStyle('--cui-info'), borderColor: getStyle('--cui-info'),
pointHoverBackgroundColor: getStyle('--cui-info'), pointHoverBackgroundColor: getStyle('--cui-info'),
borderWidth: 2, borderWidth: 2,
@@ -81,15 +74,26 @@ export default {
scales: { scales: {
x: { x: {
grid: { grid: {
color: getStyle('--cui-border-color-translucent'),
drawOnChartArea: false, drawOnChartArea: false,
}, },
ticks: {
color: getStyle('--cui-body-color'),
},
}, },
y: { y: {
border: {
color: getStyle('--cui-border-color-translucent'),
},
grid: {
color: getStyle('--cui-border-color-translucent'),
},
ticks: { ticks: {
beginAtZero: true, beginAtZero: true,
color: getStyle('--cui-body-color'),
max: 250,
maxTicksLimit: 5, maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5), stepSize: Math.ceil(250 / 5),
max: 250,
}, },
}, },
}, },
@@ -106,16 +110,39 @@ export default {
}, },
} }
onMounted(() => {
document.documentElement.addEventListener('ColorSchemeChange', () => {
if (mainChartRef.value) {
mainChartRef.value.chart,
(options.scales.x.grid.borderColor = getStyle(
'--cui-border-color-translucent',
))
mainChartRef.value.chart,
(options.scales.x.grid.color = getStyle(
'--cui-border-color-translucent',
))
mainChartRef.value.chart,
(options.scales.x.ticks.color = getStyle('--cui-body-color'))
mainChartRef.value.chart,
(options.scales.y.grid.borderColor = getStyle(
'--cui-border-color-translucent',
))
mainChartRef.value.chart,
(options.scales.y.grid.color = getStyle(
'--cui-border-color-translucent',
))
mainChartRef.value.chart,
(options.scales.y.ticks.color = getStyle('--cui-body-color'))
mainChartRef.value.chart.update()
}
})
})
return { return {
data, data,
mainChartRef,
options, options,
} }
}, },
methods: {
aa(value, value2) {
console.log(value)
console.log(value2)
},
},
} }
</script> </script>
src/views/widgets/WidgetsStatsTypeA.vue
+24 -2
View File
@@ -30,6 +30,7 @@
type="line" type="line"
class="mt-3 mx-3" class="mt-3 mx-3"
style="height: 70px" style="height: 70px"
ref="widgetChartRef1"
:data="{ :data="{
labels: [ labels: [
'January', 'January',
@@ -45,7 +46,7 @@
label: 'My First dataset', label: 'My First dataset',
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)', borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#321fdb', pointBackgroundColor: getStyle('--cui-primary'),
data: [68, 59, 84, 84, 51, 55, 40], data: [68, 59, 84, 84, 51, 55, 40],
}, },
], ],
@@ -125,6 +126,7 @@
type="line" type="line"
class="mt-3 mx-3" class="mt-3 mx-3"
style="height: 70px" style="height: 70px"
ref="widgetChartRef2"
:data="{ :data="{
labels: [ labels: [
'January', 'January',
@@ -140,7 +142,7 @@
label: 'My First dataset', label: 'My First dataset',
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)', borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#39f', pointBackgroundColor: getStyle('--cui-info'),
data: [1, 18, 9, 17, 34, 22, 11], data: [1, 18, 9, 17, 34, 22, 11],
}, },
], ],
@@ -369,11 +371,31 @@
</template> </template>
<script> <script>
import { onMounted, ref } from 'vue'
import { CChart } from '@coreui/vue-chartjs' import { CChart } from '@coreui/vue-chartjs'
import { getStyle } from '@coreui/utils'
export default { export default {
name: 'WidgetsStatsA', name: 'WidgetsStatsA',
components: { components: {
CChart, CChart,
}, },
setup() {
const widgetChartRef1 = ref()
const widgetChartRef2 = ref()
onMounted(() => {
document.documentElement.addEventListener('ColorSchemeChange', () => {
widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
getStyle('--cui-primary')
widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
getStyle('--cui-info')
widgetChartRef1.value.chart.update()
widgetChartRef2.value.chart.update()
})
})
return { getStyle, widgetChartRef1, widgetChartRef2 }
},
} }
</script> </script>