services/alicia-ai-terminology
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add darkmode
All checks were successful
Build and Push Container / build-and-push (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Reese Wells
2026-05-05 06:48:29 -04:00
parent fea9449d40
commit e55534b0d5
8 changed files with 375 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
css/style.css
View File

@@ -293,3 +293,207 @@ footer {
font-size: 0.9rem;
box-shadow: 0 -4px 20px rgba(255,20,147,0.3);
}
/* Dark Mode Toggle */
.dark-toggle {
background: var(--pink-800);
border: 2px solid var(--pink-400);
color: var(--white);
padding: 0.4rem 0.7rem;
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
margin-left: auto;
transition: background 0.2s, border-color 0.2s;
line-height: 1;
}
.dark-toggle:hover {
background: var(--pink-900);
border-color: var(--pink-300);
}
/* Dark Mode */
[data-theme="dark"] {
--bg-primary: #0d0d0d;
--bg-secondary: #1a1a2e;
--bg-card: #16213e;
--bg-table: #1a1a2e;
--bg-table-head: #0f3460;
--bg-table-hover: #1a1a3e;
--bg-example: #1a1a3e;
--bg-badge: #e91082;
--text-primary: #e0e0e0;
--text-secondary: #b0b0b0;
--text-heading: #ffb6d9;
--text-heading-strong: #ff69b4;
--text-link: #ff69b4;
--text-link-hover: #ffa8c8;
--text-nav: #ffcce0;
--text-nav-hover: #ffffff;
--text-footer: #ffa8c8;
--border-primary: #2a2a4a;
--border-secondary: #3a3a5a;
--border-accent: #ff69b4;
--shadow-color: rgba(255,20,147,0.15);
--shadow-lg-color: rgba(255,20,147,0.2);
--hero-overlay: rgba(13,13,13,0.3);
}
[data-theme="dark"] body {
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
color: var(--text-primary);
}
[data-theme="dark"] a {
color: var(--text-link);
}
[data-theme="dark"] a:hover {
color: var(--text-link-hover);
}
[data-theme="dark"] nav {
background: linear-gradient(90deg, #0f3460, #1a1a3e, #0f3460);
box-shadow: 0 4px 20px rgba(255,20,147,0.15);
}
[data-theme="dark"] .nav-links a {
color: var(--text-nav);
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active {
background: #0f3460;
color: var(--text-nav-hover);
box-shadow: 0 0 10px rgba(255,62,196,0.2);
}
[data-theme="dark"] .hero {
background: linear-gradient(135deg, #1a1a3e, #0f3460, #0d0d2b);
}
[data-theme="dark"] .hero::before {
background: radial-gradient(circle, rgba(255,62,196,0.05) 0%, transparent 60%);
}
[data-theme="dark"] .card {
background: var(--bg-card);
border-color: var(--border-primary);
box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 4px 10px rgba(255,20,147,0.08);
}
[data-theme="dark"] .card:hover {
box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 4px 10px rgba(255,20,147,0.15);
border-color: var(--border-accent);
}
[data-theme="dark"] .card h3 {
color: var(--text-heading-strong);
}
[data-theme="dark"] .card p {
color: var(--text-secondary);
}
[data-theme="dark"] h2.section-title {
color: var(--text-heading);
border-color: var(--border-accent);
}
[data-theme="dark"] .glossary-table {
background: var(--bg-table);
border-color: var(--border-primary);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
[data-theme="dark"] .glossary-table thead {
background: linear-gradient(90deg, #e91082, #0f3460);
}
[data-theme="dark"] .glossary-table tbody tr {
border-color: var(--border-primary);
}
[data-theme="dark"] .glossary-table tbody tr:hover {
background: var(--bg-table-hover);
}
[data-theme="dark"] .glossary-table td:first-child {
color: var(--text-heading-strong);
}
[data-theme="dark"] .def-card {
background: var(--bg-card);
border-color: var(--border-primary);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
[data-theme="dark"] .def-card:hover {
border-color: var(--border-accent);
}
[data-theme="dark"] .def-card h3 {
color: var(--text-heading);
}
[data-theme="dark"] .def-card .category {
background: linear-gradient(135deg, #e91082, #ff1493);
}
[data-theme="dark"] .def-card p {
color: var(--text-primary);
}
[data-theme="dark"] .example {
background: linear-gradient(135deg, var(--bg-table-hover), var(--bg-card));
color: var(--text-primary);
border-color: var(--border-secondary);
}
[data-theme="dark"] .example strong {
color: var(--text-heading);
}
[data-theme="dark"] .use-card {
background: var(--bg-card);
border-color: var(--border-primary);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
[data-theme="dark"] .use-card:hover {
box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 4px 10px rgba(255,20,147,0.15);
border-color: var(--border-accent);
}
[data-theme="dark"] .use-card h3 {
color: var(--text-heading);
}
[data-theme="dark"] .use-card p {
color: var(--text-secondary);
}
[data-theme="dark"] .prompt-block {
background: var(--bg-card);
border-color: var(--border-primary);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
[data-theme="dark"] .prompt-block:hover {
border-color: var(--border-accent);
}
[data-theme="dark"] .prompt-block h3 {
color: var(--text-heading);
}
[data-theme="dark"] .prompt-block .label {
color: var(--text-heading-strong);
}
[data-theme="dark"] footer {
background: linear-gradient(90deg, #0f3460, #1a1a3e, #0f3460);
color: var(--text-footer);
box-shadow: 0 -4px 20px rgba(255,20,147,0.1);
}