#root {
    --pageBg: #fff;
    --bodyColor: #333;
    --bodyPrimaryColor: #111;
    --borderColor: #ccc;
    --optionBarBackground: #f3f3f3;
    --icon: #777;
    --iconHover: #333;
    --iconActive: rgb(138 180 248);
    --contextBg: transparent;
    --contextHoverBg: #eee;
    --contextSelectedBg: #cfe8fc;
    --elementTagNameColor: rgb(0, 0, 170);
    --elementIdColor: rgb(255, 0, 0);
    --elementClassesColor: rgb(0, 136, 0);
    --elementInertColor: #333;
    --elementPseudoColor: #e21dd5;
    --tagBg: #ddd;
    --btnBg: #fff;
    --btnColor: #333;
    --btnBorderColor: #ccc;
    --btnHoverBg: #eee;
    --btnHoverColor: #000;
}
 
#root.theme-dark {
    --pageBg: hsl(225, 6%, 13%);
    --bodyColor: #aaa;
    --bodyPrimaryColor: rgb(232, 234, 237);
    --borderColor: #3d3d3d;
    --optionBarBackground: hsl(225, 5%, 17%);
    --icon: #888;
    --iconHover: #bbb;
    --iconActive: rgb(138 180 248);
    --contextBg: transparent;
    --contextHoverBg: rgb(34, 42, 54);
    --contextSelectedBg: rgb(7, 61, 105);
    --elementTagNameColor: rgb(93, 176, 215);
    --elementIdColor: rgb(230, 130, 130);
    --elementClassesColor: rgb(242, 151, 102);
    --elementInertColor: rgb(192, 192, 192);
    --elementPseudoColor: #ed77e5;
    --tagBg: rgb(34, 42, 54);
    --scrollbarCornerBg: #242424;
    --scrollbarThumbBg: #333;
    --scrollbarTrackBg: rgb(36,36,36);
    --btnBg: hsl(225, 6%, 13%);
    --btnColor: #aaa;
    --btnBorderColor: #3d3d3d;
    --btnHoverBg: rgb(34, 42, 54);
    --btnHoverColor: #fff;
}

#root {
    color: var(--bodyColor);
    background-color: var(--pageBg);
    height: 100%;
    overflow: auto;
}

#root.theme-dark::-webkit-scrollbar,
#root.theme-dark *::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

#root.theme-dark::-webkit-scrollbar-corner,
#root.theme-dark *::-webkit-scrollbar-corner {
    background-color: var(--scrollbarCornerBg);
}

#root.theme-dark::-webkit-scrollbar-thumb,
#root.theme-dark *::-webkit-scrollbar-thumb {
    background-color: var(--scrollbarThumbBg);
    box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
}

#root.theme-dark::-webkit-scrollbar-track,
#root.theme-dark *::-webkit-scrollbar-track {
    background-color: var(--scrollbarTrackBg);
    box-shadow: inset 0 0 1px rgb(255 255 255 / 30%);
}

#root.theme-dark input[type="checkbox"] {
    filter: invert(1);
}
