@media (prefers-color-scheme : dark) {
    :root {
        /* Default dark theme colors */
        --bg-color: #f4f4f4;
        --text-color: #333333;
        --text-color-light: #888888;
        --link-color: #007d8d;
        --link-hover-color: #971c97;

        /* Logo SVG colors */
        --logo-bg-color: #00000000;
        --logo-shadow-color: #000000;
        --logo-top-color: #30E7FF;
        --logo-bottom-color: #FF60FF;

        /* Header colors */
        --header-bg-color: #3A4A5A;
        --header-subhead-bg-color: #6A7A8A;
        --header-text-color: #FFFFFF;
        --header-subhead-text-color: #FFFFFF;
        --header-border-color: #2C2C2C;
        --header-shadow-color: #00000038;

        /* Error colors */
        --error-bg-color: #880000;
        --error-text-color: #FFFFFF;

        /* Sidebar colors */
        --sidebar-bg-color: #3A4A5A;
        --sidebar-text-color: #FFFFFF;
        --sidebar-border-color: #2C2C2C;
        --sidebar-shadow-color-light: #0000003F;
        --sidebar-shadow-color-dark: #00000038;
        --sidebar-button-bg-color: #30E7FF;
        --sidebar-button-text-color: #000000;
        --sidebar-button-border-color: #2C2C2C;
        --sidebar-button-header-bg-color: #FF60FF;
        --sidebar-button-header-text-color: #000000;

        /* Footer colors */
        --footer-bg-color: #3A4A5A;
        --footer-text-color: #FFFFFF;
        --footer-border-color: #2C2C2C;
        --footer-shadow-color: #00000038;

        /* Main content colors */
        --pagecontent-border-color: #2C2C2C;
        --pagecontent-bg-color: #DDDDDD;

        /* Transparent Highlighting */
        --highlight-bg-color: #FF60FF33;
        --highlight-border-color: #FF60FF77;
    }
}

@media (prefers-color-scheme : light) {
    :root {
        /* Default light theme colors */
        --bg-color: #f4f4f4;
        --text-color: #333333;
        --text-color-light: #888888;
        --link-color: #007d8d;
        --link-hover-color: #971c97;

        /* Logo SVG colors */
        --logo-bg-color: #00000000;
        --logo-shadow-color: #000000;
        --logo-top-color: #30E7FF;
        --logo-bottom-color: #FF60FF;

        /* Header colors */
        --header-bg-color: #3A4A5A;
        --header-subhead-bg-color: #6A7A8A;
        --header-text-color: #FFFFFF;
        --header-subhead-text-color: #FFFFFF;
        --header-border-color: #2C2C2C;
        --header-shadow-color: #00000038;

        /* Error colors */
        --error-bg-color: #880000;
        --error-text-color: #FFFFFF;

        /* Sidebar colors */
        --sidebar-bg-color: #3A4A5A;
        --sidebar-text-color: #FFFFFF;
        --sidebar-border-color: #2C2C2C;
        --sidebar-shadow-color-light: #0000003F;
        --sidebar-shadow-color-dark: #00000038;
        --sidebar-button-bg-color: #505050;
        --sidebar-button-text-color: #FFFFFF;
        --sidebar-button-border-color: #2C2C2C;
        --sidebar-button-header-bg-color: #FF60FF;
        --sidebar-button-header-text-color: #000000;

        /* Footer colors */
        --footer-bg-color: #3A4A5A;
        --footer-text-color: #FFFFFF;
        --footer-border-color: #2C2C2C;
        --footer-shadow-color: #00000038;

        /* Main content colors */
        --pagecontent-border-color: #2C2C2C;
        --pagecontent-bg-color: #DDDDDD;

        /* Transparent Highlighting */
        --highlight-bg-color: #FF60FF33;
        --highlight-border-color: #FF60FF77;
    }
}