sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 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
src/assets/icons/index.js
+4
View File
@@ -42,6 +42,7 @@ import {
cilCheckCircle,
cilCode,
cilCommentSquare,
cilContrast,
cilCursor,
cilDrop,
cilDollar,
@@ -72,6 +73,7 @@ import {
cilSpeech,
cilSpeedometer,
cilStar,
cilSun,
cilTask,
cilUser,
cilUserFemale,
@@ -98,6 +100,7 @@ export const iconsSet = Object.assign(
cilCheckCircle,
cilCode,
cilCommentSquare,
cilContrast,
cilCursor,
cilDrop,
cilDollar,
@@ -128,6 +131,7 @@ export const iconsSet = Object.assign(
cilSpeech,
cilSpeedometer,
cilStar,
cilSun,
cilTask,
cilUser,
cilUserFemale,
src/components/AppHeader.vue
+58
View File
@@ -34,6 +34,58 @@
<CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
</CNavLink>
</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 />
</CHeaderNav>
</CContainer>
@@ -45,6 +97,7 @@
</template>
<script>
import { useColorModes } from '@coreui/vue/'
import AppBreadcrumb from './AppBreadcrumb'
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
import { logo } from '@/assets/brand/logo'
@@ -55,8 +108,13 @@ export default {
AppHeaderDropdownAccnt,
},
setup() {
const { getColorMode, setColorMode } = useColorModes(
'coreui-free-vue-admin-template-theme',
)
return {
logo,
setColorMode,
getColorMode,
}
},
}
src/layouts/DefaultLayout.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<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 />
<div class="body flex-grow-1 px-3">
<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 {
&:not(:first-child) {
margin-top: 1.5rem;
}
.tab-content {
background-color: $light-50 !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;
background-color: var(--#{$prefix}tertiary-bg) !important;
}
& + p {
margin-top: 1.5rem
margin-top: 1.5rem;
}
// Components examples
.preview,
.preview .col {
.preview {
+ p {
margin-top: 2rem;
}
@@ -105,5 +95,20 @@
margin-top: .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
//
// 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-rtl: true;
// Import styles
@import "~@coreui/coreui/scss/coreui";
// Import CoreUI for React components library
@import "@coreui/coreui/scss/coreui";
// Import Chart.js Tooltips
@import "~@coreui/chartjs/scss/tooltips";
// Import Chart.js custom tooltips styles
@import "@coreui/chartjs/scss/coreui-chartjs";
@import "layout";
@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";
src/views/Dashboard.vue
+1 -1
View File
@@ -194,7 +194,7 @@
</CRow>
<br />
<CTable align="middle" class="mb-0 border" hover responsive>
<CTableHead color="light">
<CTableHead class="bg-body-secondary">
<CTableRow>
<CTableHeaderCell class="text-center">
<CIcon name="cil-people" />
src/views/charts/MainChartExample.vue
+47 -20
View File
@@ -1,21 +1,13 @@
<template>
<CChart
type="line"
:data="data"
:options="options"
@get-dataset-at-event="aa"
@get-element-at-event="aa"
@get-elements-at-event="aa"
/>
<CChart type="line" :data="data" :options="options" ref="mainChartRef" />
</template>
<script>
import { onMounted, ref } from 'vue'
import { CChart } from '@coreui/vue-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils/src'
import { getStyle } from '@coreui/utils'
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
export default {
name: 'MainChartExample',
@@ -23,12 +15,13 @@ export default {
CChart,
},
setup() {
const mainChartRef = ref()
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
borderColor: getStyle('--cui-info'),
pointHoverBackgroundColor: getStyle('--cui-info'),
borderWidth: 2,
@@ -81,15 +74,26 @@ export default {
scales: {
x: {
grid: {
color: getStyle('--cui-border-color-translucent'),
drawOnChartArea: false,
},
ticks: {
color: getStyle('--cui-body-color'),
},
},
y: {
border: {
color: getStyle('--cui-border-color-translucent'),
},
grid: {
color: getStyle('--cui-border-color-translucent'),
},
ticks: {
beginAtZero: true,
color: getStyle('--cui-body-color'),
max: 250,
maxTicksLimit: 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 {
data,
mainChartRef,
options,
}
},
methods: {
aa(value, value2) {
console.log(value)
console.log(value2)
},
},
}
</script>
src/views/widgets/WidgetsStatsTypeA.vue
+24 -2
View File
@@ -30,6 +30,7 @@
type="line"
class="mt-3 mx-3"
style="height: 70px"
ref="widgetChartRef1"
:data="{
labels: [
'January',
@@ -45,7 +46,7 @@
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#321fdb',
pointBackgroundColor: getStyle('--cui-primary'),
data: [68, 59, 84, 84, 51, 55, 40],
},
],
@@ -125,6 +126,7 @@
type="line"
class="mt-3 mx-3"
style="height: 70px"
ref="widgetChartRef2"
:data="{
labels: [
'January',
@@ -140,7 +142,7 @@
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#39f',
pointBackgroundColor: getStyle('--cui-info'),
data: [1, 18, 9, 17, 34, 22, 11],
},
],
@@ -369,11 +371,31 @@
</template>
<script>
import { onMounted, ref } from 'vue'
import { CChart } from '@coreui/vue-chartjs'
import { getStyle } from '@coreui/utils'
export default {
name: 'WidgetsStatsA',
components: {
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>