radiko.jp - Light and Dark mode by kenrick95

/* ==UserStyle==
@name       radiko.jp - Light and Dark mode
@version    20241105.13.31
@namespace  ?
==/UserStyle== */

@-moz-document domain("radiko.jp") {
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #00a7e9;
        --primary-light: #00a7e9;
        --text-select: #ff853394;
        --text-primary: #fff;
        --text-secondary: #eee;
        --bg-primary: #000;
        --bg-secondary: #0c3039;
        --bg-light-primary: #222;
        --bg-light-secondary: #333;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --primary: #00a7e9;
        --primary-light: #00a7e9;
        --text-select: #ff853394;
        --text-primary: #000;
        --text-secondary: #444;
        --bg-primary: #fff;
        --bg-secondary: #e2f4f9;
        --bg-light-primary: #f3f3f3;
        --bg-light-secondary: #e7e7e7;
    }
}
::selection {
    background: var(--text-select);
    color: var(--text-primary);
}


body, table, .header__utility, .timeshift-detail, .live-detail, .player-area, .page-timeshift .content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
a {
    color: var(--text-secondary);
}
.tab-list .item__link {
    background-color: var(--bg-light-secondary);
}
.content, .top-main-slider__list .img {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

textarea,
.header__menu .item--search input[type="text"] {
    background: var(--bg-light-secondary) !important;
    color: var(--text-primary) !important;
}
.img-list__item {
    background: var(--bg-light-secondary);
}
.img-list__carousel {
    background-color: var(--bg-primary);
}
}