roobie/dist/themes/dark.css

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

[theme="dark"] {
    /*Base*/
    --primary: var(--blue2);
    --secondary: var(--bg4);
    /*Status*/
    --success: rgba(81, 190, 73, 0.7);
    --warning: rgba(235, 119, 42, .7);
    --danger: rgba(248, 62, 52, .7);
    --info: rgba(152, 217, 243, .7);
    /*Shade 1*/
    --white: rgb(240, 240, 240);
    --black: rgb(20, 20, 20);
    --grey: rgb(199, 199, 199);
    --red: rgb(182, 26, 26);
    --orange: rgb(243, 162, 11);
    --yellow: rgb(221, 221, 25);
    --green: rgb(19, 172, 82);
    --blue: rgb(83, 143, 255);
    --indigo: rgb(117, 13, 117);
    --violet: rgb(184, 88, 184);
    /* Shade 2*/
    --white2: rgba(240, 240, 240, .7);
    --black2: rgba(20, 20, 20, .7);
    --grey2: rgba(199, 199, 199, .7);
    --red2: rgb(182, 26, 26, .7);
    --orange2: rgba(243, 162, 11, .7);
    --yellow2: rgba(221, 221, 25, .7);
    --green2: rgba(19, 172, 82, .7);
    --blue2: rgba(39, 39, 219, .7);
    --indigo2: rgba(117, 13, 117, .7);
    --violet2: rgba(184, 88, 184, .7);
    /* Shade 3*/
    --white3: rgba(240, 240, 240, .5);
    --black3: rgba(20, 20, 20, .5);
    --grey3: rgba(199, 199, 199, .5);
    --red3: rgba(182, 26, 26, .5);
    --orange3: rgba(243, 162, 11, .5);
    --yellow3: rgba(221, 221, 25, .5);
    --green3: rgba(19, 172, 82, .5);
    --blue3: rgba(39, 39, 219, .5);
    --indigo3: rgba(117, 13, 117, .5);
    --violet3: rgba(184, 88, 184, .5);
    /*Text*/
    --t1: rgb(240, 240, 240);
    --t2: rgb(225, 225, 225);
    --t3: rgb(210, 210, 210);
    --t4: rgb(195, 195, 195);
    --t5: rgb(180, 180, 180);
    --t6: rgb(165, 165, 165);
    /*Background*/
    --bg1: rgb(20, 20, 20);
    --bg2: rgb(35, 35, 35);
    --bg3: rgb(50, 50, 50);
    --bg4: rgb(65, 65, 65);
    --bg5: rgb(80, 80, 80);
    --bg6: rgb(95, 95, 95);
    /*Heading*/
    --h1: var(--t1);
    --h2: var(--t1);
    --h3: var(--t2);
    --h4: var(--t2);
    --h5: var(--t5);
    --h6: var(--t5);
    /*Link*/
    --a1: var(--blue);
    --a2: white;
    --a3: white;
    --a4: white;
    --a5: white;
    --a6: white;
    /*Paragraph*/
    --p1: var(--t2);
    --p2: var(--t2);
    --p3: var(--t2);
    --p4: var(--t2);
    --p5: var(--t2);
    --p6: var(--t2);
    /*Border*/
    --bdr1: .5px solid var(--bg5);
    --bdr2: 1px solid var(--bg5);
    --bdr3: 2px solid var(--bg5);
    --bdr4: 3px solid var(--bg5);
    --bdr5: 5px solid var(--bg5);
    --bdr6: 7px solid var(--bg5);
    /*Inset*/
    --in1: inset 0px 0px 1px 1px rgb(235, 235, 235, .1);
    --in2: inset 0px 0px 2px 2px rgb(235, 235, 235, .2);
    --in3: inset 0px 0px 3px 3px rgb(235, 235, 235, .2);
    --in4: inset 0px 0px 3px 3px rgb(235, 235, 235, .3);
    --in5: inset 0px 0px 3px 3px rgb(235, 235, 235, .3);
    --in6: inset 0px 0px 3px 3px rgb(235, 235, 235, .3);
    /*Box Shadow*/
    --box1: 0 0 1px 1px rgb(235, 235, 235, .1);
    --box2: 0 0 2px 2px rgb(235, 235, 235, .2);
    --box3: 0 0 3px 3px rgb(235, 235, 235, .2);
    --box4: 0 0 3px 3px rgb(235, 235, 235, .3);
    --box5: 0 0 4px 4px rgb(235, 235, 235, .3);
    --box6: 0 0 5px 5px rgb(235, 235, 235, .3);
    /*Text Shadow*/
    --txts1: 1px 1px rgb(235, 235, 235, .1);
    --txts2: 2px 2px rgb(235, 235, 235, .2);
    --txts3: 3px 3px rgb(235, 235, 235, .2);
    --txts4: 3px 3px rgb(235, 235, 235, .3);
    --txts5: 4px 4px rgb(235, 235, 235, .3);
    --txts6: 5px 5px rgb(235, 235, 235, .3);
}