Twikoo深色模式不会自动适配的解决方法

2025年5月12日未分类

问题起因

最近在对网站深色适配的时候,遇到了twikoo评论不会自动根据dark进行适配。查了半天文档,无奈使用CSS强行覆盖的方式来适配。

解决方法

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .twikoo {
        --twikoo-text-color: #e5e7eb;
        --twikoo-bg-color: #1a1a1a;
        --twikoo-border-color: #ffffff5b;
        --twikoo-card-bg: #222;
    }

    .tk-admin {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .tk-comment,
    .tk-expand,
    .tk-comments-count,
    .tk-comments-no,
    .tk-submit {
        color: var(--twikoo-text-color);
    }

    .twikoo .el-input__inner,
    .twikoo .el-textarea__inner {
        color: var(--twikoo-text-color);
        border-color: var(--twikoo-border-color);
    }

    .tk-tag {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .tk-preview-container {
        border-color: var(--twikoo-border-color);
    }
}


本页内容

暂无导航