/**
* Dark theme: toggled via class on (see inline head script + themeToggle.js).
* Tokens mirror user palette: page #0b1220, text #fff, muted #7c8aa5.
*/
html.theme-dark {
--bg: #0b1220;
--bg-soft: #151d2e;
--text: #ffffff;
--muted: #7c8aa5;
--border: #243047;
--surface: #121a2d;
--shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
html.theme-dark,
html.theme-dark body {
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
html.theme-dark *::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.22);
}
html.theme-dark *::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.35);
}
html.theme-dark .u-scroll-thin.is-scroll-hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.28);
}
html.theme-dark .u-scroll-thin.is-scroll-hover::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.theme-toggle {
position: relative;
width: 46px;
height: 26px;
border-radius: 999px;
border: 1px solid var(--border);
background: #c8d0dc;
padding: 0;
flex-shrink: 0;
cursor: pointer;
box-sizing: border-box;
}
.theme-toggle:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
html.theme-dark .theme-toggle {
background: rgba(124, 138, 165, 0.35);
}
.theme-toggle::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 2px;
left: 2px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
html.theme-dark .theme-toggle::after {
transform: translateX(20px);
}
.header__logo-img--dark {
display: none !important;
}
html.theme-dark .header__logo-img--light {
display: none !important;
}
html.theme-dark .header__logo-img--dark {
display: block !important;
}
html.theme-dark .tags-field .tags-input__suggestion:hover,
html.theme-dark .tags-field .tags-input__suggestion.is-highlighted {
background: rgba(255, 255, 255, 0.06);
}
/* ---------- Place tiles: transparent strip, white title + icons ---------- */
html.theme-dark .place-tile.card,
html.theme-dark .place-tile--ad.card {
background: transparent;
}
html.theme-dark .place-tile .card__name,
html.theme-dark .place-tile .name,
html.theme-dark .place-tile--ad .card__name {
color: #ffffff;
}
html.theme-dark .place-tile .card__sub,
html.theme-dark .place-tile--ad .card__sub {
color: var(--muted);
}
html.theme-dark .place-tile .card__name-actions,
html.theme-dark .place-tile__count,
html.theme-dark .place-tile__like .material-symbols-outlined,
html.theme-dark .place-tile__comment .material-symbols-outlined,
html.theme-dark .place-tile__save .material-symbols-outlined,
html.theme-dark .place-tile__like-btn,
html.theme-dark .place-tile__save-btn {
color: #ffffff;
}
html.theme-dark .place-tile__save-btn--saved .material-symbols-filled,
html.theme-dark .place-tile__save-btn--saved .material-symbols-outlined {
color: #ffffff;
}
html.theme-dark .place-tile__like-icon--voted .material-symbols-filled {
color: var(--green);
}
html.theme-dark .content-tile-translation-badge {
background: rgba(124, 138, 165, 0.12);
color: var(--muted);
border-color: var(--border);
}
/* ---------- Comments composer (place + route detail) ---------- */
html.theme-dark .place-detail__comment-submit {
background: var(--green) !important;
color: #0b0b0b !important;
}
html.theme-dark .place-detail__comment-submit:hover {
filter: brightness(0.94);
}
html.theme-dark .place-detail__comment-photo-btn,
html.theme-dark .place-detail__comment-photo-btn .material-symbols-outlined {
color: #ffffff;
}
html.theme-dark .place-detail__comment-photo-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
/* ---------- Places tabs: active green, inactive muted (no grey pill) ---------- */
html.theme-dark .places-tabs .tab.places-tab:not(.is-active) {
background: transparent;
color: var(--muted);
border-color: var(--border);
}
html.theme-dark .places-tab.is-active {
background: var(--green);
color: #0b0b0b;
border-color: var(--green);
}
html.theme-dark .places-tab.is-active .places-tab__count {
color: rgba(11, 11, 11, 0.78);
}
html.theme-dark .places-tab.is-active .places-tab__icon {
color: inherit;
}
/* ---------- Route detail: stops strip + stats ---------- */
html.theme-dark .route-detail__stop-slide-inner {
background: transparent;
box-shadow: none;
}
html.theme-dark .route-detail__stop-slide-title,
html.theme-dark .route-detail__stop-slide-counter {
color: var(--text);
}
html.theme-dark .route-detail__stop-slide-flag .material-symbols-outlined {
color: #0b0b0b;
}
html.theme-dark .route-detail__stop-slide-desc {
color: var(--muted);
}
html.theme-dark .route-detail__map-stat,
html.theme-dark .route-detail__map-stat-icon,
html.theme-dark .route-detail__map-stat-label {
color: #ffffff;
}
/* ---------- Profile hero ---------- */
html.theme-dark .profile-hero {
background: transparent;
}
/* ---------- Account / following / settings / notifications ---------- */
html.theme-dark .container.account-page,
html.theme-dark .following-page,
html.theme-dark .settings-page {
background: transparent;
}
html.theme-dark .following-page__item {
background: transparent;
color: var(--text);
}
html.theme-dark .following-page__item:hover {
background: rgba(255, 255, 255, 0.05);
}
html.theme-dark .following-page__dot {
border-color: var(--bg);
}
html.theme-dark .notifications-page__list {
background: transparent;
}
html.theme-dark .settings-card {
background: transparent;
}
html.theme-dark .settings-toggle__input:checked ~ .settings-toggle__track {
background: var(--green);
border-color: var(--green);
}
/* ---------- Carousel arrows (swipe controls) ---------- */
html.theme-dark .arrow {
color: var(--text);
}
/* ---------- Route builder / edit (fullscreen layout) ---------- */
html.theme-dark body.route-builder .route-builder {
background: var(--bg);
color: var(--text);
}
html.theme-dark .route-builder__search-dropdown {
background: var(--surface);
border: 1px solid var(--border);
}
html.theme-dark .route-builder__search-item {
border-bottom-color: var(--border);
color: var(--text);
}
html.theme-dark .route-builder__search-item:hover {
background: var(--bg-soft);
}
html.theme-dark .route-builder__routing-indicator {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
html.theme-dark .route-builder__filter.is-active {
background: var(--green);
color: #0b0b0b;
border-color: var(--green);
}
html.theme-dark .route-builder__tabs .tab.is-active {
background: var(--green);
color: #0b0b0b;
border-color: var(--green);
}
html.theme-dark .route-builder__tabs .tab:focus-visible {
outline-color: var(--green);
}
html.theme-dark .route-builder__tabs .tab:not(.is-active) {
color: var(--muted);
}
html.theme-dark .route-builder__point {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
html.theme-dark .route-builder__point-num {
color: var(--text);
}
html.theme-dark .route-builder__panel-footer,
html.theme-dark .route-builder__summary-card {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
html.theme-dark .route-builder__panel-header-actions .route-builder__header-btn {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
html.theme-dark .route-builder__panel-header-actions .route-builder__header-btn:hover {
background: var(--bg-soft);
}
html.theme-dark .route-builder__back:hover,
html.theme-dark .route-builder__point-edit:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text);
}
html.theme-dark .route-publish-modal__box {
background: var(--surface);
color: var(--text);
}
html.theme-dark .route-publish-modal__arrow,
html.theme-dark .route-publish-modal__check-inner {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
html.theme-dark .route-publish-modal__tag-dropdown {
background: var(--surface);
border-color: var(--border);
}
html.theme-dark .route-publish-modal__tag-dropdown button:hover {
background: rgba(255, 255, 255, 0.06);
}
html.theme-dark .route-builder__panel[data-route-sheet='builder'].route-sheet--open,
html.theme-dark .route-builder__filters-sheet.route-sheet--open,
html.theme-dark .route-builder__top-bar[data-route-sheet='search'].route-sheet--open {
background: var(--bg);
color: var(--text);
}
html.theme-dark .route-builder__mobile-header {
background: var(--surface);
border-bottom-color: var(--border);
color: var(--text);
}
html.theme-dark .route-stop-modal__option-inner {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}