是否可以通过模拟对首选颜色方案的更改来切换暗模式？

Question

我目前正在Wordpress上建立一个网站，并且我正在慢慢学习代码的基础知识。我有一个自己编写的暗模式，它可以很好地工作，但是我想要一个切换-而且在互联网上谈论的主要方法似乎不适用于我现有的代码。我想知道是否可以使用现有代码并添加一个切换开关来打开和关闭暗模式。这是我所拥有的：

    @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*/