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


    --bg-sidebar-color: #0f0f0f;
    --side-text-color: #cecece;
    --side-icon-color: #cecece;
    --bg_header: #0f0f0f;
    --text_header: #cecece;
    --bg_nav: #0f0f0f;
    --text_nav: #cecece;
    --bg_konten: #0f0f0f;
    --bg_card: #0f0f0f;
    --bg_footer: #0f0f0f;
    --text_footer: #cecece;
    --bg_menu_utama: #272727;
    --text_menu_utama: #cecece;
    --bg_icon_menu_utama: #696969;
    --bg_icon_menu_utama_sorot: #939393;
    --icon_menu_utama_sorot: #fff;
    --icon_menu_utama: #ffffff;
    --search_nav: #696969;
    --icon_search_nav: #fff;
    --sorot_icon_search_nav: #939393;
    --side_text_color_aktif: #fff;
    --bg_side_sorot: #373737;
    --border-modal: #e9ecef4f;
    --close: #D3d3d3;


    --detail-border: transparent;
    --detail-bg: #D82E2E;
    --detail-font: #fff;
    --detail-border-hover: #D82E2E;
    --detail-bg-hover: transparent;
    --detail-font-hover: #D82E2E;

    --top-head: #0f0f0f;
}

:root {
    --grey-d1: #585858;
    --grey-d2: #F4F4F4;
    --grey-d3: #000000;
    --red-1: #F2B8D1;
    --red-2: #F04B92;
    --red-3: #EB1E77;
    --red-4: #AD1257;
    --white: #FFFFFF;
    --blue: #329EF4;
    --grey: #eeeeee;
}