Tema Asimed

Uso

Debe ser ejecutado del lado del cliente. Por ejemplo en el lifecycle onMount (Para aplicar en todas las rutas escribir el siguiente código en el layout).

import { aplicarTema, crearTema } from "tema-asimed";

onMount(() => {
    const temaBase = crearTema({});
    aplicarTema(temaBase);
});

(Opcional) Si también se desea tener una fuente que pueda cambiar dinámicamente crearemos la utilidad font-body, para esto se debe abrir tailwind.config.js y adicionar:

module.exports = {
  ...
  theme: {
    extend: {
      ...
      fontFamily: {
        body: [
          'var(--font-body)',
          ...
        ],
      },
    },
  },
};

crearTema

Esta función toma como propiedad un objeto con los colores primarios, secundarios, terciarios y una fuente. Si el objeto no tiene alguna de estas propiedades se establecen por defecto con los colores característicos de asimed.

Las propiedades por defecto de este objeto son:

{
  primario = '#29588c',
  primarioOscuro = '#082F5B',
  primarioClaro = '#416B9A',
  secundario = '#00a39c',
  secundarioOscuro = '#009487',
  secundarioClaro = '#48BBB7',
  terciario = '#c8c9c7',
  terciarioOscuro = '#c8c9c7',
  terciarioClaro = '#EBEBEB',
  fontBody = '',
}

Ejemplo de uso:

crearTema({
  secundarioOscuro: '#009487', 
  fontBody: 'Roboto'
})

Esto devolvera un objeto con los colores de asimed excepto en el color secundario oscuro, ya que ha sido modificado. Y la fuente para font-body será Roboto.

aplicarTema

Se le tiene que pasar como propiedad el objeto retornado por crearTema. Esta función aplicará los valores del objeto que le pasamos, como variables de css en el DOM.