/* Silo dark mode — activated by html[data-silo-theme="dark"], toggled from
the More menu (row + logic in interactions.js / silo-pages.js, persisted
in localStorage['silo-theme']). Loads last so it can win against the
light passes' !important declarations. The pink accent stays. */
/* ---------- the toggle switch (both themes) ---------- */
.silo-switch {
position: relative;
display: inline-block;
width: 30px;
height: 18px;
border-radius: 999px;
background: #d5d7d4;
transition: background 0.18s ease;
}
.silo-switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 0.18s cubic-bezier(0.3, 1.2, 0.4, 1);
}
[aria-checked="true"] .silo-switch { background: #ff80ab; }
[aria-checked="true"] .silo-switch::after { transform: translateX(12px); }
.silo-theme-item .slate-menu-hint { display: inline-flex; align-items: center; }
/* ======================================================================
DARK SKIN
====================================================================== */
html[data-silo-theme="dark"] { color-scheme: dark; }
/* ground + shell */
html[data-silo-theme="dark"] body { background: #101113 !important; }
html[data-silo-theme="dark"] body::before { display: none !important; }
html[data-silo-theme="dark"] .bg-v2-header-gradient { opacity: 0 !important; }
/* navbar */
html[data-silo-theme="dark"] .text-v2-text-primary { color: #f2f3f5 !important; }
html[data-silo-theme="dark"] .text-v2-text-tertiary { color: #8b929b !important; }
html[data-silo-theme="dark"] .hover\:text-v2-text-primary:hover { color: #f2f3f5 !important; }
html[data-silo-theme="dark"] .silo-card-title { color: #f2f3f5; }
html[data-silo-theme="dark"] button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) { background: #222428 !important; }
html[data-silo-theme="dark"] button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]):hover { background: #292b30 !important; }
html[data-silo-theme="dark"] button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) span { color: #9aa1ab !important; }
html[data-silo-theme="dark"] button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) > svg { color: #7c848d !important; }
html[data-silo-theme="dark"] button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) kbd { background: #2f3237 !important; color: #c3c8cf !important; }
/* markets table: token flip */
html[data-silo-theme="dark"] .sm-table {
--sm-card: #1a1c1f;
--sm-line: rgba(255, 255, 255, 0.055);
--sm-head-line: rgba(255, 255, 255, 0.08);
--sm-ink: #f2f3f5;
--sm-num: #e8eaed;
--sm-mut: #8f959e;
--sm-faint: #70767f;
--sm-up: #2fbe84;
--sm-down: #ff7373;
--sm-hover: #202226;
--sm-accent: #ff8fb3;
}
html[data-silo-theme="dark"] div:has(> table),
html[data-silo-theme="dark"] div[class*="overflow-auto"][class*="max-h-[calc"] {
background: rgba(26, 28, 31, 0.96) !important;
}
html[data-silo-theme="dark"] .sm-table thead .sm-c::after {
background: linear-gradient(to bottom, #1a1c1f 0%, rgba(26, 28, 31, 0.85) 38%, rgba(26, 28, 31, 0) 100%);
}
html[data-silo-theme="dark"] div:has(> table)::after {
background: linear-gradient(to bottom, rgba(26, 28, 31, 0) 0%, rgba(26, 28, 31, 0.85) 62%, #1a1c1f 100%);
}
html[data-silo-theme="dark"] .sm-fav { color: #3c4046; }
html[data-silo-theme="dark"] .sm-fav:hover { color: #70767f; }
html[data-silo-theme="dark"] .sm-fav[aria-pressed="true"] { color: #ff80ab; }
html[data-silo-theme="dark"] .sm-sep { color: #4a4f56; }
html[data-silo-theme="dark"] .sm-meta i { color: #43474d; }
html[data-silo-theme="dark"] .sm-sort:hover { color: #c3c8cf; }
/* tabs + toolbar pills */
html[data-silo-theme="dark"] [role="tablist"] > div:first-child:not(.silo-tab-thumb),
html[data-silo-theme="dark"] [role="tablist"][class*="overflow-x-auto"] { background: #222428 !important; }
html[data-silo-theme="dark"] [role="tab"] { color: #9aa1ab !important; }
html[data-silo-theme="dark"] [role="tab"]:hover { color: #f2f3f5 !important; }
html[data-silo-theme="dark"] [role="tab"][data-state="active"] { color: #9aa1ab !important; }
html[data-silo-theme="dark"] .silo-tab-pink span { color: #ff8fb3; }
html[data-silo-theme="dark"] .silo-lens-body {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -1px 0 rgba(255, 255, 255, 0.06),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.10),
0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
html[data-silo-theme="dark"] div[role="button"][class*="min-w-[266px]"],
html[data-silo-theme="dark"] button[class*="h-9"][class*="rounded-md"],
html[data-silo-theme="dark"] button[aria-label="Columns"] > div {
background: #222428 !important;
color: #b6bcc4 !important;
}
html[data-silo-theme="dark"] div[role="button"][class*="min-w-[266px]"]:hover,
html[data-silo-theme="dark"] button[class*="h-9"][class*="rounded-md"]:hover,
html[data-silo-theme="dark"] button[aria-label="Columns"]:hover > div {
background: #2a2d31 !important;
color: #f2f3f5 !important;
}
html[data-silo-theme="dark"] button[class*="rounded-md"] [class*="bg-v2-danger"],
html[data-silo-theme="dark"] button[class*="rounded-md"] .bg-v2-danger-primary { box-shadow: 0 0 0 2px #101113 !important; }
/* dropdown menus */
html[data-silo-theme="dark"] .clone-overlay.clone-menu,
html[data-silo-theme="dark"] .clone-overlay.clone-more-menu,
html[data-silo-theme="dark"] .clone-overlay.clone-token-menu {
background: color-mix(in srgb, #202226 94%, transparent) !important;
border-color: rgba(255, 255, 255, 0.09) !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.05),
0 2px 6px rgba(0, 0, 0, 0.4),
0 16px 40px -8px rgba(0, 0, 0, 0.65) !important;
}
html[data-silo-theme="dark"] .clone-menu .slate-menu-item,
html[data-silo-theme="dark"] .clone-menu button.slate-menu-item { color: #e8eaed !important; }
html[data-silo-theme="dark"] .clone-menu .slate-menu-item:hover,
html[data-silo-theme="dark"] .clone-menu button.slate-menu-item:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
html[data-silo-theme="dark"] .clone-menu .slate-menu-hint,
html[data-silo-theme="dark"] .clone-menu .slate-menu-item:hover .slate-menu-hint { color: #8f959e !important; }
html[data-silo-theme="dark"] .clone-menu .slate-menu-divider { background: rgba(255, 255, 255, 0.08) !important; }
html[data-silo-theme="dark"] .silo-switch { background: #3a3e44; }
/* search palette (var-driven) */
html[data-silo-theme="dark"] .search-pal {
--paper: #1d1f23;
--soft: #26282c;
--soft-deep: #2f3237;
--soft-hover: #24262a;
--text: #f2f3f5;
--muted: #9aa1ab;
}
html[data-silo-theme="dark"] .search-pal-field input::placeholder { color: #5f656d; }
/* modals, panels, wallet list, toast */
html[data-silo-theme="dark"] .clone-overlay.clone-modal,
html[data-silo-theme="dark"] .clone-overlay.clone-panel {
background: #1d1f23 !important;
color: #e8eaed !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}
html[data-silo-theme="dark"] .clone-muted { color: #8f959e !important; }
html[data-silo-theme="dark"] .clone-wallet { background: #26282c !important; }
html[data-silo-theme="dark"] .clone-wallet:hover { background: #2d3034 !important; }
html[data-silo-theme="dark"] .clone-wallet-main { color: #f2f3f5; }
html[data-silo-theme="dark"] .clone-wallet-icon { background: #3a2530 !important; color: #ff8fb3 !important; }
html[data-silo-theme="dark"] .clone-setting span { color: #8f959e; }
html[data-silo-theme="dark"] .clone-close { color: #70767f; }
html[data-silo-theme="dark"] .clone-close:hover { background: #2a2d32; color: #f2f3f5; }
html[data-silo-theme="dark"] .clone-empty strong { color: #f2f3f5; }
html[data-silo-theme="dark"] .clone-empty span { color: #8f959e; }
/* movers strip: flip its own variables + header label */
html[data-silo-theme="dark"] .sc-block {
--sc-page: #101113;
--sc-chip: #222428;
--sc-chip-hover: #2a2d31;
color: #e8eaed;
}
html[data-silo-theme="dark"] .sc-head-label { color: #f2f3f5; }
html[data-silo-theme="dark"] .sc-open:hover,
html[data-silo-theme="dark"] .sc-info:focus-visible { color: #f2f3f5; }
html[data-silo-theme="dark"] .sc-d.up { color: #2fbe84 !important; }
html[data-silo-theme="dark"] .sc-d.down { color: #ff7373 !important; }
/* glass tab lens: translucent on dark instead of the white chip */
html[data-silo-theme="dark"] .silo-tab-thumb {
background: rgba(255, 255, 255, 0.10) !important;
}
/* pages (var-driven) */
html[data-silo-theme="dark"] .silo-page {
--sp-card: #1a1c1f;
--sp-line: rgba(255, 255, 255, 0.12);
--sp-hairline: rgba(255, 255, 255, 0.07);
--sp-ink: #f2f3f5;
--sp-muted: #9aa1ab;
--sp-faint: #70767f;
--sp-accent: #ff8fb3;
--sp-good: #2fbe84;
--sp-bad: #e0655c;
}
html[data-silo-theme="dark"] .sp-pills { background: #222428; }
html[data-silo-theme="dark"] .sp-pill { color: #9aa1ab; }
html[data-silo-theme="dark"] .sp-pill:hover { color: #f2f3f5; }
html[data-silo-theme="dark"] .sp-pill[aria-pressed="true"] { background: #2f3237; color: #ff8fb3; box-shadow: none; }
html[data-silo-theme="dark"] .sp-select,
html[data-silo-theme="dark"] .sp-input-wrap { background: #26282c; }
html[data-silo-theme="dark"] .sp-max { background: #33363b; color: #b6bcc4; }
html[data-silo-theme="dark"] .sp-max:hover { background: #3b3f45; color: #f2f3f5; }
html[data-silo-theme="dark"] .sp-input::placeholder { color: #5f656d; }
html[data-silo-theme="dark"] .sp-apr { background: rgba(47, 190, 132, 0.14); color: #3ecf93; }
html[data-silo-theme="dark"] .sp-splitbar { background: #2a2d31; }
html[data-silo-theme="dark"] .sp-pool-row:hover { background: rgba(255, 255, 255, 0.035); }
html[data-silo-theme="dark"] .sp-pos-row:hover { background: rgba(255, 255, 255, 0.035); }
html[data-silo-theme="dark"] .sp-act-icon { background: rgba(255, 255, 255, 0.07); }
html[data-silo-theme="dark"] .sp-blank-mark { background: rgba(255, 255, 255, 0.07); }
html[data-silo-theme="dark"] .sp-range.is-in { background: rgba(47, 190, 132, 0.15); }
html[data-silo-theme="dark"] .sp-range.is-out { background: rgba(224, 101, 92, 0.15); }
html[data-silo-theme="dark"] .sp-empty strong { color: #f2f3f5; }
html[data-silo-theme="dark"] .sp-go { color: #4a4f56; }
html[data-silo-theme="dark"] .sp-pool-row:hover .sp-go { color: #9aa1ab; }
html[data-silo-theme="dark"] .sp-pool-icons .sm-coin,
html[data-silo-theme="dark"] .sp-pool-row .sm-coin { box-shadow: 0 0 0 2px #1a1c1f; }
/* scrollbars */
html[data-silo-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
html[data-silo-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); }
html[data-silo-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.38); }
/* sticky column headers (silo-app.css pins them with a literal white) */
html[data-silo-theme="dark"] thead th {
background: #1a1c1f !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
/* movers strip text (hardcoded inks in silo-carousel.css) */
html[data-silo-theme="dark"] .sc-name { color: #f2f3f5; }
html[data-silo-theme="dark"] .sc-name i { color: #5b6167; }
html[data-silo-theme="dark"] .sc-price { color: #8f959e; }
html[data-silo-theme="dark"] .sc-open { color: #70767f; }
html[data-silo-theme="dark"] .sc-open:hover { color: #f2f3f5 !important; }
/* docked search sheet paints a literal paper */
html[data-silo-theme="dark"] .search-pal.is-docked { background: #1d1f23 !important; }
/* wallet / referral / market-detail layers are token-driven — flip them */
html[data-silo-theme="dark"] * {
--sw-paper: #1d1f23;
--sw-soft: #16181b;
--sw-chip: #26282c;
--sw-line: rgba(255, 255, 255, 0.09);
--sw-text: #f2f3f5;
--sw-muted: #9aa1ab;
--sw-dim: #70767f;
--smp-paper: #1a1c1f;
--smp-page: #101113;
--smp-chip: #26282c;
--smp-line: rgba(255, 255, 255, 0.08);
--smp-text: #f2f3f5;
--smp-muted: #9aa1ab;
--smp-dim: #70767f;
--smp-btn-bg: #f2f3f5;
--smp-btn-fg: #101113;
--smp-btn-hover: #dfe1e4;
--smp-accent-fg: #ff8fb3;
--smp-accent-bg: rgba(255, 128, 171, 0.14);
}
html[data-silo-theme="dark"] ::selection { background: rgba(255, 128, 171, 0.3); }
/* stake swap card, points, CA chip */
html[data-silo-theme="dark"] .sp-stakecard { background: #1a1c1f; }
html[data-silo-theme="dark"] .spf-act:hover { background: rgba(255, 255, 255, 0.06); }
html[data-silo-theme="dark"] .spf-chip { background: rgba(255, 128, 171, 0.14); }
html[data-silo-theme="dark"] .smp-amt.is-over { border-color: #e0655c; }
html[data-silo-theme="dark"] .smp-amt.is-over .smp-amt-bal { color: #ff8f86; }
html[data-silo-theme="dark"] .sp-sc-amount::placeholder { color: #3c4046; }
html[data-silo-theme="dark"] .sp-token { background: #26282c; }
html[data-silo-theme="dark"] .sp-token:hover { background: #2d3034; }
html[data-silo-theme="dark"] .sp-token > svg { color: #8f959e; }
html[data-silo-theme="dark"] .sp-token-icons .sm-coin { box-shadow: 0 0 0 2px #26282c; }
html[data-silo-theme="dark"] .silo-ca-chip { background: #222428; }
html[data-silo-theme="dark"] .silo-ca-chip:hover { background: #2a2d31; }
html[data-silo-theme="dark"] .silo-ca-addr { color: #c3c8cf; }
html[data-silo-theme="dark"] .silo-ca-label { color: #70767f; }
html[data-silo-theme="dark"] .silo-ca-chip.is-copied { background: rgba(47, 190, 132, 0.16); }
html[data-silo-theme="dark"] .silo-ca-chip.is-copied .silo-ca-addr,
html[data-silo-theme="dark"] .silo-ca-chip.is-copied .silo-ca-copy { color: #3ecf93; }
/* pool picker modal */
html[data-silo-theme="dark"] .spp-search { background: #26282c; }
html[data-silo-theme="dark"] .spp-search input::placeholder { color: #5f656d; }
html[data-silo-theme="dark"] .spp-row:hover { background: rgba(255, 255, 255, 0.045); }
html[data-silo-theme="dark"] .spp-row.is-active { background: rgba(255, 128, 171, 0.14); }
html[data-silo-theme="dark"] .spp-row.is-active:hover { background: rgba(255, 128, 171, 0.2); }
html[data-silo-theme="dark"] .spa-row:hover { background: rgba(255, 255, 255, 0.045); }
html[data-silo-theme="dark"] .silo-apy-modal {
--sp-hairline: rgba(255, 255, 255, 0.07);
--sp-accent: #ff8fb3;
--sp-good: #2fbe84;
--sp-faint: #70767f;
--sp-muted: #9aa1ab;
}
html[data-silo-theme="dark"] .silo-referral-linkrow { background: #26282c; }
html[data-silo-theme="dark"] .silo-referral-linkrow code { color: #c3c8cf; }
/* timeframe tag on the flow headers, and the token chip's clear button */
html[data-silo-theme="dark"] .sm-th-tf { background: rgba(255, 255, 255, 0.09); }
html[data-silo-theme="dark"] [data-silo-chip="token"][data-filtered] .silo-token-clear:hover {
background: rgba(255, 255, 255, 0.12);
}