Skip to content
Cactus CSS

Personalizar

Si deseas personalizar los colores y la tipografía solo tienes que cambiarlos en un archivo css, busca el archivo themes.css :

@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Work+Sans&display=swap";
:root {
  --font1: Montserrat, system-ui, sans-serif; /* Fuente de los títulos */
  --font2: "Work Sans", system-ui, sans-serif; /* Fuente general */
  --cont-wh: 1200px; /* Ancho de la pantalla */
  --primary: #98f098;
  --secondary: #cce0cc;
  --accent: #313849;
  --font-color: #16181d; /* Color de la fuente */
  --background: radial-gradient(
    hsl(220, 40%, 94%),
    hsl(220, 14%, 94%)
  ); /* Color Fondo */
  --green: #45d25a;
  --red: #dc3243;
  --yellow: #f2c94c;
  --blue: #4024ca;
  --radius: 1.5rem; /* Radio de las cards */
}

al ser un archivo css, realmente es muy fácil cambiar los valores que no te agraden, como las sombras, efectos hover y demás.

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"] {
  --primary: #98f098;
  --font-color: #f9fafb;
  --background: #16181d;
  --secondary: #232529;
  --accent: #727fa1;
}

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");
}