:root {
    --primary-color: #302AE6;
    --secondary-color: #eaeaea;
    --third-color: #fff;
    --font-color: #424242;
    --bg-color: #f9f9f9;
    --heading-color: #424242;
    --nav-color: #d3d3d3;
    --navborder-color: #d3d3d3;
    --reverse-color: #0f0f0f;
    --border-td-color: #dee2e6;
    --active-color: #d2d2d2;
    --border-modal: #dadada;
    --close: #D3d3d3;
    --detail-border: #D82E2E;
    --detail-bg: transparent;
    --detail-font: #D82E2E;
    --detail-border-hover: transparent;
    --detail-bg-hover: #D82E2E;
    --detail-font-hover: #fff;
    --top-head: #F9F9F9;
}

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #0f0f0f;
    --third-color: #282828;
    --font-color: #f1f1f1;
    --bg-color: #0f0f0f;
    --heading-color: #f1f1f1;
    --nav-color: #0f0f0f;
    --navborder-color: rgba(255, 255, 255, 0.208);
    --reverse-color: #f9f9f9;
    --border-td-color: #dee2e6;
    --active-color: #282828;
}