Este ejercicio era algo que quería emprender hace mucho tiempo. Los componentes de SVAR, me gustan, me parecen bastantes completos, creo que pueden ser muy eficientes para escribir código rápidamente y que también pueden ser muy útiles para aquellos que empiezan en el desarrollo, porque hay muchas que hacen por tí y que suelen estar muy bien hechas.
Ahora bien, para mí, tiene una definición de temas que es bastante «oscuro», ya que no disponen de una documentación sencilla y completa, para que podamos ajustar estos temas a nuestra necesidades o gustos.
Al haber terminado el ejemplo de Tailwind CSS y Daisy UI, ver la facilidad que ofrecen a los desarrolladores para los ajustes de UI de las aplicaciones, pensé que una solución de ese tipo requería los componentes de SVAR.
Objetivo
Integrar Tailwind CSS + Daisy UI + SVAR, de cara a mejorar la funcionalidad de personalización del UI de los desarrollos hecho con los componentes de SVAR.
DEMO: https://fhumanes.com/movie-svar/
Solución técnica
Este desarrollo se había hecho previamente, utilizando los componentes de SVAR, así pues para la funcionalidad y el código de SVAR utilizado, os ruego consultéis la Guía S-008.
También, para la instalación y configuración de Tailwind y Daisy, utilizar la Guía 18. Todo los que se describe en esta guía hay que tenerlo en cuenta en la integración.
El ejemplo, consta de 29 temas, de fondo claro y oscuro, que podemos cambiar a través del selector de tema, en la cabecera.
En este artículo nos vamos a fijar en cómo se ha hecho la integración de Tailwind + Daisy + Svar y qué ficheros hemos utilizado.
Os muestro los ficheros más relevantes:
(1) themes/daisy.-example.css (2) theme/Willow-custom.css (3) themes/custom-theme.css(4) theme/ThemeSelector.svelte(5) app.css(6) App.svelte
/* Este archivo define un tema personalizado para DaisyUI utilizando colores en formato Oklch. */
:root {
color-scheme: light;
--color-base-100: oklch(95.814% 0 0);
--color-base-200: oklch(89.107% 0 0);
--color-base-300: oklch(82.4% 0 0);
--color-base-content: oklch(19.162% 0 0);
--color-primary: oklch(40.723% 0.161 17.53);
--color-primary-content: oklch(88.144% 0.032 17.53);
--color-secondary: oklch(61.676% 0.169 23.865);
--color-secondary-content: oklch(12.335% 0.033 23.865);
--color-accent: oklch(73.425% 0.094 60.729);
--color-accent-content: oklch(14.685% 0.018 60.729);
--color-neutral: oklch(54.367% 0.037 51.902);
--color-neutral-content: oklch(90.873% 0.007 51.902);
--color-info: oklch(69.224% 0.097 207.284);
--color-info-content: oklch(13.844% 0.019 207.284);
--color-success: oklch(60.995% 0.08 174.616);
--color-success-content: oklch(12.199% 0.016 174.616);
--color-warning: oklch(70.081% 0.164 56.844);
--color-warning-content: oklch(14.016% 0.032 56.844);
--color-error: oklch(53.07% 0.241 24.16);
--color-error-content: oklch(90.614% 0.048 24.16);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
:global(.wx-willow-theme) {
/* ========================= */
/* BASE COLORS (DaisyUI) */
/* ========================= */
--wx-color-primary: var(--color-primary) !important;
--wx-color-primary-selected: color-mix(in srgb, var(--color-primary) 20%, transparent);
--wx-color-primary-font: var(--color-primary-content);
--wx-color-secondary: transparent;
--wx-color-secondary-hover: color-mix(in srgb, var(--color-primary) 12%, transparent);
--wx-color-secondary-font: var(--color-primary);
--wx-color-secondary-font-hover: var(--color-primary);
--wx-color-secondary-border: var(--color-primary);
--wx-color-secondary-border-disabled: var(--color-base-300);
--wx-color-success: var(--color-success);
--wx-color-warning: var(--color-warning);
--wx-color-info: var(--color-info);
--wx-color-danger: var(--color-error);
--wx-color-disabled: var(--color-base-200);
--wx-color-disabled-alt: var(--color-base-300);
--wx-color-font: var(--color-base-content);
--wx-color-font-alt: var(--color-neutral);
--wx-color-font-disabled: var(--color-neutral-content);
--wx-color-link: var(--color-primary);
--wx-background: var(----color-base-100);
--wx-background-alt: var(--color-base-200);
--wx-background-hover: var(--color-base-300);
/* ========================= */
/* FONT */
/* ========================= */
--wx-font-family: "Open Sans", Arial, Helvetica, sans-serif;
--wx-font-size: 14px;
--wx-line-height: 20px;
--wx-font-size-md: 14px;
--wx-line-height-md: 24px;
--wx-font-size-hd: 16px;
--wx-line-height-hd: 30px;
--wx-font-size-sm: 12px;
--wx-line-height-sm: 16px;
--wx-font-weight: 400;
--wx-font-weight-md: 600;
--wx-font-weight-b: 700;
/* ========================= */
/* ICONS */
/* ========================= */
--wx-icon-color: var(--color-neutral);
--wx-icon-size: var(--wx-line-height);
--wx-icon-border-radius: 2px;
/* ========================= */
/* BORDERS & SHADOWS */
/* ========================= */
--wx-border: 1px solid var(--color-base-300);
--wx-border-radius: 3px;
--wx-radius-major: 6px;
--wx-border-light: none;
--wx-border-medium: 1px solid var(--color-base-300);
/* Sombras Willow (mantener estética corporativa) */
--wx-shadow-light: 0px 3px 10px rgba(0, 0, 0, 0.10);
--wx-shadow-medium: 0px 4px 20px rgba(0, 0, 0, 0.15);
--wx-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 3px 10px rgba(0, 0, 0, 0.12);
--wx-box-shadow-strong: 0px 4px 20px rgba(0, 0, 0, 0.16);
--wx-padding: 8px;
/* ========================= */
/* INPUTS */
/* ========================= */
--wx-input-font-family: var(--wx-font-family);
--wx-input-font-size: var(--wx-font-size);
--wx-input-line-height: var(--wx-line-height);
--wx-input-font-weight: var(--wx-font-weight);
--wx-input-text-align: left;
--wx-input-font-color: var(--color-base-content);
--wx-input-background: var(--color-base-100);
--wx-input-background-disabled: var(--color-base-200);
--wx-input-placeholder-color: var(--color-neutral);
--wx-input-border: 1px solid var(--color-base-300);
--wx-input-border-focus: 1px solid var(--color-primary);
--wx-input-border-disabled: 1px solid var(--color-base-300);
--wx-input-border-radius: 3px;
--wx-input-height: 32px;
--wx-input-width: 100%;
--wx-input-padding: 5px 8px;
--wx-input-icon-indent: 6px;
--wx-input-icon-color: var(--color-neutral);
--wx-input-icon-size: var(--wx-icon-size);
/* ========================= */
/* BUTTONS */
/* ========================= */
--wx-button-font-family: var(--wx-font-family);
--wx-button-font-size: var(--wx-font-size-md);
--wx-button-line-height: var(--wx-line-height);
--wx-button-font-weight: var(--wx-font-weight-md);
--wx-button-text-transform: none;
--wx-button-font-color: var(--color-base-content);
--wx-button-danger-font-color: var(--color-error-content);
--wx-button-background: var(--color-base-200);
--wx-button-border: 1px solid transparent;
--wx-button-border-radius: var(--wx-border-radius);
--wx-button-height: 32px;
--wx-button-padding: 5px 16px;
--wx-button-icon-indent: 5px;
--wx-button-icon-size: 20px;
--wx-button-pressed: var(--color-base-300);
--wx-button-danger-pressed: color-mix(in srgb, var(--color-error) 80%, black);
--wx-button-primary-pressed: color-mix(in srgb, var(--color-primary) 80%, black);
--wx-button-box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.4) inset, 2px 2px 3px rgba(0, 0, 0, 0.12) inset;
--wx-button-primary-box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.2) inset, 2px 2px 3px rgba(0, 0, 0, 0.16) inset;
/* ========================= */
/* TABS */
/* ========================= */
--wx-tabs-background: var(--color-base-100);
--wx-tabs-background-hover: transparent;
--wx-tabs-hover-border: var(--color-neutral);
--wx-tabs-border-width: 1px;
--wx-tabs-border-radius: var(--wx-border-radius);
--wx-tabs-divider-width: 1px;
--wx-tabs-divider-height: 60%;
--wx-tabs-divider-color: transparent;
--wx-tabs-cell-min-width: 100px;
--wx-tabs-active-background: transparent;
--wx-tabs-active-color: var(--color-primary);
--wx-tabs-active-border: var(--color-primary);
/* ========================= */
/* POPUP / DROPDOWN / MODAL */
/* ========================= */
--wx-popup-background: var(--color-base-100);
--wx-popup-shadow: var(--wx-shadow-light);
--wx-popup-border: 1px solid var(--color-base-300);
--wx-popup-border-radius: var(--wx-border-radius);
--wx-modal-background: var(--color-base-100);
--wx-modal-shadow: var(--wx-shadow-medium);
--wx-modal-border: none;
--wx-modal-border-radius: var(--wx-border-radius);
/* ========================= */
/* NOTICE */
/* ========================= */
--wx-notice-background: var(--color-base-100);
--wx-notice-shadow: var(--wx-shadow-medium);
--wx-notice-border-radius: 0 var(--wx-border-radius) var(--wx-border-radius) 0;
--wx-notice-font-color: var(--color-base-content);
--wx-notice-type-border-color: var(--color-neutral);
--wx-notice-type-font-color: var(--color-base-content);
--wx-notice-type-icon-color: var(--color-neutral);
/* ========================= */
/* CALENDAR */
/* ========================= */
--wx-calendar-font-color: var(--color-base-content);
--wx-calendar-icon-color: var(--color-neutral);
--wx-calendar-header-font-weight: var(--wx-font-weight-md);
/* ========================= */
/* FILTER */
/* ========================= */
--wx-filter-value-color: var(--wx-color-primary);
--wx-filter-and-background: #fcba2e;
--wx-filter-or-background: #77d257;
--wx-filter-and-font-color: var(--wx-color-font);
--wx-filter-or-font-color: var(--wx-color-font);
--wx-filter-border: 1px solid #e6e6e6;
/* ========================= */
/* DATA GRID */
/* ========================= */
--wx-table-select-background: #eaedf5;
--wx-table-select-color: var(--wx-color-font);
--wx-table-border: 1px solid #e6e6e6;
--wx-table-select-border: inset 3px 0 var(--wx-color-primary);
--wx-table-header-border: var(--wx-table-border);
--wx-table-header-cell-border: var(--wx-table-border);
--wx-table-footer-cell-border: var(--wx-table-border);
--wx-table-cell-border: var(--wx-table-border);
--wx-header-font-weight: 600;
--wx-table-header-background: #f2f3f7;
--wx-table-fixed-column-border: 3px solid #e6e6e6;
--wx-table-editor-dropdown-border: var(--wx-table-border);
--wx-table-editor-dropdown-shadow: 0px 4px 20px 0px rgba(44, 47, 60, 0.12);
--wx-table-drag-over-background: var(--wx-background-alt);
--wx-table-drag-zone-shadow: var(--wx-box-shadow);
/* ========================= */
/* ROOT STYLE */
/* ========================= */
font-family: var(--wx-font-family);
font-size: var(--wx-font-size);
line-height: var(--wx-line-height);
font-weight: var(--wx-font-weight);
color: var(--wx-color-font);
background: var(--wx-background);
box-sizing: border-box;
}
:global(.wx-willow-theme .wx-table-menu) {
box-shadow: 0px 4px 20px 0px rgba(44, 47, 60, 0.12);
outline: 1px solid #e6e6e6;
}
/* Estilos personalizados para la aplicación */
/*
main {
position: fixed;
top: 55px; /* debajo de la cabecera fija // 55 desktop || 80 movil */
/* left: 5px; /* pegado al borde izquierdo */
/* width: calc(100% - 10px); /* ocupa todo el ancho si quieres */
/* min-height: calc(99vh - 55px); /* resto de la ventana */
/* height: calc(100dvh - 55px);
overflow-y: auto;
padding: 1rem;
}
@media (max-width: 768px) {
main {
top: 80px; /* debajo de la cabecera fija // 55 desktop || 80 movil */
/* min-height: calc(99vh - 80px); resto de la ventana */
/* height: calc(99dvh - 80px);
overflow-y: auto;
}
}
*/
.app-container {
display: flex;
flex-direction: column;
/* min-height: 97vh; */
}
.content-area {
/* margin-top: 10px; /* Ajusta según la altura de tu encabezado */
flex-grow: 1; /* Permite que el área de contenido ocupe el espacio restante */
/* padding: 30px; */
padding-top: 5px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
/* background-color: #dfe1e2; /* Fondo similar al de tus modales */
}
@media (max-width: 768px) {
.content-area {
/* margin-top: 15px; /* Ajusta según la altura de tu encabezado */
flex-grow: 1; /* Permite que el área de contenido ocupe el espacio restante */
/* padding: 30px; */
padding-top: 5px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
/* background-color: #dfe1e2; /* Fondo similar al de tus modales */
}
}
:global(.wx-sidearea) {
/* Cambio del tamaño de área de edición */
width: 300px;
background-color: var(--color-base-200) !important;
height: 100dvh !important;
}
:global(.wx-willow-theme) {
/* Personalización de variables para el tema Willow .wx-willow-daisy */
--wx-table-select-background: var(--color-base-300); /* #dfdadc; */
/* color de fondo para filas seleccionadas en tablas */
--wx-table-select-color: var(--wx-color-font);
--wx-table-border: 1px solid var(--color-primary); /* borde de las tablas */
--wx-table-select-border: inset 3px 0 var(--color-primary);
--wx-table-header-border: var(--wx-table-border);
--wx-table-header-cell-border: var(--wx-table-border);
--wx-table-footer-cell-border: var(--wx-table-border);
--wx-table-cell-border: var(--wx-table-border);
--wx-header-font-weight: 600;
--wx-table-header-background: var(--color-base-200);
--wx-table-fixed-column-border: 3px solid #e6e6e6;
--wx-table-editor-dropdown-border: var(--wx-table-border);
--wx-table-editor-dropdown-shadow: 0px 4px 20px rgba(44, 47, 60, 0.12);
--wx-table-drag-over-background: var(--wx-background-alt);
--wx-table-drag-zone-shadow: var(--wx-box-shadow);
/* For Filter Builder */
--wx-filter-value-color: var(--wx-color-primary); /* text value color in FilterBuilder*/
--wx-filter-and-background: #fcba2e; /* background for the glue "and" logic button in FilterBuilder*/
--wx-filter-or-background: #77d257; /* background for the glue "or" logic button in FilterBuilder*/
--wx-filter-and-font-color: var(--wx-color-font); /* font color for the glue "and" logic button in FilterBuilder*/
--wx-filter-or-font-color: var(--wx-color-font); /* font color for the glue "or" logic button in FilterBuilder*/
--wx-filter-border: 1px solid #e6e6e6; /* filter border around filter blocks in FilterEditor*/
}
:global(.wx-field-control:not(:has(input, select, check, radio, .wx-richselect)) ) {
/* Estilos para campos sin controles de entrada */
background-color: white;
min-height: 30px;
align-content: center;
padding-left: 5px;
}
:global(.wx-tabs > button) {
/* Estilos para la solapa activa */
background: var(--color-base-100) !important;
color: var(--color-base-content) !important;
/* background-color:#37a9ef !important;
color: white !important; */
}
:global(.wx-menu) {
/* Estilos para el menu contextual */
background: var(--color-accent) !important;
color: var(--color-accent-content) !important;
}
:global(.wx-menu > .wx-option) {
/* Estilos para el menu contextual */
background: var(--color-accent) !important;
color: var(--color-accent-content) !important;
}
:global(.wx-menu > .wx-option:hover) {
background: var(--color-primary) !important;
color: var(--color-primary-content) !important;
}
:global(.wx-menu > .wx-option:hover .wx-icon, .wx-menu > .wx-option:hover .wx-value) {
background: var(--color-primary) !important;
color: var(--color-primary-content) !important;
}
:global(.wx-menu > .wx-option > .wx-icon) {
/* Estilos para el menu contextual */
background: var(--color-accent) !important;
color: var(--color-accent-content) !important;
}
:global(.wx-menu > .wx-option > .wx-value) {
/* Estilos para el menu contextual */
background: var(--color-accent) !important;
color: var(--color-accent-content) !important;
}
:global(.wx-filter-bar > .wx-label) {
color: var(--color-base-content) !important;
}
:global(.wx-field > .wx-label) {
color: var(--color-base-content) !important;
}
:global(.wx-field > .wx-field-control) {
color: var(--color-gray-900) !important;
}
:global(.wx-sections) {
text-align: left;
--wx-field-width: 600px;
margin: 12px 5px 0 5px;
}
@media (max-width: 768px) {
:global(.wx-sections) {
--wx-field-width: 250px;
margin: 12px 5px 0 5px;
}
}
:global(.wx-normal) {
/* Para normalizar el tamaño de los botones */
background-color: var(--color-base-200) !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
:global(.wx-button) {
/* Para normalizar el tamaño de los botones */
border-radius: var(--radius-field) !important;
}
:global(.wx-f-row) {
/* Para normalizar el GRID*/
height: 1px !important;
}
:global(.wx-row) {
/* Para normalizar el GRID*/
background-color: var(--color-base-100)!important;
}
:global(.wx-row.wx-selected) {
/* Para normalizar el GRID*/
background-color: var(--color-primary)!important;
color: var(--color-primary-content)!important;
}
:global(.wx-f-row > .wx-cell) {
/* Para normalizar el GRID*/
height: 1px !important;
padding: 1px !important;
}
:global(.wx-filter-bar) {
/* Para normalizar el filter*/
padding: 2px !important;
}
<script>
let selected = "corporate"; // valor inicial visible en el select
const daisyThemes = [
"light", "dark", "cupcake", "bumblebee", "emerald", "corporate",
"synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden",
"forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black",
"luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade",
"night", "coffee", "winter"
];
function applyTheme() {
document.documentElement.setAttribute("data-theme", selected);
}
</script>
<!-- Tooltip forzado hacia abajo para que siempre se vea -->
<!--<div class="tooltip tooltip-bottom w-full" data-tip="Selecciona un tema DaisyUI"> -->
<select
class="select select-sm w-30 text-base-content min-w-0"
bind:value={selected}
on:change={applyTheme}
>
{#each daisyThemes as theme}
<option value={theme}>{theme}</option>
{/each}
</select>
<!--</div> -->
@import "tailwindcss";
@plugin "daisyui" {
themes: "light", "corporate", "cupcake", "bumblebee", "emerald", "lofi", "pastel", "fantasy", "wireframe", "autumn", "acid", "lemonade", "winter", "nord", "sunrise", "dark", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "black", "luxury", "dracula", "business", "night", "coffee", "dim", "cmyk";
}
<script>
import Router from 'svelte-spa-router';
import { Willow } from '@svar-ui/svelte-core';
import ThemeSelector from './themes/ThemeSelector.svelte';
import MovieList from './MovieGrid.svelte';
import ThemeManager from './ThemeManager.svelte';
import SupportManager from './SupportManager.svelte';
document.documentElement.setAttribute("data-theme", 'corporate'); // Aplica el tema inicial al cargar la aplicación
const routes = {
'/': ThemeManager,
'/movies': MovieList,
'/themes': ThemeManager,
'/supports': SupportManager
};
</script>
<Willow>
<div class="min-h-screen bg-base-100 text-base-content">
<!-- NAVBAR DAISYUI -->
<div class="navbar bg-neutral text-neutral-content px-2 lg:px-4">
<div class="navbar-start gap-2">
<a href="#/" class="text-xl font-bold">Gestión de Cine</a>
</div>
<div class="navbar-end flex gap-2 items-center">
<a href="#/movies" class="btn btn-ghost ">Películas</a>
<a href="#/themes" class="btn btn-ghost ">Temas</a>
<a href="#/supports" class="btn btn-ghost ">Soportes</a>
<ThemeSelector />
</div>
</div>
<!-- CONTENIDO PRINCIPAL -->
<div class="app-container ">
<div class="content-area">
<Router {routes} />
</div>
</div>
</div>
</Willow>
<style global>
@import "./themes/Willow-custom.css"; /* Tema de WWillow con herencia de DaisyUI */
/* @import "./themes/custom-theme.css"; /* Importa tu tema personalizado */
/* Normalización de estilos para SVAR y DaisyUI */
/* Para normalizar el Tooltip de Daisy, porque lo rompe SVAR
.tooltip[data-tip] {
position: relative !important;
pointer-events: auto !important;
background-color: transparent !important;
box-shadow: none !important;
padding: 0 !important;
z-index: 4 !important;
}
*/
/* Estilos personalizados para la aplicación */
/*
main {
position: fixed;
top: 55px; /* debajo de la cabecera fija // 55 desktop || 80 movil */
/* left: 5px; /* pegado al borde izquierdo */
/* width: calc(100% - 10px); /* ocupa todo el ancho si quieres */
/* min-height: calc(99vh - 55px); /* resto de la ventana */
/* height: calc(100dvh - 55px);
overflow-y: auto;
padding: 1rem;
}
@media (max-width: 768px) {
main {
top: 80px; /* debajo de la cabecera fija // 55 desktop || 80 movil */
/* min-height: calc(99vh - 80px); resto de la ventana */
/* height: calc(99dvh - 80px);
overflow-y: auto;
}
}
*/
.app-container {
display: flex;
flex-direction: column;
/* min-height: 97vh; */
}
.content-area {
/* margin-top: 10px; /* Ajusta según la altura de tu encabezado */
flex-grow: 1; /* Permite que el área de contenido ocupe el espacio restante */
/* padding: 30px; */
padding-top: 5px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
/* background-color: #dfe1e2; /* Fondo similar al de tus modales */
}
@media (max-width: 768px) {
.content-area {
/* margin-top: 15px; /* Ajusta según la altura de tu encabezado */
flex-grow: 1; /* Permite que el área de contenido ocupe el espacio restante */
/* padding: 30px; */
padding-top: 5px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
/* background-color: #dfe1e2; /* Fondo similar al de tus modales */
}
}
:global(.wx-sidearea) {
/* Cambio del tamaño de área de edición */
width: 300px;
background-color: var(--color-base-200) !important;
height: 100dvh !important;
}
:global(.wx-willow-theme) {
/* Personalización de variables para el tema Willow .wx-willow-daisy */
--wx-table-select-background: var(--color-base-300); /* #dfdadc; */
/* color de fondo para filas seleccionadas en tablas */
--wx-table-select-color: var(--wx-color-font);
--wx-table-border: 1px solid var(--color-primary); /* borde de las tablas */
--wx-table-select-border: inset 3px 0 var(--color-primary);
--wx-table-header-border: var(--wx-table-border);
--wx-table-header-cell-border: var(--wx-table-border);
--wx-table-footer-cell-border: var(--wx-table-border);
--wx-table-cell-border: var(--wx-table-border);
--wx-header-font-weight: 600;
--wx-table-header-background: var(--color-base-200);
--wx-table-fixed-column-border: 3px solid #e6e6e6;
--wx-table-editor-dropdown-border: var(--wx-table-border);
--wx-table-editor-dropdown-shadow: 0px 4px 20px rgba(44, 47, 60, 0.12);
--wx-table-drag-over-background: var(--wx-background-alt);
--wx-table-drag-zone-shadow: var(--wx-box-shadow);
/* For Filter Builder */
--wx-filter-value-color: var(--wx-color-primary); /* text value color in FilterBuilder*/
--wx-filter-and-background: #fcba2e; /* background for the glue "and" logic button in FilterBuilder*/
--wx-filter-or-background: #77d257; /* background for the glue "or" logic button in FilterBuilder*/
--wx-filter-and-font-color: var(--wx-color-font); /* font color for the glue "and" logic button in FilterBuilder*/
--wx-filter-or-font-color: var(--wx-color-font); /* font color for the glue "or" logic button in FilterBuilder*/
--wx-filter-border: 1px solid #e6e6e6; /* filter border around filter blocks in FilterEditor*/
}
:global(.wx-field-control:not(:has(input, select, check, radio, .wx-richselect)) ) {
/* Estilos para campos sin controles de entrada */
background-color: white;
min-height: 30px;
align-content: center;
padding-left: 5px;
}
:global(.wx-tabs > button) {
/* Estilos para la solapa activa */
background: var(--color-base-100) !important;
color: var(--color-base-content) !important;
/* background-color:#37a9ef !important;
color: white !important; */
}
:global(.wx-menu) {
/* Estilos para el menu contextual */
background: var(--color-accent) !important;
color: var(--color-accent-content) !important;
}
:global(.wx-menu > .wx-option) {
/* Estilos para el menu contextual */
background: var(--color-accent) !important;
color: var(--color-accent-content) !important;
}
:global(.wx-menu > .wx-option:hover) {
background: var(--color-primary) !important;
color: var(--color-primary-content) !important;
}
:global(.wx-menu > .wx-option:hover .wx-icon,
.wx-menu > .wx-option:hover .wx-value) {
background: var(--color-primary) !important;
color: var(--color-primary-content) !important;
}
:global(.wx-menu > .wx-option > .wx-icon) {
/* Estilos para el menu contextual */
background: var(--color-accent) !important;
color: var(--color-accent-content) !important;
}
:global(.wx-menu > .wx-option > .wx-value) {
/* Estilos para el menu contextual */
background: var(--color-accent) !important;
color: var(--color-accent-content) !important;
}
:global(.wx-filter-bar > .wx-label) {
color: var(--color-base-content) !important;
}
:global(.wx-field > .wx-label) {
color: var(--color-base-content) !important;
}
:global(.wx-field > .wx-field-control) {
color: var(--color-gray-900) !important;
}
:global(.wx-sections) {
text-align: left;
--wx-field-width: 600px;
margin: 12px 5px 0 5px;
}
@media (max-width: 768px) {
:global(.wx-sections) {
--wx-field-width: 250px;
margin: 12px 5px 0 5px;
}
}
:global(.wx-normal) {
/* Para normalizar el tamaño de los botones */
background-color: var(--color-base-200) !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
:global(.wx-button) {
/* Para normalizar el tamaño de los botones */
border-radius: var(--radius-field) !important;
}
:global(.wx-f-row) {
/* Para normalizar el GRID*/
height: 1px !important;
}
:global(.wx-row) {
/* Para normalizar el GRID*/
background-color: var(--color-base-100)!important;
}
:global(.wx-row.wx-selected) {
/* Para normalizar el GRID*/
background-color: var(--color-primary)!important;
color: var(--color-primary-content)!important;
}
:global(.wx-f-row > .wx-cell) {
/* Para normalizar el GRID*/
height: 1px !important;
padding: 1px !important;
}
:global(.wx-filter-bar) {
/* Para normalizar el filter*/
padding: 2px !important;
}
</style>
(1) .- Este fichero lo único que muestra son las propiedades de CSS que varian cuando se cambian los Temas de Daisy UI. No interviene en la ejecución de la app.
(2).- Son las propiedades de CSS que cambian los los temas de SVAR. En él se pueden establecer las correspondencias entre las propiedades de Daisy y SVAR, para que cuando cambie el tema de SVAR se ajuste el tema de SVAR.
(3).- Es el fichero de personalización del tema de SVAR para esta aplicación. Se podría haber actualizado el fichero (2) con parte de este fichero, pero creo que es más interesante disponer de 2 ficheros con personalización General (2) y Específica (3).
(4).- Es el código que se utiliza para el cambio de tema de Daisy. Es sencillo de leer, un selector o combo de todos los tema y el código que produce el cambio:
document.documentElement.setAttribute("data-theme", selected);
(5).- El fichero de integración de Tailwind y Daisy UI, con el conjunto de Temas que se pueden utilizar en la aplicación.
(6).- El inicio de la aplicación con la configuración de la carga de los ficheros CSS. Si observáis, el fichero (3), su contenido está en el apartado de «<styles global>». Cuando desarrollo, lo tengo que tener ahí para que los cambios se vean actualizado en la ventana de Test del desarrollo. Esto no es necesario en producción y puede habilitarse la línea 48:
@import "./themes/custom-theme.css"; /* Importa tu tema personalizado */
Es muy probable que surjan nuevo problemas como el que ha surgido en el tratamiewnto de los «Tooltip». En este caso, parece que ambas plataformas (Svar y Daisy), configuran la misma clase y tal como está hecha la integración la configuración de SVAR se mantiene sobre la de Daisy UI y por ello, cada vez que se utilice «Tooltip de Daisy» se tiene que incluir esta definición de CSS.
/* Normalización de estilos para SVAR y DaisyUI */
/* Para normalizar el Tooltip de Daisy, porque lo rompe SVAR */
.tooltip[data-tip] {
position: relative !important;
pointer-events: auto !important;
background-color: transparent !important;
box-shadow: none !important;
padding: 0 !important;
z-index: 4 !important;
}
Aunque soy consciente que el ejercicio no está completamente así, como erxplico a continuación, mi intención es trabajar en esta propuesta:
- Para todo lo que tenga que ver con Datra Grid, Formularios, etc, utilizar los componentes de SVAR.
- Para todo lo en lo que no se utilice SVAR, utilizar los componentes de Daisy UI.
He preguntado a SVAR sobre la evolución de sus Temas y no tienen previsto integraciones de este tipo, no obstante, le facilitaré este código para que evaluen si es algo que les pudiera ser de interés para sus desarrolladores. Yo creo, que al menos Tailwind, sí que sería interesante que lo incluyeran.
Como siempre, os dejo los fuentes para que lo descarguéis, probéis y cambies, todo lo necesitéis.
Adjuntos
| Archivo | Tamaño de archivo | Descargas |
|---|---|---|
movie-svar
|
54 KB | 0 |