/* ===================================================== Dark Mode Theme Applied via [data-theme="dark"] on . Uses Tenable tonal palette adapted for dark backgrounds. ===================================================== */ /* ---- Toggle Button (desktop) ---- */ .dark-mode-toggle { position: absolute; right: 195px; top: 9px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: 0; color: #ccc; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; z-index: 101; padding: 0; } .dark-mode-toggle:hover, .dark-mode-toggle:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.5); outline: none; } /* Mobile toggle — hidden on desktop, shown on mobile */ .dark-mode-toggle--mobile { display: none; position: static; right: auto; top: auto; width: 32px; height: 32px; border: none; background: transparent; color: #ccc; cursor: pointer; } .dark-mode-toggle--mobile:hover { color: #fff; } @media (max-width: 1079px) { .dark-mode-toggle:not(.dark-mode-toggle--mobile) { display: none; } .dark-mode-toggle--mobile { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 4px !important; margin-top: -47px !important; padding: 0 4px !important; flex-shrink: 0 !important; color: #fff !important; } .dark-mode-toggle--mobile:hover, .dark-mode-toggle--mobile:active { color: #E7FF00 !important; } } @media (max-width: 900px) { .dark-mode-toggle:not(.dark-mode-toggle--mobile) { right: 50px; } } /* ---- Dark Theme Overrides ---- */ [data-theme="dark"] { color-scheme: dark; } /* Body & main background */ [data-theme="dark"] body { background-color: #1a1d1e !important; color: #d4d6d7 !important; } [data-theme="dark"] .main-section { background-color: #1a1d1e !important; } /* Navigation bar — darker than breadcrumbs for contrast. padding-bottom:1px prevents .navigation-wrapper's margin-bottom from collapsing out of the nav and exposing the body background. */ [data-theme="dark"] nav.title-bar { background-color: #111415 !important; border-bottom-color: #2B2F31 !important; padding-bottom: 1px !important; } [data-theme="dark"] nav.tab-bar { background-color: #111415 !important; border-bottom-color: #2B2F31 !important; } [data-theme="dark"] .navigation-wrapper { background-color: #111415 !important; } [data-theme="dark"] .title-bar-layout { background-color: #111415 !important; } [data-theme="dark"] .title-bar-container { background-color: #111415 !important; } /* Prevent the navbar and dropdown buttons from painting their own #1E2426 background which creates a visible "box" */ [data-theme="dark"] .navbar { background-color: #111415 !important; } [data-theme="dark"] .dropdown .dropbtn { background-color: #111415 !important; } /* Top navigation dropdowns */ [data-theme="dark"] .navbar .dropdown .dropdown-content { background-color: #1E2426 !important; border-color: #2B2F31 !important; } [data-theme="dark"] .navbar .dropdown .dropdown-content div a { color: #d4d6d7 !important; } [data-theme="dark"] .navbar .dropdown .dropdown-content div a:hover { background-color: #2B2F31 !important; color: #ffffff !important; } [data-theme="dark"] .navbar .dropdown .dropbtn { color: #d4d6d7 !important; } [data-theme="dark"] .navbar .dropdown .dropbtn:hover { color: #ffffff !important; } [data-theme="dark"] .navbar .dropdown-level-2 .dropbtn-level-2 { color: #d4d6d7 !important; } [data-theme="dark"] .navbar .dropdown-level-2 .dropdown-content-level-2 { background-color: #232729 !important; border-color: #2B2F31 !important; } /* Breadcrumb strip */ [data-theme="dark"] #topContentHeader { background-color: #1E2426 !important; border-bottom: 1px solid #2B2F31 !important; } [data-theme="dark"] .breadcrumbsContainer, [data-theme="dark"] a.MCBreadcrumbsLink, [data-theme="dark"] a.MCBreadcrumbsLink:visited, [data-theme="dark"] a.MCBreadcrumbsLink:hover, [data-theme="dark"] .MCBreadcrumbsBox_0 { color: #969696 !important; } [data-theme="dark"] a.MCBreadcrumbsLink:hover { color: #d4d6d7 !important; } /* Side navigation */ [data-theme="dark"] nav.sidenav-wrapper, [data-theme="dark"] .sidenav-wrapper { background-color: #141718 !important; border-right-color: #2B2F31 !important; } [data-theme="dark"] .sidenav-container { background-color: #141718 !important; } [data-theme="dark"] ul.sidenav ul > li > a, [data-theme="dark"] ul.sidenav li a { color: #b8babb !important; } [data-theme="dark"] ul.sidenav ul > li > a:hover, [data-theme="dark"] ul.sidenav li a:hover { background-color: #232729 !important; color: #ffffff !important; border-left-color: #44494B !important; } [data-theme="dark"] ul.sidenav ul > li > a.selected, [data-theme="dark"] ul.sidenav li a.selected, [data-theme="dark"] ul.sidenav ul ul > li > a.selected, [data-theme="dark"] ul.sidenav ul ul ul > li > a.selected { background-color: #232729 !important; color: #ffffff !important; border-left-color: #E7FF00 !important; } /* Content area */ [data-theme="dark"] div#mcTopic { color: #d4d6d7; } /* Headings */ [data-theme="dark"] h1 { color: #f0f0f0 !important; border-bottom-color: #44494B !important; } [data-theme="dark"] h2 { color: #e8e8e8 !important; } [data-theme="dark"] h3 { color: #dcdcdc !important; } [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #d0d0d0 !important; } [data-theme="dark"] #mc-main-content h2, [data-theme="dark"] #mc-main-content h3, [data-theme="dark"] #mc-main-content h4, [data-theme="dark"] #mc-main-content h5, [data-theme="dark"] #mc-main-content h6 { border-bottom-color: #44494B !important; } /* Paragraph text */ [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span, [data-theme="dark"] div { color: inherit; } /* Links — intentionally light blue for readability on dark backgrounds. Standard accessible link color for dark themes (WCAG contrast ratio). */ [data-theme="dark"] a, [data-theme="dark"] a:link, [data-theme="dark"] a:visited, [data-theme="dark"] a:focus, [data-theme="dark"] a:active, [data-theme="dark"] a.MCXref { color: #8cc4ff !important; } [data-theme="dark"] a:hover { color: #b8daff !important; text-decoration-color: #b8daff !important; } /* Tables */ [data-theme="dark"] table { border-color: #44494B !important; } [data-theme="dark"] th { background-color: #111415 !important; border-color: #2B2F31 !important; color: #f0f0f0 !important; } [data-theme="dark"] td { background-color: #1a1d1e !important; border-color: #2B2F31 !important; color: #d4d6d7 !important; } [data-theme="dark"] tbody tr:nth-child(even) td { background-color: #1E2426 !important; } [data-theme="dark"] tbody tr:hover td { background-color: #232729 !important; } [data-theme="dark"] td.Subheading { background-color: #2B2F31 !important; color: #f0f0f0 !important; border-top-color: #44494B !important; border-bottom-color: #44494B !important; } /* Code blocks */ [data-theme="dark"] div.Code { background-color: #111415 !important; border-color: #2B2F31 !important; color: #d4d6d7 !important; } [data-theme="dark"] code { color: #d4d6d7 !important; } /* Note/Tip/Caution/Permission/Video/License boxes */ [data-theme="dark"] p.Note, [data-theme="dark"] div.Note { background-color: #162233 !important; border-left-color: #4EA5FF !important; color: #d4d6d7 !important; box-shadow: 0 2px 12px rgba(78, 165, 255, 0.06) !important; } [data-theme="dark"] p.Tip, [data-theme="dark"] div.Tip { background-color: #14292a !important; border-left-color: #71FFC6 !important; color: #d4d6d7 !important; box-shadow: 0 2px 12px rgba(113, 255, 198, 0.06) !important; } [data-theme="dark"] p.Caution, [data-theme="dark"] div.Caution { background-color: #2a1c14 !important; border-left-color: #FF8837 !important; color: #d4d6d7 !important; box-shadow: 0 2px 12px rgba(255, 136, 55, 0.06) !important; } [data-theme="dark"] p.Permission, [data-theme="dark"] div.Permission { background-color: #222414 !important; border-left-color: #E7FF00 !important; color: #d4d6d7 !important; box-shadow: 0 2px 12px rgba(231, 255, 0, 0.06) !important; } [data-theme="dark"] p.Video, [data-theme="dark"] div.Video { background-color: #1E2426 !important; border-left-color: #5B6062 !important; color: #d4d6d7 !important; box-shadow: 0 2px 12px rgba(68, 73, 75, 0.06) !important; } [data-theme="dark"] p.License, [data-theme="dark"] div.License { background-color: #222414 !important; border-left-color: #E7FF00 !important; color: #d4d6d7 !important; box-shadow: 0 2px 12px rgba(231, 255, 0, 0.06) !important; } /* Images with borders */ [data-theme="dark"] img.Border, [data-theme="dark"] img.Thumbnail { border-color: #44494B !important; } /* Image lightbox popup in dark mode */ [data-theme="dark"] div[class*=MCPopupContainer] { background-color: #1E2426 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4) !important; } /* Footer */ [data-theme="dark"] div#masterFooter { background-color: #111415 !important; border-top-color: #2B2F31 !important; } [data-theme="dark"] div#masterFooter > p { color: #969696 !important; } /* Back to top button */ [data-theme="dark"] span#backToTop { background-color: #111415 !important; border-color: #E7FF00 !important; } /* Right-hand page-level TOC — retain highlighter yellow accent on selected */ [data-theme="dark"] #mc-main-content ul.menu { border-left-color: #44494B !important; } [data-theme="dark"] #mc-main-content ul.menu > li:first-child::before { background-color: #44494B !important; } [data-theme="dark"] #mc-main-content ul.menu > li:first-child.selected-first::before { background-color: #E7FF00 !important; } [data-theme="dark"] #mc-main-content ul.menu > li:first-child.hover-first::before { background-color: #E7FF00 !important; } [data-theme="dark"] #mc-main-content ul.menu li li { border-left-color: #44494B !important; } [data-theme="dark"] #mc-main-content ul.menu li li:hover { border-left-color: #E7FF00 !important; } [data-theme="dark"] #mc-main-content ul.menu li li.selected-li, [data-theme="dark"] #mc-main-content ul.menu li li.selected, [data-theme="dark"] #mc-main-content ul.menu li li[class*="selected"] { border-left-color: #E7FF00 !important; } [data-theme="dark"] #mc-main-content ul.menu li > a { color: #b8babb !important; } [data-theme="dark"] #mc-main-content ul.menu li > a:hover { color: #ffffff !important; background-color: #232729 !important; } [data-theme="dark"] #mc-main-content ul.menu li > a.selected { color: #ffffff !important; background-color: #232729 !important; } /* Search bar */ [data-theme="dark"] div.nav-search-wrapper { background-color: #111415 !important; } [data-theme="dark"] .search-bar .search-field { background-color: #1E2426 !important; color: #d4d6d7 !important; border-color: #44494B !important; } /* Search results */ [data-theme="dark"] #resultList h3.title > a, [data-theme="dark"] #resultList h3.title > a:visited { color: #b8babb !important; } [data-theme="dark"] #resultList h3.title > a:hover { color: #ffffff !important; } /* Remove highlighting button */ [data-theme="dark"] div#remHighlight { background-color: #1E2426 !important; border-color: rgba(255, 255, 255, 0.3) !important; } [data-theme="dark"] div#remHiText { color: #d4d6d7 !important; } /* MCDropDown / 3di styled dropdowns — must beat .dropDownHead.dropDownHead3di from Topic.css. NOTE: Do NOT include MadCap| namespace selectors in these groups. Browsers treat undeclared namespace selectors as invalid, which discards the entire rule block. */ [data-theme="dark"] .dropDownHead.dropDownHead3di, [data-theme="dark"] span.dropDownHead.dropDownHead3di, [data-theme="dark"] .MCDropDownHead.dropDownHead3di { background-color: #232729 !important; border-left-color: #E7FF00 !important; color: #b8babb !important; } [data-theme="dark"] .dropDownHead.dropDownHead3di:hover, [data-theme="dark"] span.dropDownHead.dropDownHead3di:hover, [data-theme="dark"] .MCDropDownHead.dropDownHead3di:hover { background-color: #2B2F31 !important; border-left-color: #E7FF00 !important; } [data-theme="dark"] .dropDownHead.dropDownHead3di a, [data-theme="dark"] .dropDownHead.dropDownHead3di a.MCDropDownHotSpot, [data-theme="dark"] .MCDropDownHead.dropDownHead3di a, [data-theme="dark"] a.MCDropDownHotSpot_indent { color: #b8babb !important; text-decoration: none !important; } [data-theme="dark"] .dropDownHead.dropDownHead3di a:hover, [data-theme="dark"] .dropDownHead.dropDownHead3di a.MCDropDownHotSpot:hover, [data-theme="dark"] .MCDropDownHead.dropDownHead3di a:hover, [data-theme="dark"] a.MCDropDownHotSpot_indent:hover { color: #d4d6d7 !important; } /* MCDropDown expand/collapse icon — dim for dark backgrounds */ [data-theme="dark"] .MCDropDown_Image_Icon, [data-theme="dark"] .MCDropDownHotSpot .MCDropDown_Image_Icon { opacity: 0.5 !important; } [data-theme="dark"] .MCDropDownHotSpot:hover .MCDropDown_Image_Icon { opacity: 0.7 !important; } /* Generic MadCap dropdowns (non-3di) */ [data-theme="dark"] .MCDropDownHead, [data-theme="dark"] .dropDownHead { color: #d4d6d7 !important; } [data-theme="dark"] .MCDropDownHotSpot, [data-theme="dark"] a.MCDropDownHotSpot, [data-theme="dark"] a.dropDownHotspot, [data-theme="dark"] [class*=dropDownHotspot] { color: #d4d6d7 !important; } [data-theme="dark"] .MCDropDownHotSpot:hover, [data-theme="dark"] a.MCDropDownHotSpot:hover, [data-theme="dark"] a.dropDownHotspot:hover, [data-theme="dark"] [class*=dropDownHotspot]:hover { color: #ffffff !important; } /* MCToggler — fix hover turning text black/unreadable */ [data-theme="dark"] .MCTogglerHotSpot, [data-theme="dark"] a.MCToggler_Closed.MCTogglerHotSpot, [data-theme="dark"] a.MCToggler_Open.MCTogglerHotSpot, [data-theme="dark"] .MCToggler { color: #8cc4ff !important; } [data-theme="dark"] .MCToggler:hover, [data-theme="dark"] a.MCToggler:hover, [data-theme="dark"] .MCTogglerHotSpot:hover, [data-theme="dark"] a.MCToggler_Closed.MCTogglerHotSpot:hover, [data-theme="dark"] a.MCToggler_Open.MCTogglerHotSpot:hover { color: #b8daff !important; text-decoration-color: #b8daff !important; } /* Custom dropdowns (version/language switcher) — button text matches breadcrumbs muted gray for consistency */ [data-theme="dark"] .custom-dropdown-button { background-color: transparent !important; border-color: transparent !important; color: #969696 !important; } [data-theme="dark"] .custom-dropdown-button:hover { background-color: transparent !important; border-color: transparent !important; color: #d4d6d7 !important; } [data-theme="dark"] .custom-dropdown-icon { border-color: #969696 !important; } [data-theme="dark"] .custom-dropdown-button:hover .custom-dropdown-icon { border-color: #d4d6d7 !important; } [data-theme="dark"] .custom-dropdown-menu { background-color: #1E2426 !important; border: 1px solid #2B2F31 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .custom-dropdown-option { color: #b8babb !important; border-bottom: 1px solid #2B2F31 !important; } [data-theme="dark"] .custom-dropdown-option:last-child { border-bottom: none !important; } [data-theme="dark"] .custom-dropdown-option:hover { background-color: #232729 !important; color: #ffffff !important; } [data-theme="dark"] .custom-dropdown-option.selected { background-color: #232729 !important; color: #ffffff !important; font-weight: 500 !important; border-left: 3px solid #5B6062 !important; } [data-theme="dark"] .custom-dropdown-option.selected:hover { background-color: #2B2F31 !important; } /* Command palette */ [data-theme="dark"] .cmd-palette-trigger { background-color: transparent !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #969696 !important; } [data-theme="dark"] .cmd-palette-trigger:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.5) !important; } [data-theme="dark"] .cmd-palette-trigger__kbd { background-color: #2B2F31 !important; border-color: #44494B !important; color: #969696 !important; } [data-theme="dark"] .cmd-palette-modal { background-color: #1a1d1e !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .cmd-palette-input-row { background-color: #1a1d1e !important; } [data-theme="dark"] .cmd-palette-input { color: #f0f0f0 !important; } [data-theme="dark"] .cmd-palette-input::placeholder { color: #5B6062 !important; } [data-theme="dark"] .cmd-palette-input-row svg { color: #5B6062 !important; } [data-theme="dark"] .cmd-palette-clear { color: #5B6062 !important; } [data-theme="dark"] .cmd-palette-clear:hover { color: #d4d6d7 !important; } [data-theme="dark"] #cmdPaletteResults { background-color: #1a1d1e !important; } [data-theme="dark"] .cmd-result-item { border-bottom-color: #2B2F31 !important; } [data-theme="dark"] .cmd-result-link:hover { background-color: #232729 !important; } [data-theme="dark"] .cmd-result-title { color: #f0f0f0 !important; } [data-theme="dark"] .cmd-result-desc { color: #969696 !important; } [data-theme="dark"] .cmd-result-meta-key { color: #969696 !important; } [data-theme="dark"] .cmd-result-meta-value { color: #737778 !important; } /* Filter pills in dark mode */ [data-theme="dark"] .cmd-palette-filters { background-color: #1a1d1e !important; border-top-color: #2B2F31 !important; border-bottom-color: #2B2F31 !important; } [data-theme="dark"] .cmd-palette-filter { color: #969696 !important; border-color: #44494B !important; background: transparent !important; } [data-theme="dark"] .cmd-palette-filter:hover { color: #d4d6d7 !important; border-color: #5B6062 !important; background: #232729 !important; } [data-theme="dark"] .cmd-palette-filter.is-active { background: #2B2F31 !important; border-color: #5B6062 !important; color: #f0f0f0 !important; font-weight: 600 !important; } [data-theme="dark"] .cmd-palette-footer { background-color: #141718 !important; border-top-color: #2B2F31 !important; color: #5B6062 !important; } [data-theme="dark"] .cmd-palette-footer kbd { background-color: #1E2426 !important; border-color: #44494B !important; color: #969696 !important; } [data-theme="dark"] .cmd-view-all { color: #5B6062 !important; } [data-theme="dark"] .cmd-view-all:hover { color: #d4d6d7 !important; } [data-theme="dark"] .cmd-palette-status { color: #5B6062 !important; } /* Heading anchors tooltip */ [data-theme="dark"] .ha-copied-tooltip { background-color: #E7FF00 !important; color: #192124 !important; } [data-theme="dark"] .ha-copied-tail { border-top-color: #E7FF00 !important; } /* Heading anchor icon (::after pseudo) */ [data-theme="dark"] h2.methodLinkActive::after, [data-theme="dark"] h3.methodLinkActive::after, [data-theme="dark"] h4.methodLinkActive::after, [data-theme="dark"] h5.methodLinkActive::after, [data-theme="dark"] .heading2.methodLinkActive::after, [data-theme="dark"] .heading3.methodLinkActive::after, [data-theme="dark"] .heading4.methodLinkActive::after, [data-theme="dark"] .heading5.methodLinkActive::after { filter: invert(1); } /* Glossary terms popup */ [data-theme="dark"] span[class*=MCTextPopupBody] { background-color: #1E2426 !important; border-color: #4EA5FF !important; color: #d4d6d7 !important; } /* Help content panel */ [data-theme="dark"] div#helpContent { background-color: #1a1d1e !important; border-color: #2B2F31 !important; } /* Side content / TOC panel */ [data-theme="dark"] div#sideContent { border-left-color: #2B2F31 !important; } [data-theme="dark"] div#sideContent div#cbRight { background-color: #1a1d1e !important; } /* Search highlight */ [data-theme="dark"] span.SearchHighlight1 { background-color: #E7FF00 !important; color: #000000 !important; } /* Sidenav body-container */ [data-theme="dark"] .body-container { background-color: #1a1d1e !important; } /* Toggle button in dark mode — subtle style matching header */ [data-theme="dark"] .dark-mode-toggle { color: #d4d6d7 !important; border-color: rgba(255, 255, 255, 0.3) !important; } [data-theme="dark"] .dark-mode-toggle:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.5) !important; } [data-theme="dark"] .dark-mode-toggle--mobile { color: #d4d6d7 !important; border-color: transparent !important; } [data-theme="dark"] .dark-mode-toggle--mobile:hover { color: #ffffff !important; background: transparent !important; } /* On Search.htm, command palette trigger is hidden — move toggle to far right */ html.searchTopic .dark-mode-toggle:not(.dark-mode-toggle--mobile) { right: 0 !important; } /* Remove Highlight button — shift left so it doesn't overlap the dark mode toggle */ div#remHighlight { right: 240px !important; } /* DataTables overrides for dark mode */ [data-theme="dark"] .dataTables_wrapper { color: #d4d6d7 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select { background-color: #1E2426 !important; border-color: #44494B !important; color: #d4d6d7 !important; } /* MiniTOC links */ [data-theme="dark"] p.MiniTOC1, [data-theme="dark"] p.MiniTOC2, [data-theme="dark"] p.MiniTOC3, [data-theme="dark"] p.MiniTOC4 { color: #8cc4ff !important; } [data-theme="dark"] p.MiniTOC1 a, [data-theme="dark"] p.MiniTOC2 a, [data-theme="dark"] p.MiniTOC3 a, [data-theme="dark"] p.MiniTOC4 a { color: #8cc4ff !important; } /* nostyle tables in dark mode — keep transparent/dark backgrounds */ [data-theme="dark"] table.nostyle th.nostyle, [data-theme="dark"] table.nostyle td.nostyle { background-color: transparent !important; border: none !important; color: #d4d6d7 !important; } [data-theme="dark"] table.nostyle tbody tr:nth-child(even) td.nostyle, [data-theme="dark"] table.nostyle tbody tr:hover td.nostyle { background-color: transparent !important; } /* Scrollbar styling for dark mode */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1d1e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #44494B; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5B6062; } /* Mobile/tablet header — already dark with white hamburger lines in both modes, so no hamburger overrides needed. Just ensure the title-bar background stays dark (matches desktop nav). */ @media only screen and (max-width: 1079px) { [data-theme="dark"] nav.title-bar { background-color: #111415 !important; } [data-theme="dark"] .title-bar-layout { background-color: #111415 !important; } } /* Mobile/tablet off-canvas TOC panel */ [data-theme="dark"] .off-canvas { background-color: #141718 !important; } [data-theme="dark"] .off-canvas.position-left, [data-theme="dark"] .off-canvas.position-right { background-color: #141718 !important; } [data-theme="dark"] ul.off-canvas-list li a, [data-theme="dark"] .off-canvas ul li a { color: #b8babb !important; } [data-theme="dark"] ul.off-canvas-list li a:hover, [data-theme="dark"] .off-canvas ul li a:hover { background-color: #232729 !important; color: #ffffff !important; } [data-theme="dark"] ul.off-canvas-list li a.selected, [data-theme="dark"] .off-canvas ul li a.selected { background-color: #232729 !important; color: #ffffff !important; } /* New and Updated TOC entry badges */ [data-theme="dark"] a.new-toc-item::after, [data-theme="dark"] a.updated-toc-item::after { background-color: #2B2F31 !important; color: #969696 !important; } /* Welcome boxes (getting-started page) */ [data-theme="dark"] div.welcomeBox { background: #232729 !important; border-left-color: #44494B !important; border-top-color: #44494B !important; border-right-color: #44494B !important; border-bottom-color: #44494B !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] div.welcomeBox:hover { background: #1E2426 !important; border-left-color: #E7FF00 !important; border-top-color: #2B2F31 !important; border-right-color: #2B2F31 !important; border-bottom-color: #2B2F31 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(231, 255, 0, 0.1) !important; } [data-theme="dark"] .welcome-box-title { color: #d4d6d7 !important; } [data-theme="dark"] div.welcomeBox:hover .welcome-box-title { color: #E7FF00 !important; } [data-theme="dark"] .welcome-description { color: #969696 !important; } [data-theme="dark"] div.welcomeBox:hover .welcome-description { color: #d4d6d7 !important; } /* Pagination links */ [data-theme="dark"] #pagination a { color: #b8babb !important; } [data-theme="dark"] #pagination a:hover { color: #ffffff !important; } /* Flare skin-generated backgrounds — exclude .outer-row as it also applies to the header's .title-bar-layout.outer-row wrapper */ [data-theme="dark"] .off-canvas-wrapper, [data-theme="dark"] .off-canvas-wrapper-inner, [data-theme="dark"] .inner-wrap, [data-theme="dark"] .sidenav-layout, [data-theme="dark"] [data-mc-content-body] { background-color: #1a1d1e !important; } [data-theme="dark"] .main-section .outer-row { background-color: #1a1d1e !important; } /* Flare search field override */ [data-theme="dark"] .search-bar .search-field { background-color: #1E2426 !important; color: #d4d6d7 !important; box-shadow: 0 0 0 3px #44494B !important; } [data-theme="dark"] .search-bar .search-field::placeholder { color: #5B6062 !important; } [data-theme="dark"] .search-bar .search-field:focus { box-shadow: 0 0 0 3px #E7FF00 !important; } /* Flare search submit button */ [data-theme="dark"] .search-bar .search-submit { background-color: #1E2426 !important; border-color: #44494B !important; } /* Off-canvas menu (mobile) */ [data-theme="dark"] .off-canvas-menu-inner { background-color: #141718 !important; } /* Feedback widget — CSS custom properties that inherit through Shadow DOM. Variable names align with the widget team's PR. */ [data-theme="dark"] tenable-docs-feedback { /* Text and headings */ --tenable-text-color: #d4d6d7; --tenable-heading-color: #e8e8e8; /* Popover container */ --tenable-docs-feedback-background: #1E2426; --tenable-docs-feedback-border-color: rgba(255, 255, 255, 0.15); --tenable-docs-feedback-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15); --tenable-border-radius: 4px; --tenable-docs-feedback-font-size: 16px; --tenable-docs-feedback-popover-font-size: 14px; --tenable-docs-feedback-font-weight: 400; /* Icon colors */ --tenable-docs-feedback-icon-color: #b8babb; --tenable-docs-feedback-icon-yes-color: #5fd068; --tenable-docs-feedback-icon-no-color: #ff6b6b; /* Form inputs */ --tenable-input-background: #1E2426; --tenable-input-color: #d4d6d7; --tenable-input-border: 1px solid #44494B; --tenable-input-focus-border-color: #4EA5FF; --tenable-input-focus-box-shadow: 0 0 0 .15rem rgba(78, 165, 255, 0.2); --tenable-input-placeholder-color: #5B6062; --tenable-input-autofill-background: #232729; --tenable-input-accent-color: #4EA5FF; /* Textarea */ --tenable-textarea-border: 1px solid #44494B; --tenable-textarea-focus-border-color: #4EA5FF; --tenable-textarea-focus-box-shadow: 0 0 0 .15rem rgba(78, 165, 255, 0.2); --tenable-textarea-box-shadow: none; /* Buttons */ --tenable-btn-primary-background-color: #4EA5FF; --tenable-btn-primary-border-color: #4EA5FF; --tenable-btn-primary-color: #fff; --tenable-btn-primary-hover-background-color: #3b8de0; --tenable-btn-primary-hover-border-color: #3b8de0; --tenable-btn-primary-hover-color: #fff; --tenable-btn-secondary-background-color: #2B2F31; --tenable-btn-secondary-border-color: #44494B; --tenable-btn-secondary-color: #d4d6d7; --tenable-btn-secondary-hover-background-color: #44494B; --tenable-btn-secondary-hover-border-color: #5B6062; --tenable-btn-secondary-hover-color: #ffffff; /* Tooltip */ --tenable-tooltip-background: #2B2F31; --tenable-tooltip-color: #d4d6d7; /* Links */ --tenable-link-color: #8cc4ff; /* Labels */ --tenable-label-color: #b8babb; --tenable-label-floating-color: #969696; } /* Print — never use dark mode */ @media print { [data-theme="dark"] body { background-color: #ffffff !important; color: #5B6062 !important; } .dark-mode-toggle { display: none !important; } } /* Transition for smooth theme switching (applied after first load) */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; }