Skip to content
Cactus CSS

Personalizar

Plantilla / Variables

Si deseas personalizar colores, fuentes, border, etc. Puedes hacerlo usando las siguientes reglas y variables. Sigue leyendo para conocer como modificarla según tu instalación

:root {
  --font1: "Montserrat", system-ui, sans-serif;
  --font2: "DM Sans", system-ui, sans-serif;
  --space: 1.5rem;
  --radius: 0.7rem;
  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.205);
  --text: #000000;
  --background: #f0f0f0;
  --primary: #1aff94;
  --secondary: #e7c88e;
  --accent: #47b5f5;
  --green: #45d25a;
  --red: #dc3243;
  --yellow: #f3a60c;
  --blue: #2495ca;
  --dark: #0e0e0e;
  --light: #fefefe;
  --contrast: var(--light);
}


:root[data-theme="dark"] {
  --text: #ffffff;
  --background: #0f0f0f;
  --primary: #00e67a;
  --secondary: #d8ff3d;
  --accent: #0a78b8;
  --green: #45d25a;
  --red: #dc3243;
  --yellow: #f2c94c;
  --blue: #2495ca;
  --dark: #080616;
  --light: #f1f2e9;
  --contrast: var(--dark);
}

Para personalizar de forma recomendable importa el archivo cactus4nt.min.css en lugar del cactus4.min.css. Ya que este es una version que quita el tema clases de root/variables y fuentes. También puedes optar por importar la version normal cactus4.min.css y después importar un archivo propio con las variables/plantilla personalizada. En cualquiera de los 2 casos que desees. Es importante que crees un archivo personalizado donde tengas las mismas variables mostradas en la plantilla de arriba.

Version Administrador de Paquetes

Crea tu archivo themes.css o el nombre que desees, en el directorio normal de tu app. Copia la plantilla de arriba y modifica los valores a tu gusto. Al importar es importante que importes los archivos en el siguiente orden:

  1. Archivo de fuente // Si la tienes en tu themes.css o externa en tu link o imports solo asegúrate de ponerla antes.

  2. Archivo personalizado basado en la plantilla.

  3. Archivo cactus4nt.min.css

    Ejemplo:

// ejemplo Archivo Principal de mi app
import "/styles/themes.css";
import "cactus_css/v4/cactus4nt.min.css";

Version CDN

Crea tu archivo themes.css o el nombre que desees, en el directorio normal de tu app. Copia la plantilla de arriba y modifica los valores a tu gusto. Al importar es importante que importes los archivos en el siguiente orden:

  1. Archivo de fuente // Si la tienes en tu themes.css o externa en tu link o imports solo asegúrate de ponerla antes.

  2. Archivo personalizado basado en la plantilla.

  3. Archivo cactus4nt.min.css

    Ejemplo:

// ejemplo Archivo Principal de mi app
import "/styles/themes.css"; // o via link :
<link
  rel="stylesheet"
  href="./styles/themes.css"
/>
// Archivo html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/cactus_css@4.0.0/v4/cactus4nt.min.css"
/>

Version Descargar de Paquete

Si deseas personalizar los colores y la tipografía solo tienes que cambiarlos en un archivo css, busca el archivo cactus4nt.min.css y usa la plantilla. Al importa sigue el orden :

  1. Archivo de fuente // Si la tienes en tu themes.css o externa en tu link o imports solo asegúrate de ponerla antes.
  2. Archivo personalizado basado en la plantilla.
  3. Archivo cactus4nt.min.css

Ejemplo:

// ejemplo Archivo Principal de mi app
<link rel="stylesheet" href=".../style/themes.css" />
<link rel="stylesheet" href=".../style/cactus4nt.min.css" />

Pagina para comprimir CSS:

CSS Compressor

También puedes usar una clase y modificarla, siendo más especifico o usando ´!important´

Crear Tema

Si deseas crear un tema nuevo, solo tienes que crear un archivo css y definir una clase, poniendo las variables que deseas cambiar(las variables que admite son las que se muestran arriba en root) :

:root[data-theme="dark"] {
  --text: #f1f2e9;
  --background: #212121;
  --primary: #7be576;
  --secondary: #0a7392;
  --accent: #d8ff3d;
  --green: #45d25a;
  --red: #dc3243;
  --yellow: #f2c94c;
  --blue: #2495ca;
  --dark: #2b2b2b;
  --light: #f1f2e9;
  --contrast: var(--dark);
}

Cambio de tema usando JS

Para cambiar el tema solo tienes que cambiar la clase del body o el html, por ejemplo:

/* Definimos un checkbox */
<div class="toggle-btn" id="light-mode-toggle">
  <label title="Use light theme" aria-label="Use light theme">
    <input type="checkbox" name="light-mode-toggle" />
    <span></span>
  </label>
</div>
/*Las clases para crear el checkbox son de un css aparte */

Ahora en el script

// creamos una constante para el checkbox
const toggle = document.getElementById("light-mode-toggle");
// creamos un evento para el checkbox
toggle.addEventListener("change", (e) => {
  // si el checkbox esta desactivado
  if (e.target.checked == false) {
    // guardamos en el localStorage que el modo oscuro esta desactivado
    localStorage.setItem("dark", "false");
    // removemos el atributo data-theme
    document.documentElement.removeAttribute("data-theme");
  } else {
    // si el checkbox esta activado guardamos en el localStorage que el modo oscuro esta activado
    localStorage.setItem("dark", "true");
    // agregamos el atributo data-theme con el valor "dark"
    document.documentElement.setAttribute("data-theme", "dark");
  }
});


// comprobamos si el modo oscuro esta activado
if (localStorage.getItem("dark") === "true") {
  // si esta activado activamos el checkbox
  toggle.querySelector("input").checked = true;
  // agregamos el atributo data-theme con el valor "dark"
  document.documentElement.setAttribute("data-theme", "dark");
}