sneakers テーマにダークモードを追加しましたが、、、

Windowsの個人用設定等、システムのダークモードに連動してブログの配色を黒系に変更する機能を追加しました。

テーマをご利用中のブログを確認したところ、背景色等をカスタマイズしている方が、沢山いてダークモードで見た場合、正常に閲覧できないケースが多数確認できましたので、

ダークモード対応を、さっそく停止しました。orz


f:id:tenman:20191107100009p:plain
ダークモード


blog.hatena.ne.jp


テーマストア

ダークモード対応を行いたい場合は、ブログのデザインから、以下のCSSを追加してください。

@media (prefers-color-scheme: dark) {

    a:-webkit-any-link,
    a:any-link,
    a{
        color:rgba(52, 152, 219,1);
        text-decoration:none;
        text-decoration-skip-ink:none;
    }
    a:hover{
        color:#1487bd;
        text-decoration-color:#1487bd;
    }
    .pager a,
    .entry-header-menu a,
    .hatena-module-title a,
    header a:-webkit-any-link,
    header a:any-link,
    a.entry-title-link{
        color:#eeeeee;
        text-decoration:none;
    }
    body{
        background:#222222;
        color:#eeeeee;
    }
    .comment-content,
    .entry-footer .urllist-title-link,
    .theme-subblock .theme-subblock-content,
    .search-form{
        color:#eeeeee;
        background:#222222;
    }
    .hatena-module-category .hatena-urllist li a{
        color:#eeeeee;
    }

    .hatena-urllist.urllist-with-thumbnails .urllist-item-inner:before,
    .enable-top-editarea #top-editarea,
    .scroll-top,
    body > div > div > header > div, 
    .entry-header-menu,
    .entry-content pre,
    .entry-content code {
        background:rgba(52, 152, 219,.1);
    }
    .entry-content pre > code {
        background-color: transparent;
    }
    mark{
        background-color:#ffff8c;
    }
    .scroll-top{
        background-color: #f8f8ff;
        border: 1px solid rgba(52, 152, 219,.5);
    }

    .hatena-module-category .hatena-urllist li,
    .archive-entries .categories a,
    .entry-header .categories a,
    .hatena-module .urllist-category-link,
    .entry-content .entry-see-more,
    .leave-comment-title,
    article.no-entry .entry-content,
    .page-archive .archive-heading,
    .entry-content table th {
        color:#eeeeee;
        background:rgba(52, 152, 219,.1);
        transition: all .3s;
    }

    .hatena-module .urllist-category-link:hover,
    .hatena-module-category .hatena-urllist li:hover,
    .archive-entries .categories a:hover,
    .entry-header .categories a:hover {
        color:#fff;
        background:rgba(52, 152, 219,1);
    }
    .hatena-module-category .hatena-urllist li:hover a{
        background:transparent;
        color:#fff;
    }

    .breadcrumb-inner .breadcrumb-child:last-of-type,
    .page-index .date a,
    .page-entry .date a,
    .archive-entries .date a,
    .comment-metadata a,
    .comment-metadata,
    .hatena-urllist .urllist-date-link a,
    .customized-header .entry-header-html a,
    .customized-header .entry-footer-html a,
    .footer-address a,
    .services a,
    .entry-date a,
    .entry-footer-section a,
    body > footer,
    .entry-footer-section {
        color: #ccc;     
    }

    .enable-top-editarea #top-editarea{
        background:rgba(52, 152, 219,.3);
    }
    .header-image-enable.enable-top-editarea #top-editarea{
        background:#000;
        color:#fff;
    }
    .header-image-enable.enable-top-editarea #top-editarea > * {
        color:#fff;
    }

    .page-entry .entry-header .date{
        background:#555;
        color:#ccc;
    }
    .search-module-input, 
    .hatena-module-search-box .search-module-input{
        background:#ffffff;
        color:#333;
    }
}
TOP