/* ================================================ Dark/Light Mode Toggle & Layout Fixes For: ssomesh.github.io ================================================ */ /* --- Fix page shift caused by scrollbar appearing/disappearing --- */ html { overflow-y: scroll; } /* --- Anti-flash: set html background to match body when dark-mode class is on , before or external CSS fully loads. This prevents the white flash between page navigations. --- */ html.dark-mode { background-color: #000000; } /* --- Theme Toggle Button --- */ .theme-toggle { float: right; z-index: 100; margin-top: 0.3em; background: #f5f5f5; border: 2px solid #003262; border-radius: 50%; width: 2.4rem; height: 2.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease; color: #003262; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .theme-toggle:hover { background: #003262; color: #FDB515; transform: scale(1.08); } .theme-toggle:focus { outline: 2px solid #FDB515; outline-offset: 2px; } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } @media (max-width: 767px) { .theme-toggle { width: 2rem; height: 2rem; } .theme-toggle svg { width: 1rem; height: 1rem; } } /* --- Smooth Transitions --- */ body { transition: background-color 0.3s ease, color 0.3s ease; } a { transition: color 0.2s ease; } .navbar { transition: background-color 0.3s ease, border-color 0.3s ease; } /* ================================================ DARK MODE OVERRIDES ================================================ Color palette (Cyborg-inspired, true-black): Background : #000000 (true black) Text : #b0b0b0 (soft gray — easy on the eyes) Headings : #e0e0e0 (near-white, gentle) Bold text : #d0d0d0 (brighter for emphasis) Links : #4dd0e1 (bright cyan — pops on black, distinct) Link hover : #ffd54f (warm gold — clear visual feedback) Navbar bg : #e8ecf1 (light cool gray — floating bar) Navbar text : #1e293b (dark slate) Navbar active: #003262 (Berkeley Blue — brand consistency) Navbar hover : #2563eb (bright blue) HR / borders : #282828 (dark gray — Cyborg-style) Section rule : #3c3c3c (mid gray) Blockquote bg: #0d0d0d (near-black, subtle depth) Panel bg : #0d0d0d (near-black) ================================================ */ /* --- Body --- */ body.dark-mode { background-color: #000000; color: #b0b0b0; } /* --- Headings --- */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e0e0e0; } /* --- Paragraphs --- */ body.dark-mode p { color: #b0b0b0; } /* --- Bold / strong text (brighter for emphasis) --- */ body.dark-mode b, body.dark-mode strong { color: #d0d0d0; } /* --- Links --- */ body.dark-mode a, body.dark-mode a:link, body.dark-mode a:visited { color: #4dd0e1; } body.dark-mode a:hover, body.dark-mode a:focus { color: #ffd54f; } /* ------------------------------------------------ Navbar — light-colored bar on the dark background ------------------------------------------------ */ body.dark-mode .navbar { background: #e8ecf1; border: 1px solid #cbd5e1; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } body.dark-mode .navbar-inverse .navbar-brand { color: #003262; } body.dark-mode .navbar-inverse .navbar-nav > li > a { color: #1e293b; } body.dark-mode .navbar-inverse .navbar-nav > li.active > a, body.dark-mode .navbar-inverse .navbar-nav > li.active > a:hover, body.dark-mode .navbar-inverse .navbar-nav > li.active > a:focus { color: #003262; background-color: transparent; font-weight: bold; } body.dark-mode .navbar-inverse .navbar-brand:hover, body.dark-mode .navbar-inverse .navbar-brand:focus { color: #1d4ed8; } body.dark-mode .navbar-inverse .navbar-nav > li > a:hover, body.dark-mode .navbar-inverse .navbar-nav > li > a:focus { color: #2563eb; } /* Hamburger button (mobile) — dark icons on light navbar */ body.dark-mode .navbar-inverse .navbar-toggle { border-color: #94a3b8; background-color: transparent; } body.dark-mode .navbar-inverse .navbar-toggle .icon-bar { background-color: #334155; } body.dark-mode .navbar-inverse .navbar-toggle:hover, body.dark-mode .navbar-inverse .navbar-toggle:focus { background-color: #cbd5e1; } body.dark-mode .navbar-inverse .navbar-collapse { border-color: #cbd5e1; background-color: #e8ecf1; } /* ------------------------------------------------ Horizontal Rules & Section Borders ------------------------------------------------ */ body.dark-mode hr { border-color: #282828; } body.dark-mode h3[style*="border-bottom"] { border-bottom-color: #3c3c3c !important; } /* ------------------------------------------------ Inline-style color overrides (require !important) ------------------------------------------------ */ /* color:black → readable gray */ body.dark-mode [style*="color:black"], body.dark-mode [style*="color: black"] { color: #b0b0b0 !important; } /* ACM badge dark-purple text → light cyan */ body.dark-mode span[style*="color: #23007d"], body.dark-mode span[style*="color:#23007d"] { color: #80deea !important; } /* Mentor topic gold (#C4820E) → brighter gold for black bg */ body.dark-mode dd[style*="color:#C4820E"] { color: #f5b942 !important; } body.dark-mode a[style*="color:#C4820E"] { color: #f5b942 !important; } /* ------------------------------------------------ Blockquotes (dissertation page) ------------------------------------------------ */ body.dark-mode blockquote { background: #0d0d0d !important; border-left-color: #3c3c3c; color: #b0b0b0; } body.dark-mode blockquote footer { color: #888888; } /* ------------------------------------------------ Images — profile photo ------------------------------------------------ */ body.dark-mode .container .img-responsive { border-color: #282828; } /* ------------------------------------------------ Small icon images — light pill background Gives each icon a white rounded backdrop so it is clearly visible on the black background. ------------------------------------------------ */ body.dark-mode img[src*="github.png"], body.dark-mode img[src*="linkedin"], body.dark-mode img[src*="orcid"] { background-color: rgba(255, 255, 255, 0.92); border-radius: 4px; padding: 1px; } /* ACM Results Reproduced badge */ body.dark-mode img[src*="acm_results"] { background-color: rgba(255, 255, 255, 0.92); border-radius: 4px; padding: 1px; } /* Academicons font-icons (DBLP, Google Scholar squares) */ body.dark-mode i.ai { background-color: rgba(255, 255, 255, 0.92); border-radius: 3px; padding: 1px 2px; color: #1a1a1a; } /* Tag-cloud image (dissertation page) — white backdrop */ body.dark-mode img[alt="dissertation_tag_cloud"] { background-color: #ffffff; border-radius: 6px; padding: 4px; } /* ------------------------------------------------ Toggle Button in Dark Mode ------------------------------------------------ */ body.dark-mode .theme-toggle { background: #0d0d0d; border-color: #4dd0e1; color: #dce8f0; box-shadow: 0 2px 8px rgba(77, 208, 225, 0.25); } body.dark-mode .theme-toggle:hover { background: #4dd0e1; color: #000000; transform: scale(1.08); } body.dark-mode .theme-toggle:focus { outline-color: #ffd54f; } body.dark-mode .theme-toggle .icon-sun { display: inline; } body.dark-mode .theme-toggle .icon-moon { display: none; } /* ------------------------------------------------ Definition lists, list items ------------------------------------------------ */ body.dark-mode dt { color: #d0d0d0; } body.dark-mode dd { color: #b0b0b0; } body.dark-mode li { color: #b0b0b0; } /* ------------------------------------------------ Collapsed abstract panels (Bootstrap) ------------------------------------------------ */ body.dark-mode .panel { background-color: #0d0d0d; border-color: #282828; } body.dark-mode .panel-body { color: #b0b0b0; }