/* * Aktiveras endast när finns. * Skriven som en override-fil för en Bootstrap + Vuetify-baserad app. */ body.dark-mode { color-scheme: dark; --dm-bg: #111827; --dm-bg-soft: #1f2937; --dm-surface: #18212f; --dm-surface-2: #223044; --dm-border: #334155; --dm-border-strong: #475569; --dm-text: #e5edf7; --dm-text-muted: #a8b3c7; --dm-heading: #f8fafc; --dm-link: #7dd3fc; --dm-link-hover: #bae6fd; --dm-accent: #38bdf8; --dm-accent-2: #0ea5e9; --dm-success: #22c55e; --dm-warning: #f59e0b; --dm-danger: #ef4444; background: var(--dm-bg); color: var(--dm-text); } /* Viaweb/WS token remap fallback when components still read light tokens */ html.ws-dark-mode, body.dark-mode { --ws-color-light-0: var(--ws-color-dark-900); --ws-color-light-50: var(--ws-color-dark-800); --ws-color-light-100: var(--ws-color-dark-700); --ws-color-light-200: var(--ws-color-dark-600); --ws-color-light-300: var(--ws-color-dark-500); --ws-color-light-400: var(--ws-color-dark-400); --ws-color-light-500: var(--ws-color-dark-300); --ws-color-light-600: var(--ws-color-dark-200); --ws-color-light-700: var(--ws-color-dark-100); --ws-color-light-800: var(--ws-color-dark-50); --ws-color-light-900: var(--ws-color-dark-50); --ws-color-alt-light-0: var(--ws-color-alt-dark-900, var(--ws-color-dark-900)); --ws-color-alt-light-50: var(--ws-color-alt-dark-800, var(--ws-color-dark-800)); --ws-color-alt-light-100: var(--ws-color-alt-dark-700, var(--ws-color-dark-700)); --ws-color-alt-light-200: var(--ws-color-alt-dark-600, var(--ws-color-dark-600)); --ws-color-alt-light-300: var(--ws-color-alt-dark-500, var(--ws-color-dark-500)); --ws-color-alt-light-400: var(--ws-color-alt-dark-400, var(--ws-color-dark-400)); --ws-color-alt-light-500: var(--ws-color-alt-dark-300, var(--ws-color-dark-300)); --ws-color-alt-light-600: var(--ws-color-alt-dark-200, var(--ws-color-dark-200)); --ws-color-alt-light-700: var(--ws-color-alt-dark-100, var(--ws-color-dark-100)); --ws-color-alt-light-800: var(--ws-color-alt-dark-50, var(--ws-color-dark-50)); --ws-color-alt-light-900: var(--ws-color-alt-dark-50, var(--ws-color-dark-50)); } body.dark-mode, body.dark-mode #extr-page, body.dark-mode #vue-app, body.dark-mode .v-application, body.dark-mode .v-application__wrap, body.dark-mode .container, body.dark-mode .container-fluid, body.dark-mode .row, body.dark-mode .col, body.dark-mode .well, body.dark-mode .panel, body.dark-mode .panel-body, body.dark-mode .modal-content, body.dark-mode .dropdown-menu, body.dark-mode .popover, body.dark-mode .tooltip-inner, body.dark-mode .theme--light.v-application, body.dark-mode .theme--light.v-sheet, body.dark-mode .theme--light.v-card, body.dark-mode .theme--light.v-data-table, body.dark-mode .theme--light.v-data-table > .v-data-table__wrapper > table, body.dark-mode .theme--light.v-list, body.dark-mode .theme--light.v-navigation-drawer, body.dark-mode .theme--light.v-toolbar, body.dark-mode .theme--light.v-tabs, body.dark-mode .theme--light.v-footer, body.dark-mode .theme--light.v-stepper, body.dark-mode .theme--light.v-expansion-panels, body.dark-mode .theme--light.v-menu__content, body.dark-mode .theme--light.v-dialog, body.dark-mode .theme--light.v-picker__body, body.dark-mode .theme--light.v-sheet--outlined, body.dark-mode .v-menu__content, body.dark-mode .v-dialog, body.dark-mode .v-overlay__content { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } body.dark-mode .theme--light.v-sheet, body.dark-mode .theme--light.v-card, body.dark-mode .theme--light.v-data-table, body.dark-mode .theme--light.v-list, body.dark-mode .theme--light.v-navigation-drawer, body.dark-mode .theme--light.v-toolbar, body.dark-mode .theme--light.v-tabs, body.dark-mode .theme--light.v-footer, body.dark-mode .theme--light.v-stepper, body.dark-mode .theme--light.v-expansion-panels, body.dark-mode .modal-content, body.dark-mode .dropdown-menu, body.dark-mode .popover, body.dark-mode .panel, body.dark-mode .well { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important; } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode strong, body.dark-mode .text-strong, body.dark-mode .v-card__title, body.dark-mode .v-toolbar__title, body.dark-mode .headline, body.dark-mode .title { color: var(--dm-heading) !important; } body.dark-mode p, body.dark-mode span, body.dark-mode div, body.dark-mode small, body.dark-mode label, body.dark-mode .text-muted, body.dark-mode .help-block, body.dark-mode .caption, body.dark-mode .v-list-item__subtitle, body.dark-mode .v-card__subtitle { color: wheat; } body.dark-mode .text-muted, body.dark-mode small, body.dark-mode .help-block, body.dark-mode .caption, body.dark-mode .v-messages__message, body.dark-mode .v-list-item__subtitle, body.dark-mode .v-card__subtitle, body.dark-mode .v-label:not(.v-label--active) { color: var(--dm-text-muted) !important; } body.dark-mode a, body.dark-mode .btn-link, body.dark-mode .v-breadcrumbs__item, body.dark-mode .v-tab { color: var(--dm-link) !important; } body.dark-mode a:hover, body.dark-mode a:focus, body.dark-mode .btn-link:hover, body.dark-mode .btn-link:focus, body.dark-mode .v-breadcrumbs__item:hover, body.dark-mode .v-tab:hover { color: var(--dm-link-hover) !important; } body.dark-mode hr, body.dark-mode .divider, body.dark-mode .v-divider, body.dark-mode .panel, body.dark-mode .panel-heading, body.dark-mode .panel-footer, body.dark-mode .list-group-item, body.dark-mode .table, body.dark-mode .table > thead > tr > th, body.dark-mode .table > tbody > tr > td, body.dark-mode .table > tbody > tr > th, body.dark-mode .table > tfoot > tr > td, body.dark-mode .table > tfoot > tr > th, body.dark-mode .v-data-table th, body.dark-mode .v-data-table td, body.dark-mode .v-list-item, body.dark-mode .v-expansion-panel, body.dark-mode .v-window-item, body.dark-mode .v-stepper__content, body.dark-mode .v-navigation-drawer__border { border-color: var(--dm-border) !important; } body.dark-mode .table, body.dark-mode .table-striped > tbody > tr:nth-of-type(odd), body.dark-mode .table-hover > tbody > tr:hover, body.dark-mode .v-data-table > .v-data-table__wrapper > table, body.dark-mode .v-data-table tbody tr:hover:not(.v-data-table__expanded__content) { background-color: transparent !important; color: var(--dm-text) !important; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd), body.dark-mode .list-group-item, body.dark-mode .v-list-item:hover, body.dark-mode .v-data-table tbody tr:hover:not(.v-data-table__expanded__content), body.dark-mode .v-expansion-panel::before { background-color: rgba(148, 163, 184, 0.08) !important; } body.dark-mode input, body.dark-mode textarea, body.dark-mode select, body.dark-mode .form-control, body.dark-mode .input-group-addon, body.dark-mode .theme--light.v-text-field > .v-input__control > .v-input__slot, body.dark-mode .theme--light.v-select > .v-input__control > .v-input__slot, body.dark-mode .theme--light.v-autocomplete > .v-input__control > .v-input__slot, body.dark-mode .theme--light.v-textarea > .v-input__control > .v-input__slot, body.dark-mode .v-text-field--outlined fieldset, body.dark-mode .v-input__slot { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border-strong) !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder, body.dark-mode .form-control::placeholder { color: var(--dm-text-muted) !important; } body.dark-mode .form-control:focus, body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus, body.dark-mode .theme--light.v-input input, body.dark-mode .theme--light.v-input textarea, body.dark-mode .theme--light.v-select__selection, body.dark-mode .theme--light.v-input input::placeholder, body.dark-mode .theme--light.v-input textarea::placeholder { color: var(--dm-text) !important; } body.dark-mode .form-control:focus, body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus, body.dark-mode .v-input--is-focused .v-input__slot, body.dark-mode .v-text-field--outlined.v-input--is-focused fieldset { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.16) !important; } body.dark-mode .btn-default, body.dark-mode .btn-secondary, body.dark-mode .btn-light, body.dark-mode .theme--light.v-btn:not(.v-btn--is-elevated):not(.v-btn--fab):not(.v-btn--icon) { background: var(--dm-surface-2) !important; border-color: var(--dm-border-strong) !important; color: var(--dm-text) !important; } body.dark-mode .btn-default:hover, body.dark-mode .btn-secondary:hover, body.dark-mode .btn-light:hover, body.dark-mode .theme--light.v-btn:hover:not(.v-btn--icon) { background: #2b3c53 !important; } body.dark-mode .btn-primary, body.dark-mode .theme--light.v-btn.primary, body.dark-mode .theme--light.v-btn.v-btn--has-bg.primary { background: var(--dm-accent-2) !important; border-color: var(--dm-accent-2) !important; color: #f8fafc !important; } body.dark-mode .btn-success { background: var(--dm-success) !important; border-color: var(--dm-success) !important; } body.dark-mode .btn-warning { background: var(--dm-warning) !important; border-color: var(--dm-warning) !important; color: #111827 !important; } body.dark-mode .btn-danger { background: var(--dm-danger) !important; border-color: var(--dm-danger) !important; } body.dark-mode .nav > li > a:hover, body.dark-mode .nav > li > a:focus, body.dark-mode .pagination > li > a, body.dark-mode .pagination > li > span, body.dark-mode .breadcrumb, body.dark-mode .nav-tabs, body.dark-mode .nav-tabs > li > a:hover, body.dark-mode .nav-pills > li > a:hover, body.dark-mode .theme--light.v-tabs > .v-tabs-bar, body.dark-mode .theme--light.v-tabs-items, body.dark-mode .theme--light.v-tabs-bar .v-tab--active { background: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } body.dark-mode .dropdown-menu > li > a, body.dark-mode .list-group-item, body.dark-mode .breadcrumb > li, body.dark-mode .pagination > li > a, body.dark-mode .pagination > li > span, body.dark-mode .theme--light.v-list-item, body.dark-mode .theme--light.v-list-item__title, body.dark-mode .theme--light.v-navigation-drawer .v-list-item__title, body.dark-mode .v-select__selection, body.dark-mode .v-icon { color: var(--dm-text) !important; } body.dark-mode .dropdown-menu > li > a:hover, body.dark-mode .dropdown-menu > li > a:focus, body.dark-mode .list-group-item:hover, body.dark-mode .theme--light.v-list-item:hover::before { background: rgba(125, 211, 252, 0.12) !important; } body.dark-mode .modal-backdrop, body.dark-mode .v-overlay__scrim { background: rgba(3, 7, 18, 0.72) !important; } body.dark-mode .v-progress-linear__background, body.dark-mode .progress { background: rgba(148, 163, 184, 0.2) !important; } body.dark-mode .progress-bar, body.dark-mode .v-progress-linear__determinate, body.dark-mode .v-progress-circular__overlay { background-color: var(--dm-accent) !important; stroke: var(--dm-accent) !important; } body.dark-mode .alert, body.dark-mode .alert-info, body.dark-mode .alert-success, body.dark-mode .alert-warning, body.dark-mode .alert-danger { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } body.dark-mode img { opacity: 0.96; } body.dark-mode canvas { filter: brightness(0.92) contrast(1.05); } body.dark-mode .cke_chrome, body.dark-mode .cke_top, body.dark-mode .cke_bottom, body.dark-mode .cke_contents, body.dark-mode .cke_inner { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } body.dark-mode .cke_top *, body.dark-mode .cke_bottom *, body.dark-mode .cke_contents * { color: var(--dm-text) !important; } body.dark-mode .sp-replacer, body.dark-mode .sp-container, body.dark-mode .sp-picker-container, body.dark-mode .sp-palette-container { background: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } body.dark-mode ::selection { background: rgba(56, 189, 248, 0.35); color: #fff; } html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__title-inner { color: wheat !important; }