[data-theme="blue"] {
    --bg-color: var(--blue-theme-bg);
    --text-color: var(--blue-theme-text);
}

[data-theme="blue"] body {
    background-color: var(--blue-theme-bg);
    color: var(--blue-theme-text);
}

[data-theme="dark"] p,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--blue-theme-text);
}



[data-theme="blue"] .btn-primary {
    color: var(--blue-theme-text);
    border: none;
    background: #5e35e6;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 1px 2px #0000004d, 0 2px 6px 2px #00000026;
    border-radius: 5px;
    padding: 5px 10px;
}

[data-theme="blue"] .btn-primary-rounded {
    color: var(--blue-theme-text);
    border: none;
    background: #5e35e6;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 1px 2px #0000004d, 0 2px 6px 2px #00000026;
    border-radius: 50%;
    padding: 10px 10px;
}

[data-theme="blue"] .btn-primary:hover {
    color: var(--blue-theme-text);
    background: var(--blue-theme-hover);
}

[data-theme="blue"] .btn-primary-rounded:hover {
    color: var(--blue-theme-text);
    background: var(--blue-theme-hover);
}