/* ======================================================================== Afrawbeats light design — opt-in via data-theme="light" on . The existing dark graphite design remains the default. ======================================================================== */ html[data-theme="light"] { color-scheme: light; --bg-app: #f7f1e5; --bg-dark: #f7f1e5; --bg-panel: #fffdf8; --bg-panel-solid: #fffdf8; --bg-card: #fffdf8; --bg-card-hover: #f2e9d8; --bg-surface: #f2e9d8; --bg-hover: #eee3ce; --border-glow: rgba(36, 31, 23, 0.16); --border-light: rgba(36, 31, 23, 0.16); --comic-paper: #f7f1e5; --comic-paper-dark: #eee4d2; --comic-ink: #262018; --comic-ink-light: #665d50; --text-main: #262018; --text-mute: #6e6558; --card-bg-light: rgba(38, 32, 24, 0.055); --comic-border: 2px solid #262018; --comic-border-thick: 3px dashed #262018; --comic-shadow: 4px 4px 0 #262018; --sketch-rule: url('assets/sketch-ui/rule-black.png?v=1'); --sketch-rule-short: url('assets/sketch-ui/rule-short-black.png?v=1'); --sketch-rule-tiny: url('assets/sketch-ui/rule-tiny-black.png?v=1'); --sketch-box: url('assets/sketch-ui/box-wide-black.png?v=1'); --sketch-box-sm: url('assets/sketch-ui/box-sm-black.png?v=1'); --sketch-box-sq: url('assets/sketch-ui/box-sm-black.png?v=1'); --sketch-capsule: url('assets/sketch-ui/capsule-black.png?v=1'); --sketch-capsule-sm: url('assets/sketch-ui/capsule-sm-black.png?v=1'); --sketch-bubble: url('assets/sketch-ui/bubble-black.png?v=1'); } html[data-theme="light"] body, html[data-theme="light"] .app-wrapper, html[data-theme="light"] .center-content-area { background: #f7f1e5 !important; color: var(--text-main); } html[data-theme="light"] .left-sidebar, html[data-theme="light"] .right-sidebar, html[data-theme="light"] .sidebar-user-profile, html[data-theme="light"] .mobile-bottom-nav, html[data-theme="light"] .mobile-more-panel { background: #fffdf8 !important; color: var(--text-main) !important; } html[data-theme="light"] .left-sidebar, html[data-theme="light"] .right-sidebar { border-color: rgba(38, 32, 24, 0.36) !important; } html[data-theme="light"] .comic-panel, html[data-theme="light"] .feed-card, html[data-theme="light"] .chat-messages, html[data-theme="light"] .ver-panel, html[data-theme="light"] .launcher-card, html[data-theme="light"] .contract-container, html[data-theme="light"] .analysis-loading-wrapper, html[data-theme="light"] .phone-app-header, html[data-theme="light"] .profile-card, html[data-theme="light"] .mobile-more-panel { background: #fffdf8 !important; color: var(--text-main) !important; box-shadow: 2px 2px 0 rgba(38, 32, 24, 0.18) !important; } html[data-theme="light"] .left-sidebar .nav-link, html[data-theme="light"] .mobile-bottom-nav .nav-item, html[data-theme="light"] .sidebar-user-profile, html[data-theme="light"] .f-name, html[data-theme="light"] .su-info .f-name, html[data-theme="light"] .phone-screen-content, html[data-theme="light"] .phone-screen-content h2, html[data-theme="light"] .phone-screen-content h3, html[data-theme="light"] .phone-screen-content h4, html[data-theme="light"] .phone-screen-content h5, html[data-theme="light"] .mobile-more-link { color: var(--text-main) !important; } html[data-theme="light"] .left-sidebar .nav-link:hover, html[data-theme="light"] .left-sidebar .nav-link.active, html[data-theme="light"] .mobile-bottom-nav .nav-item.active { color: #000 !important; } html[data-theme="light"] .mobile-more-link, html[data-theme="light"] .sidebar-search, html[data-theme="light"] .genre-tag, html[data-theme="light"] .chat-input-area, html[data-theme="light"] .live-chat-header, html[data-theme="light"] .profile-status-stack { background: #f2e9d8 !important; border-color: rgba(38, 32, 24, 0.22) !important; } html[data-theme="light"] .sidebar-search input, html[data-theme="light"] .comic-input, html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background-color: #fffefa !important; color: var(--text-main) !important; border-color: rgba(38, 32, 24, 0.38) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #827767 !important; opacity: 1; } html[data-theme="light"] .feed-card-info { background: linear-gradient(to top, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.8) 60%, transparent 100%) !important; } html[data-theme="light"] .feed-header-bar, html[data-theme="light"] .feed-header-tab, html[data-theme="light"] .feed-action-btn, html[data-theme="light"] .profile-action-row .phone-btn.secondary, html[data-theme="light"] .profile-action-row .phone-btn.secondary i { background: #fffdf8 !important; color: var(--text-main) !important; border-color: rgba(38, 32, 24, 0.26) !important; } html[data-theme="light"] .feed-header-tab.active-tab { color: var(--text-main) !important; border-bottom-color: var(--text-main) !important; } html[data-theme="light"] .sketch-icon, html[data-theme="light"] .left-sidebar .nav-link img, html[data-theme="light"] #drum-pad-img { filter: none !important; mix-blend-mode: normal !important; } html[data-theme="light"] .left-sidebar .nav-link:hover img, html[data-theme="light"] .left-sidebar .nav-link.active img, html[data-theme="light"] .left-sidebar .nav-link:hover .sketch-icon, html[data-theme="light"] .left-sidebar .nav-link.active .sketch-icon { filter: none !important; mix-blend-mode: normal !important; } html[data-theme="light"] .profile-avatar-ring { background: #e7dcc7; border-color: rgba(38, 32, 24, 0.35); } html[data-theme="light"] .story-item > span:last-child, html[data-theme="light"] .following-header, html[data-theme="light"] .profile-stat-label, html[data-theme="light"] .profile-status-label, html[data-theme="light"] .feed-card .text-mute, html[data-theme="light"] .text-mute { color: var(--text-mute) !important; } html[data-theme="light"] .feed-bottom, html[data-theme="light"] .fc-footer, html[data-theme="light"] .fc-header, html[data-theme="light"] .trending-strip, html[data-theme="light"] .stories-strip { border-color: rgba(38, 32, 24, 0.3) !important; } html[data-theme="light"] * { scrollbar-color: rgba(38, 32, 24, 0.35) transparent; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(38, 32, 24, 0.28); } /* Shared chooser: desktop lives above the profile footer; mobile lives in More. */ .theme-picker { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; color: var(--text-main); font-family: var(--font-comic-title), sans-serif; } .theme-picker-label { font-size: 0.9rem; color: var(--text-mute); } .theme-picker-options { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); border-radius: 999px; } .theme-picker-options button { min-height: 32px; border: 0; border-radius: 999px; padding: 5px 9px; background: transparent; color: var(--text-mute); font: inherit; font-size: 0.78rem; cursor: pointer; } .theme-picker-options button:hover, .theme-picker-options button:focus-visible { color: var(--text-main); background: rgba(255, 255, 255, 0.1); } .theme-picker-options button.is-selected { background: var(--comic-yellow); color: #000; font-weight: 700; } .sidebar-theme-picker { flex: 0 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.14); background: var(--bg-panel); } .mobile-theme-picker { margin-top: 4px; padding: 12px; background: rgba(255, 255, 255, 0.04); } .verification-theme-picker { width: min(100%, 260px); margin: 0.75rem auto 0; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.05); } html[data-theme="light"] .verification-theme-picker { border-color: rgba(38, 32, 24, 0.3); background: #eee3cf; } html[data-theme="light"] .theme-picker-options { border-color: rgba(38, 32, 24, 0.28); background: #eee3cf; } html[data-theme="light"] .theme-picker-options button:hover, html[data-theme="light"] .theme-picker-options button:focus-visible { background: #e2d5bf; color: var(--text-main); } html[data-theme="light"] .sidebar-theme-picker, html[data-theme="light"] .mobile-theme-picker { background: #fffdf8; border-color: rgba(38, 32, 24, 0.2); } /* Complete light-mode contrast pass. White pencil art and hard-coded dark-mode text are converted to ink only on paper surfaces; media overlays stay white. */ html[data-theme="light"] #app-launcher-overlay, html[data-theme="light"] #fingerprint-loading-overlay, html[data-theme="light"] #human-verification-modal { background: #f7f1e5 !important; color: #1d1913 !important; } html[data-theme="light"] .launcher-card, html[data-theme="light"] .launcher-card :is(h1, h2, h3, h4, p, span, label), html[data-theme="light"] .verification-card, html[data-theme="light"] .verification-card :is(h1, h2, h3, h4, p, span, label), html[data-theme="light"] .verification-status, html[data-theme="light"] .verification-voice-status, html[data-theme="light"] .verification-camera-help, html[data-theme="light"] .verification-skip-countdown { color: #1d1913 !important; -webkit-text-fill-color: #1d1913 !important; } html[data-theme="light"] .verification-card .text-mute, html[data-theme="light"] .verification-card .verification-voice-status, html[data-theme="light"] .verification-card .verification-camera-help, html[data-theme="light"] .verification-card .verification-skip-countdown { color: #62594c !important; -webkit-text-fill-color: #62594c !important; } html[data-theme="light"] .afraw-logo-main img, html[data-theme="light"] #human-verification-modal .scanner-guy-sprite, html[data-theme="light"] #human-verification-modal .scanner-char-anim, html[data-theme="light"] #fingerprint-loading-overlay .scanner-char-anim { filter: brightness(0) contrast(1.2) !important; } html[data-theme="light"] .challenge-visual-container { background: radial-gradient(ellipse at 22% 72%, rgba(255, 213, 0, 0.24), transparent 48%), #f2e9d8 !important; border-color: #262018 !important; } html[data-theme="light"] .speech-bubble, html[data-theme="light"] .rhythm-playback-box, html[data-theme="light"] .verification-beta-fallback { background-color: #fffdf8 !important; color: #1d1913 !important; border-color: #262018 !important; } html[data-theme="light"] .rhythm-dot, html[data-theme="light"] .indicator-dot { border-color: #262018 !important; background: #fffdf8 !important; } html[data-theme="light"] .rhythm-dot.active, html[data-theme="light"] .indicator-dot.active { background: var(--comic-yellow) !important; } html[data-theme="light"] :is( .phone-screen-content, .comic-panel, .contract-container, .profile-chrome, .profile-main-row, .profile-activity-block, .profile-chip, .chat-input-area, .chat-overlay-modal, #comments-modal, #post-viewer-modal, #trending-modal, #top-artists-modal, #create-picker-modal, #story-recorder-modal ) :is(h1, h2, h3, h4, h5, h6, p, span, label, a) { color: #262018 !important; } html[data-theme="light"] :is( #profile-view-name, #public-profile-name, #upload-district-banner-name, .profile-back-bar h3, .profile-back-btn, .profile-chip, .profile-link, .dsp-item > span, #global-toast, #create-picker-modal > div h3 ) { color: #262018 !important; -webkit-text-fill-color: #262018 !important; } html[data-theme="light"] :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, i[class*="fa-"]) { color: #262018 !important; } html[data-theme="light"] :is( .live-badge, #live-timer, #live-end-btn, #live-unmute-btn, #camera-loading, #story-viewer-modal, .post-video-sound-toggle:not(.is-audible), .wall-preview-badge ) :is(i, span), html[data-theme="light"] :is( .live-badge, #live-timer, #live-end-btn, #live-unmute-btn, #camera-loading, #story-viewer-modal, .post-video-sound-toggle:not(.is-audible), .wall-preview-badge ) { color: #fff !important; -webkit-text-fill-color: #fff !important; } html[data-theme="light"] .sidebar-logo-img, html[data-theme="light"] .music-player-widget img, html[data-theme="light"] .sketch-icon, html[data-theme="light"] .left-sidebar .nav-link img { filter: brightness(0) contrast(1.15) !important; mix-blend-mode: normal !important; } html[data-theme="light"] .phone-btn.primary, html[data-theme="light"] .phone-btn.primary *, html[data-theme="light"] .comic-starburst, html[data-theme="light"] .comic-starburst *, html[data-theme="light"] .post-video-sound-toggle.is-audible, html[data-theme="light"] .post-video-sound-toggle.is-audible * { color: #000 !important; -webkit-text-fill-color: #000 !important; } html[data-theme="light"] .profile-chrome, html[data-theme="light"] .profile-main-row, html[data-theme="light"] .profile-activity-block, html[data-theme="light"] .liked-post-card, html[data-theme="light"] .inbox-item, html[data-theme="light"] .music-player-widget { background-color: #fffdf8 !important; border-color: #262018 !important; color: #262018 !important; } html[data-theme="light"] .profile-main-row, html[data-theme="light"] .profile-chrome { border-color: rgba(38, 32, 24, 0.3) !important; } html[data-theme="light"] .theme-picker-options { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html[data-theme="light"] .theme-picker-options button { border-radius: 0 !important; } html[data-theme="light"] #phone-profile-setup .genre-tag.selected { background: var(--comic-yellow) !important; border-color: #262018 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; } /* Direct messages need their own paper/ink palette. The dark theme's bubble rules deliberately use white pencil text and outlines, which disappears on the light chat canvas unless every part of the bubble is recoloured here. */ html[data-theme="light"] #chat-messages-container, html[data-theme="light"] .chat-overlay-messages { background: #f7f1e5 !important; } html[data-theme="light"] #chat-messages-container .msg, html[data-theme="light"] .chat-overlay-messages .msg { background: #fffdf8 !important; color: #262018 !important; -webkit-text-fill-color: #262018 !important; box-shadow: 1px 0 0 rgba(38, 32, 24, 0.88), -1px 0 0 rgba(38, 32, 24, 0.72), 0 1px 0 rgba(38, 32, 24, 0.84), 0 -1px 0 rgba(38, 32, 24, 0.68), 2px 2px 0 rgba(38, 32, 24, 0.25) !important; } html[data-theme="light"] #chat-messages-container .msg.self, html[data-theme="light"] .chat-overlay-messages .msg.self { background: #f6e58f !important; color: #1d1913 !important; -webkit-text-fill-color: #1d1913 !important; } html[data-theme="light"] #chat-thread-title, html[data-theme="light"] #chat-overlay-title { color: #8a6200 !important; -webkit-text-fill-color: #8a6200 !important; } html[data-theme="light"] .chat-header, html[data-theme="light"] .chat-overlay-header, html[data-theme="light"] .chat-input-area, html[data-theme="light"] .chat-overlay-input { border-color: rgba(38, 32, 24, 0.34) !important; } html[data-theme="light"] #chat-thread-input, html[data-theme="light"] #chat-overlay-input-field { color: #262018 !important; -webkit-text-fill-color: #262018 !important; } @media (max-width: 767px) { .sidebar-theme-picker { display: none; } }