Currently, my project utilizes Vue 3 with the composition API and Vuetify for the UI.
I am looking to utilize a color that is already defined in a Vuetify theme variable within my CSS, similar to how I have done it previously in JavaScript.
Although I attempted using CSS var(), it was not successful in achieving the desired outcome.
For more specific details, please refer below this message.
Thank you!
Hello! Below is the template I am working with:
<template>
<div class="container">
<div class="mx-auto">
<div class="demo-app-sidebar-section">
<b>Total Events ({{ calendarEvents?.length }})</b>
<!-- create a small colored cube here -->
<ul>
<li>
<b
>Registered Events
<span class="legend registered"></span> <!-- issue here --->
</b>
</li>
<li>
<b
>Non-registered Events<span class="legend nonRegistered"></span> <!-- problem here --->
</b>
</li>
</ul>
</div>
</div>
<div class="mx-auto">
<FullCalendar class="demo-app-calendar" :options="calendarOptions">
<template #eventContent="arg">
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</div>
</div>
</template>
Below are the CSS classes used:
.legend {
width: 1em;
height: 1em;
display: inline-block;
margin-left: 0.5em;
}
.legend.registered {
background-color: #03dac6; /*issue here*/
}
.legend.nonRegistered {
background-color: #e95196; /*problem here*/
}
In another file, the theme is set as follows:
const themeLight: ThemeDefinition = {
dark: false,
colors: {
background: "#F2F0F1",
surface: "#FFFFFF",
primary: "#E95196",
"primary-darken-1": "#3700B3",
secondary: "#03DAC6",
"secondary-darken-1": "#018786",
error: "#B00020",
info: "#2196F3",
success: "#4CAF50",
warning: "#FDBB37",
},
};
// Dark theme definition
const themeDark: ThemeDefinition = {
dark: true,
colors: {
background: "#121212",
surface: "#212121",
primary: "#6B89C9",
"primary-darken-1": "#3700B3",
secondary: "#03DAC6",
"secondary-darken-1": "#018786",
error: "#B00020",
info: "#2196F3",
success: "#4CAF50",
warning: "#FDBB37",
},
};
How can I use
vuetify.theme.current.value.colors.secondary,const calendarEvents = eventResult.map((event) => {
let isInscrit = ref(
event.users?.find((userV) => userV.email === user?.value?.email) !==
undefined
);
if (isInscrit.value) {
return {
id: event.id,
title: event.name,
start: event.date,
backgroundColor: vuetify.theme.current.value.colors.secondary, // Set green background for registered users
};
} else {
return {
id: event.id,
title: event.name,
start: event.date,
backgroundColor: vuetify.theme.current.value.colors.primary, // Set pink background for non-registered users
};
}
});
However, in terms of CSS, how can I achieve this?
Thank you!