jabb-astro-components/Dark.css

UI Components for web development

/** DARK MODE 1
* Azul Principal: #1E293B (Un azul oscuro y relajante)
* Gris de Fondo: #0F172A (Un gris muy oscuro para el fondo)
* Gris Claro: #94A3B8 (Para texto secundario y elementos sutiles)
* Acento Cian: #38BDF8 (Para resaltar elementos interactivos)
* Gris de Contenedor: #334155 (Gris para contenedores y tarjetas)
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    @apply darkTitle;
}

.darkMode1 {
    @apply dark:bg-[#0F172A];
}

.darkMode1 .link {
    @apply dark:text-[#38BDF8] dark:border-[#38BDF8] dark:hover:text-[#65d1ff] dark:hover:border-[#65d1ff] dark:active:text-[#30b1e8] dark:active:border-[#30b1e8];
}

.darkMode1 .darkButton {
    @apply dark:bg-[#38BDF8] dark:hover:bg-[#65d1ff] dark:active:bg-[#1f99cd];
}

.darkMode1 .darkContainerHover {
    @apply dark:hover:bg-[#435268];
}

.darkMode1 .darkContainerHoverAlt {
    @apply dark:hover:bg-[#266580];
}

.darkMode1 .darkContainerActive {
    @apply dark:active:bg-[#39465a];
}

.darkMode1 .darkContainer {
    @apply dark:bg-[#334155] dark:border-[#1E293B];
}

.darkMode1 .darkAltContainer {
    @apply dark:bg-[#5f7aa0] dark:border-[#344766];
}

.darkMode1 .darkTitle {
    @apply dark:text-[#38BDF8];
}

.darkMode1 .text {
    @apply dark:text-white;
}

/**
* Fondo: #111827 (Casi negro con un toque de gris)
* Amatista: #A855F7 (Un púrpura suave para acentos)
* Gris Medio: #6B7280 (Para texto y bordes)
* Verde Azulado: #14B8A6 (Para indicadores de éxito o enlaces)
* Gris Oscuro Contenedor: #222B3C (Gris oscuro para tarjetas)
*/

.darkMode2 {
    @apply bg-[#111827];
}

.darkMode2 .link {
    @apply text-[#14B8A6];
}