Можно ли переключить Dark Mode, эмулировав изменение цветовой схемы prefers? - PullRequest
Новая
       11

Можно ли переключить Dark Mode, эмулировав изменение цветовой схемы prefers?

0 голосов
/ 03 марта 2020

В настоящее время я создаю веб-сайт на Wordpress и медленно изучаю основы кода. У меня есть темный режим, который я сам кодировал, и он чудесно работает, но я хочу переключение - и преобладающий метод, о котором говорилось по всему inte rnet, похоже, не работает с моим существующим кодом. Я хочу знать, есть ли способ, которым я могу использовать свой существующий код и добавить переключатель для включения и выключения темного режима. Вот что у меня есть: 

    @media (prefers-color-scheme: dark) {
    .elementor-background-overlay {
        background-color: black !important; /*#011627 color of normal overlays*/
        opacity: 0.6;
    } /*overlay settings for images*/
    .elementor-108 .elementor-element.elementor-element-45fa046a {
        background-color: #101010 !important;
    } /*web footer settings*/
    .elementor-posts .elementor-post__card {
        background-color: #202020 !important;
    } /*background color for cards on blog page*/
    .elementor-posts .elementor-post__excerpt p, .elementor-counter .elementor-counter-number-wrapper {
        color: #aaaaaa !important;
    } /*text color for Elementor elements: cards on blog page, counter on error page*/
    .main-header-bar {
        background-color: black;
    } /*background for solid-color headers*/
    .main-header-menu a {
        color: white !important;
    } /*color of header links or a's*/
    @media (max-width:921px) {
        .ast-header-break-point, .main-header-menu {
            background-color: black !important;
        }
    } /*background color of menu items on devices with a mobile/dropdown menu*/
    .site-logo-img {
   filter: invert(100%) !important;
    } /*inverts site logo to white*/
    body {
    background-color: black !important;
    color: #eeeeee;
    } /*sets background and text color across the site*/
    a:hover {
        color: #ffffff;
    } /*sets color when hovering on links*/
    .ast-separate-container .ast-article-single, .ast-article-post, .ast-archive-description {
        background-color: black !important;
    } /*sets background color on std WP pages, like terms or cookie policy, and search pages*/
    .entry-title a {
        color: #5bc0de;
    } /*color of links on search page*/
    .entry-title a:hover {
        color: white;
    } /*hover color of links on search page*/
    textarea,input, input[type="email"], input[type="number"], input[type="password"], input[type="reset"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="reset"]:focus, input[type="search"]:focus, textarea:focus {
        background-color: #101010;
        color: #eeeeee;
    } /*sets color of submission boxes (comments, contact, signup, etc)*/
    h1, h2, h3, h4, h5, h6, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
        color: white;
    } /*sets color of headings*/
    } /*END OF DARK MODE SETTINGS*/
    @media (prefers-color-scheme: light) {} /*Light mode keeps the set website design*/
...