/* Theme Name: Blocksy Child Theme URI: https://example.com Description: Blocksy child theme with OS-aware light/dark mode switching, no plugins required. Author: Your Name Template: blocksy Version: 1.0.0 Text Domain: blocksy-child */ /* ---------------------------------------------------- Dark mode color palette The JavaScript sets: or These variables override Blocksy's global colors 2a2a2d when dark mode is active. c40fd8 ---------------------------------------------------- */ :root[data-theme="dark"] { /* Header links, site title, buttons */ --theme-palette-color-1: #83af89; /* Accent hover / secondary accent */ --theme-palette-color-2: #c1f2ba; /* Primary text */ --theme-palette-color-3: #e6e6e6; /* Secondary text / post titles */ --theme-palette-color-4: #a0a0a0; /* Page background */ --theme-palette-color-5: #0f0f10; /* Footer, dark mode toggle, outside of canvas menu */ --theme-palette-color-6: #1a1a1c; /* Dark mode toggle border */ --theme-palette-color-7: #2a2a2d; /* Header background and content background */ --theme-palette-color-8: #141416; --theme-border-color: #2a2a2d; color-scheme: dark; } /* ===================================================== BuddyPress - Dark Mode ===================================================== */ :root[data-theme="dark"] .activity-list.bp-list { background-color: var(--theme-palette-color-8); } /* BuddyPress boxes / containers / list items */ :root[data-theme="dark"] #buddypress div, :root[data-theme="dark"] #buddypress dl, :root[data-theme="dark"] #buddypress li { background-color: #1a1a1c; border-color: #2a2a2d; } /* Form fields */ :root[data-theme="dark"] #buddypress input, :root[data-theme="dark"] #buddypress select, :root[data-theme="dark"] #buddypress textarea { background-color: #000000; color: #e6e6e6; border-color: #2a2a2d; box-shadow: none; } /* Remove focus glow */ :root[data-theme="dark"] #buddypress input:focus, :root[data-theme="dark"] #buddypress select:focus, :root[data-theme="dark"] #buddypress textarea:focus { background-color: #000000; box-shadow: none !important; outline: none; } :root[data-theme="dark"] #bbpress-forums ul.odd, :root[data-theme="dark"] #bbpress-forums ul.even { background-color: #1A1A1C; } :root[data-theme="dark"] #bbpress-forums .bbp-reply-content, :root[data-theme="dark"] #bbpress-forums .bbp-reply-header, :root[data-theme="dark"] #bbpress-forums .bbp-body { background-color: #1a1a1c; } :root[data-theme="dark"] #bbpress-forums ul.bbp-replies { border-color: #2a2a2d; } /* bbPress reply areas */ :root[data-theme="dark"] #bbpress-forums .bbp-reply-author, :root[data-theme="dark"] #bbpress-forums .bbp-reply-content { background-color: #1a1a1c; } /* Reply borders */ :root[data-theme="dark"] #bbpress-forums .bbp-reply-author, :root[data-theme="dark"] #bbpress-forums .bbp-reply-content { border-color: #2a2a2d; } /* Author information */ :root[data-theme="dark"] #bbpress-forums .bbp-author-name, :root[data-theme="dark"] #bbpress-forums .bbp-author-role, :root[data-theme="dark"] #bbpress-forums .bbp-reply-ip { color: #a0a0a0; } /* bbPress replies */ :root[data-theme="dark"] #bbpress-forums .bbp-reply, :root[data-theme="dark"] #bbpress-forums .bbp-reply-author, :root[data-theme="dark"] #bbpress-forums .bbp-reply-content { background-color: #1a1a1c; border-color: #2a2a2d; } :root[data-theme="dark"] #bbpress-forums div.even, :root[data-theme="dark"] #bbpress-forums div.odd { background-color: #1a1a1c; } /* ===================================================== bbPress - Dark Mode ===================================================== */ :root[data-theme="dark"] #bbpress-forums ul.odd, :root[data-theme="dark"] #bbpress-forums ul.bbp-replies, :root[data-theme="dark"] #bbpress-forums div.even, :root[data-theme="dark"] #bbpress-forums li.bbp-footer { background-color: #1a1a1c; border-color: #2a2a2d; } /* bbPress reply containers */ :root[data-theme="dark"] #bbpress-forums ul, :root[data-theme="dark"] #bbpress-forums li, :root[data-theme="dark"] #bbpress-forums div { border-color: #2a2a2d; } /* Remove white backgrounds from bbPress */ :root[data-theme="dark"] #bbpress-forums .bbp-reply-author, :root[data-theme="dark"] #bbpress-forums .bbp-reply-content { background-color: transparent; } /* ===================================================== bbPress - Dark Mode ===================================================== */ :root[data-theme="dark"] #bbpress-forums ul.odd, :root[data-theme="dark"] #bbpress-forums ul.bbp-replies, :root[data-theme="dark"] #bbpress-forums div.even, :root[data-theme="dark"] #bbpress-forums li.bbp-footer, :root[data-theme="dark"] #bbpress-forums li.bbp-header { background-color: #1a1a1c; border-color: #2a2a2d; } /* ---------------------------------------------------- Dark mode page ---------------------------------------------------- */ :root[data-theme="dark"] body { background-color: var(--theme-palette-color-5); color: var(--theme-palette-color-3); } /* ---------------------------------------------------- Dark mode links ---------------------------------------------------- */ :root[data-theme="dark"] a { color: var(--theme-palette-color-1); } :root[data-theme="dark"] a:hover { color: var(--theme-palette-color-2); } /* ---------------------------------------------------- Dark mode header, footer and content ---------------------------------------------------- */ :root[data-theme="dark"] .ct-header, :root[data-theme="dark"] .ct-footer, :root[data-theme="dark"] .inner-content, :root[data-theme="dark"] .single-content { background-color: var(--theme-palette-color-6); border-color: var(--theme-palette-color-7); } /* ---------------------------------------------------- Dark mode dividers ---------------------------------------------------- */ :root[data-theme="dark"] hr, :root[data-theme="dark"] .ct-divider { border-color: var(--theme-palette-color-8); } /* ---------------------------------------------------- Dark mode toggle button ---------------------------------------------------- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; margin: 0; border: 1px solid var(--theme-palette-color-7, #ddd); border-radius: 6px; background: var(--theme-palette-color-6, #fff); color: var(--theme-palette-color-3, #111); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } /* ---------------------------------------------------- Toggle hover ---------------------------------------------------- */ .theme-toggle-btn:hover { opacity: 0.85; }