:root {
    --color-context-menu-border: #ccc;
    --color-delete-btn-hover: #fff0f0;

    --color-person-image: rgba(242, 23, 86, 0.1);
    --color-basic-text: #222;
    --color-basic-text09: rgba(34, 34, 34, 0.9);
    --color-basic-text06: rgba(34, 34, 34, 0.6);
    --color-basic-grey: #757575;
    --color-basic-text02: rgba(34, 34, 34, 0.2);
    --color-basic-shadow: rgba(0, 0, 0, 0.1);
    --color-basic-body: #fff;
    --color-google-button: white;
    --color-google-button-text: rgb(0, 0, 0, .54);
    --color-modal: rgba(0, 0, 0, 0.3);
    --color-sidebar: #f5f5f5;

    --color-facebook-button: #1877F2;

    --color-box-border: #F34A7A;
    --color-basic-red: #F21756;
    --color-basic-red02: rgba(242, 23, 86, 0.2);
    --color-modal-border: #e0e0e0;
    --color-box: #fff5f7;
    --color-sing-in-form: rgba(242, 23, 86, 0.2);

    --color-error-text: #d32f2f;

    --color-transcript: #fad0da
}

[data-theme="dark"] {
    --color-context-menu-border: #ddd;
    --color-delete-btn-hover: #ffebee;

    --color-person-image: white;
    --color-basic-text: white;
    --color-basic-text09: rgb(255, 255, 255, .9);
    --color-basic-text06: rgba(255, 255, 255, .6);
    --color-basic-grey: #818181;
    --color-basic-text02: rgba(255, 255, 255, .2);
    --color-basic-shadow: rgba(0,0,0,0.1);
    --color-basic-body: black;
    --color-google-button: white;
    --color-google-button-text: rgb(0, 0, 0, .54);
    --color-modal: rgba(0, 0, 0, 0.5);
    --color-sidebar: #1C121A;

    --color-facebook-button: #1877F2;

    --color-box-border: #F34A7A;
    --color-basic-red: #F21756;
    --color-basic-red02: rgba(242, 23, 86, .2);
    --color-modal-border: #4a1a21;
    --color-box: #360917;
    --color-sing-in-form: #360917;

    --color-error-text: #ff5252;

    --color-transcript: var(--color-sidebar)
}