/* ============================================================ DARK MODE — Selector Overrides ============================================================ Requires: variables.css (sets --config-* tokens) Requires: .dark-mode-enabled class on / #customcss ============================================================ */ /* ---- Light mode baseline (force white backgrounds) ---- */ #customcss:not(.dark-mode-enabled) #root { .widget-container--quick_links, .widget-container--featured_topics, .widget-container--generic_hero, [data-css-anchor="widget-breadcrumb"], .thread-list-title, .widget-container--category_hero, .widget-container--product-updates_hero { background-color: #fff; } .widget-container--generic_hero .generic_hero { background-color: #fff !important; } } /* ---- Dark mode: background overrides (night) ---- */ #customcss.dark-mode-enabled { .quicklinks-wrapper, .widget--leaderboard_points, .box, .tabs--navigation .tabs__item > a, ul.tabs--navigation, .twig_default-settings-email .sections__nav .tabs--navigation .tabs__item > a, .twig_default-settings-email .sections__nav ul.tabs--navigation, .twig_default-settings-general .sections__nav .tabs--navigation .tabs__item > a, .twig_default-settings-general .sections__nav ul.tabs--navigation, .generic_hero, .stats-bar, .topic-curation-destination__container, .ask-question-widget__widget, .thread-list-title, .event-header-container, .event-details-container, .event-content-container, .event-attendees-container, .event-featured-topics-container, .event-featured-topics-error-container, .event__content table, .editor__input, .topic-create_suggestions-wrapper input, input, .selectize-input, .selectize-control.single .selectize-input.input-active, .poll-wrapper, .post__content table { background-color: var(--config--main-color-night) !important; } /* ---- Text colors ---- */ .leaderboard-container .tabs__btn--active, .leaderboard-container .leaderboard-username .username, .leaderboard-username span, .sections__nav > .tabs--nav__container .tabs--nav .tabs--navigation > .tabs__item > a.is-active, .sections__nav > .tabs--nav__container .tabs--nav .tabs--navigation > li > a.is-active, .sections__nav > .tabs--nav__container .tabs--nav ul > .tabs__item > a.is-active, .sections__nav > .tabs--nav__container .tabs--nav ul > li > a.is-active, .sections__nav > .tabs--navigation > .tabs__item > a.is-active, .sections__nav > .tabs--navigation > li > a.is-active, .sections__nav > ul > .tabs__item > a.is-active, .sections__nav > ul > li > a.is-active, .topic-wrapper .topic-view-content-wrapper .post__content, .threaded-reply-body-wrapper .post__content, .categories-navigation-link, .box, .tabs--navigation .tabs__item > a, ul.tabs--navigation, .twig_default-settings-email .sections__nav .tabs--navigation .tabs__item > a, .twig_default-settings-email .sections__nav ul.tabs--navigation, .twig_default-settings-general .sections__nav .tabs--navigation .tabs__item > a, .twig_default-settings-general .sections__nav ul.tabs--navigation, li button, .ask-question-widget__title, .event-header-container, .event-details-container, .event-content-container, .event-attendees-container, .event-featured-topics-container, .event-featured-topics-error-container, .event-detail-container .event__title, .dropdown-selector-wrapper--destination button div, .notification-center__panel, .notification-center .notification-center__empty .notification-center__empty__text, .selectize-input, .selectize-control.single .selectize-input.input-active, .selectize-dropdown, input[type=text], input[type=search], input[type=email], input[type=number], input[type=password], textarea, select, select[multiple], .poll-wrapper .drag-handle, .input-wrapper .input-icon-wrapper, .topic-helpfulness-text, .topic-helpfulness__voted, .search-revamp .instant-search-wrapper .ai-answers-summary .answer-wrapper .ai-answer, .search-revamp .instant-search-wrapper .ai-answers-summary .answer-wrapper .answer-sidebar .resources-section .resource-card, .search-revamp .instant-search-wrapper .ai-answers-summary .answer-wrapper .answer-sidebar .resources-section > div .resource-card, .btn-show-all-resources, .search-revamp .instant-search-wrapper .search-result-content--text, .search-revamp .instant-search-wrapper .instant-search__topic-type-filter .instant-search__filter-list-item label, .search-revamp .instant-search-wrapper .instant-search__category-filter .instant-search__filter-list-item label, .search-revamp .instant-search-wrapper .instant-search__results-wrapper-filter .instant-search__results-wrapper-filters, .search-revamp .instant-search-wrapper .ai-answers-summary .ai-answers-generate .ai-answers-description, .dropdown, .link--text, .suggested-public-tag, .wysiwyg-editor .wysiwyg-editor__textarea .ql-editor, .post__content table td, .thread-list-block, .featured-topic__product-area, .thread-list-block__content *, .popup-component { color: var(--config-meta-text-color); } .btn--secondary:hover { background-color: var(--config--main-color-night); } .editor-type .svg-icon svg, .popup-component svg path { fill: var(--config-meta-text-color); } .editor-type .radio-box-button.is-active svg { fill: var(--config--main-color-brand); } /* ---- Title / heading colors ---- */ .brand-hero-title, .brand-hero-subtitle, .thread-list-view-description, .search-revamp .instant-search-wrapper .ai-answers-summary .answer-wrapper .answer-sidebar .resources-section .resource-card, .search-revamp .instant-search-wrapper .ai-answers-summary .answer-wrapper .answer-sidebar .resources-section > div .resource-card h4 a, .search-revamp .instant-search-wrapper .instant-search__results-wrapper-filter-header, .search-revamp .instant-search-wrapper .instant-search__results-wrapper-filter .instant-search__filter-title, .ai-answers-empty-state-message, .Sidebarmodule .widget .username { color: var(--config-card-title-color) !important; } .categories-navigation-link--content-level.categories-navigation-link--current, .stats-bar .list strong, .search-revamp .instant-search-wrapper .instant-search__topic-type-filter .instant-search__filter-list-item .instant-search-filter__label-wrapper.refined, .search-revamp .instant-search-wrapper .instant-search__category-filter .instant-search__filter-list-item .instant-search-filter__label-wrapper.refined, .link--text:hover { color: var(--config--main-color-brand); } .Sidebarmodule .widget .username:hover { color: var(--config--main-color-brand) !important; } .sort-option-trigger.dropdown-links { color: var(--config-header-color); } /* ---- Buttons ---- */ .btn--toggle { color: var(--config-button-cta-color); background-color: var(--config-button-cta-background-color); border-radius: var(--config-button-cta-border-radius); box-shadow: inset 0 0 0 var(--config-button-cta-border-width) var(--config-button-cta-border-color), var(--config-button-cta-box-shadow, transparent 0 0); } .btn--cta { color: var(--config-button-cta-color); background-color: var(--config-button-cta-background-color) !important; border-radius: var(--config-button-cta-border-radius); box-shadow: inset 0 0 0 var(--config-button-cta-border-width) var(--config-button-cta-border-color), var(--config-button-cta-box-shadow, transparent 0 0); } .btn-secondary { background-color: var(--config--main-color-night-light); color: var(--config--main-button-base-font-color); } .btn--show-more { color: var(--config-button-cta-background-color); background-color: transparent !important; box-shadow: none; } /* ---- Cards / containers ---- */ .react-modal-container .react-modal, .social-sharing .tooltip-container .tooltip-message .arrow:after, .social-sharing .tooltip-container .tooltip-message, .box__content .box.editor, .editor__collapsed:hover, .dropdown-selector, .notification-center__panel, .selectize-dropdown, .category-list__container, .threaded-reply-body-wrapper, .notification-center .notification-center__item, .content-helpfulness-sidebar, .search-revamp .instant-search-wrapper .ai-answers-summary, .search-revamp .instant-search-wrapper .ai-answers-summary .answer-wrapper .answer-sidebar .resources-section .resource-card, .search-revamp .instant-search-wrapper .ai-answers-summary .answer-wrapper .answer-sidebar .resources-section > div .resource-card, .btn-show-all-resources, .instant-search__filter-tab-button, .dropdown, .post__content table td, .topic-curation-destination__container, .list-widget-wrapper, .popup-component, .popup-component ul.tabs--navigation, .popup-component table, .popup-component table td { background-color: var(--config-card-background-color) !important; } .category-topic-list, &[data-entity="HomePage"], &.custom-page_chromeos-cameyo-customer-community, &.custom-page_chrome-enterprise-community { .list-widget-wrapper { background-color: transparent !important; } } .dropdown-selector__item--middle-level--category-selection:hover, .dropdown-selector__item--first-level--category-selection:hover { color: var(--config--main-color-brand); } .box.editor { overflow: hidden; } .event__content table thead th { background-color: var(--config-button-secondary-active-background-color); } .reply-flexbox--bestanswer { background-color: #222e24; border-radius: 16px; } /* ---- Social sharing buttons ---- */ button.qa-button-twitter { filter: invert(1); } button.qa-button-linkedin { filter: brightness(1.2); } button.event-calendar-link svg { fill: white; } /* ---- CKEditor dialog ---- */ .cke_dialog_ui_button_cancel { background: var(--config-button-cta-background-color); border-color: var(--config-button-cta-border-color); color: var(--config-button-cta-color); box-shadow: var(--config-button-cta-box-shadow, transparent 0 0); } .cke_dialog_ui_button_ok { color: var(--config-button-secondary-color); background: var(--config-button-secondary-background-color); border-color: var(--config-button-secondary-border-color); } } /* ---- Client-specific overrides (Google) ---- */ #customcss.dark-mode-enabled .custom-page_home article.featured-topic.quicklink__box.card-widget-wrapper.quicklink-icon:first-child:hover, #customcss.dark-mode-enabled .custom-page_home article.featured-topic.quicklink__box.card-widget-wrapper.quicklink-icon:nth-child(2):hover { background-color: #3ea6ff40; } #customcss.dark-mode-enabled .google-homepage .custom-html-widget-wrapper { background-color: var(--config-card-background-color); } #customcss.dark-mode-enabled .custom-page_chromeos .widget-container.widget-container--html_widget.widget-container--index-6 { background-color: var(--config-card-background-color) !important; } #customcss.dark-mode-enabled .custom-page_cafe article.featured-topic.quicklink__box.card-widget-wrapper.quicklink-icon { background-color: var(--config-card-background-color); } #customcss.dark-mode-enabled .twig_site-index .widget-container--index-6 { background-color: var(--config-card-background-color) !important; } #customcss.dark-mode-enabled .card i.fas { background-color: var(--config-card-background-color); }