:root {
    --background: #fff;
    --primary-color: #D9d9d9;
    --text-color: #272727;
    --footer-color: #fff;
    --footer-border: #D9d9d9;
    --nav-hover: #c0c0c0;
    --topbar-color: #e9e9e9;
    --topbar-hover: #c0c0c0;
    --topaksi-hover: #c0c0c0;
    --topaksi-color: #e7e7e7;
    --table-bg: #f2f2f2;
    --table-bottom: #e1e1e1;
    --td-bg: #efefef;
    --td-bg-odd: rgb(255 255 255 / 100%);
    --search-bg: #fff;
    --next-bg: #e1e1e1;
    --card-header: #f8f8f8;
    --card-body: #fff;
    --wrapperx: #f5f5f5;
    --head-form: #fff;
    --input-bg: #fff;
    --input-text: #272727;
    --border: #e1e1e1;
    --divider: transparent;
    --top-tabulasi: #d9d9d9;
    --content: #fbfbfb;
    --label-pengkinian: #F8F9FA;
    --body-collapse: #ffffff;
    --btn-side-hover: #9090906f;
    --sidebar-bg: transparent;
}

[data-theme="dark"] {
    --background: #282828;
    --primary-color: #282828;
    --text-color: #fff;
    --footer-color: #404040;
    --footer-border: #515151;
    --nav-hover: #585858;
    --topbar-color: #404040;
    --topbar-hover: #585858;
    /*--topbar-hover: #8b1b1b;*/
    --topaksi-hover: #515151;
    --topaksi-color: #404040;
    --table-bg: #404040;
    --table-bottom: #606060;
    --td-bg: #404040;
    --td-bg-odd: #393939;
    --search-bg: #383838;
    --next-bg: #404040;
    --card-header: #404040;
    --card-body: #404040;
    --wrapperx: #404040;
    --head-form: #404040;
    --input-bg: #404040;
    --input-text: #cfcfcf;
    --border: #606060;
    --divider: #282828;
    --top-tabulasi: #606060;
    --label-pengkinian: #C3C3C3;
    --isi-pengkinian: #eaeaea;
    --content: #282828;
    --body-collapse: #4a4a4a;
    --buuton-disable: #a5a4a4;
    --btn-side-hover: #a5a4a4;
    --sidebar-bg: #d9d9d9;
}