index.css

:root {
    --cb-background-color: #1e1e1e;
    --cb-text-color: #c5c6c7;
    --cb-code-container-bg: #2d2d2d;
    --cb-code-header-bg: #3c3c3c;
    --cb-code-title-color: #ffffff;
    --cb-copy-btn-color: #ffffff;
    --cb-pre-bg: #1e1e1e;
    --cb-pre-color: #dcdcdc;
    --cb-copy-confirmation-color: #ffffff;
    --cb-code-container-bg-alt: #fff;
    --cb-code-header-bg-alt: #f7f7f7;
    --cb-code-title-color-alt: #333;
    --cb-copy-btn-color-alt: #007bff;
    --cb-pre-bg-alt: #f9f9f9;
    --cb-pre-color-alt: #333
}

.cb-light-mode {
    --cb-background-color: #f4f4f9;
    --cb-text-color: #ffffff;
    --cb-code-container-bg: var(--cb-code-container-bg-alt);
    --cb-code-header-bg: var(--cb-code-header-bg-alt);
    --cb-code-title-color: var(--cb-code-title-color-alt);
    --cb-copy-btn-color: var(--cb-copy-btn-color-alt);
    --cb-pre-bg: var(--cb-pre-bg-alt);
    --cb-pre-color: var(--cb-pre-color-alt);
    --cb-code-container-bg-alt: #2d2d2d;
    --cb-code-header-bg-alt: #3c3c3c;
    --cb-code-title-color-alt: #ffffff;
    --cb-copy-btn-color-alt: #ffffff;
    --cb-pre-bg-alt: #1e1e1e;
    --cb-pre-color-alt: #dcdcdc
}

.cb-code-container {
    margin-bottom: 20px;
    border: 1px solid #333;
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--cb-code-container-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5)
}

.cb-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background-color: var(--cb-code-header-bg);
    border-bottom: 1px solid #333
}

.cb-code-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--cb-code-title-color)
}

.cb-copy-btn, .cb-copy-confirmation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 30px;
    background: 0 0;
    border: none;
    cursor: pointer;
    color: var(--cb-copy-btn-color);
    font-size: 14px
}

.cb-copy-confirmation {
    display: none
}

.cb-copy-btn svg {
    fill: currentColor;
    width: 16px;
    height: 16px;
    margin-right: 5px
}

pre {
    margin: 0;
    padding: 10px;
    background-color: var(--cb-pre-bg);
    overflow-x: auto;
    color: var(--cb-pre-color)
}

code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px
}

.cb-toggle-btn {
    margin-bottom: 20px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: var(--cb-code-header-bg);
    color: var(--cb-text-color);
    border: none;
    border-radius: 5px
}