:root {
    color-scheme: light;
    --background-color: #f2f2f2;
    --text-color: #333;
    --text-sub-color: #434343;
    --input-border-color: #ccc;
    --input-background-color: #fff;
    --input-text-color: #000;
    --button-background-color: #4caf50;
    --button-text-color: #fff;
    --button-hover-background-color: #45a049;
    --url-color: #2f6932;
}

[data-theme="dark"] {
    color-scheme: dark;
    --background-color: #161515;
    --text-color: #f2f2f2;
    --text-sub-color: #b0b0b0;
    --input-border-color: #555;
    --input-background-color: #444;
    --input-text-color: #fff;
    --button-background-color: #4caf50;
    --button-text-color: #fff;
    --button-hover-background-color: #45a049;
    --url-color: #4caf50;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;
        --background-color: #161515;
        --text-color: #f2f2f2;
        --text-sub-color: #b0b0b0;
        --input-border-color: #555;
        --input-background-color: #444;
        --input-text-color: #fff;
        --url-color: #4caf50;
    }
}