趣味でつながる、仲間ができる、大人世代のSNS、趣味人倶楽部(しゅみーとくらぶ)

よくあるご質問

Stylusでダークモード

拡張機能Stylusを使って趣味人倶楽部を ダークモードで使ってみました。
まだまだ、手直しが必要ですが・・・・

@-moz-document domain("smcb.jp") {
/* 外枠を黒く */
body {
background-color: #000;
color: #fff;
}
html{background-color:#222222;color:#fff}
/* header */
.header,.header__bottom,.header__bottom-inner,.header__top-left{background-color:#222222;color:#fff}
.header__top-left-howto a, .header__top-left-config a { color: #c0c0c0; }

/* contents */
a{background-color:#222222;color:#fff}

/* ookuno */
.sidebar__mymenu ul li a {background-color: #000; color: #fff;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{background-color: #222222; color: #ccffcc;}
.sidebar__mymenu ul li a::after{background-color: #000; color: #fff;}
.sidebar__mymenu { background-color: #c0c0c0;}

/* Profile */
.mypage__profile.label-green{background-color:#222222; color: #fff;}
.label-green{border-top: 2px solid #fff !important;}

/* my Aleart */
.label-red .title-left-border::before,.mypage-alert__unread a:visited { border-color: #ffffcc;}
.mypage-alert__unread a:visited{ color: #ffffcc!important;}
.mypage-alert__unread a span { font-weight: bold;color: #ffffcc; transition: all 0.3s;}
.header-title-2column p a.arrow-red::before { background: #ffffcc;}
.label-red { border-top: 2px solid #ffffcc;}
.mypage-alert__list li form button { color: #ffffcc; }
/* buttom color */
.mypage__profile .mypage__button-edit-profile a { color: #003366; background-color: #ccffcc; }
.title-color-border::after {border-bottom: 3px solid #ffffcc;}
.title-left-border-2::before { border-left: 6px solid #fff;}
.header-title-2column p a.arrow-green::before { background: #ccffcc;}
.arrow-circle.green::before { background: #ccffcc;}
.alert-unread { color: #003366; background-color: #ffffcc;}
.header-title-2column p a.arrow-green { color: #c0c0c0; }
.sidebar__photo-list-row-cell p a { color: #c0c0c0; }
.sidebar__photo-list .link-to-list a { color: #c0c0c0;}
.list-event__list-content-label { background-color: #222222;}
.list-access__list-aday-date { background-color: #222222; }
.list-search__header { background: #222222; color: #ffffff;}
.community-customer__search-community-word .search-word-button button, .community-customer__search-event-word .search-word-button button, .community-customer__search-user-word .search-word-button button { color: #fff; background-color: #ffffcc;}

/* buttom-diary */
.detail-article { background: #222; border-left: 1px solid #222; border-right: 1px solid #222; }
.detail-article__info-inner-count {background-color: #222; }
.sns_button_wrapper {background-color: #222; }
.detail-article__info-inner-count dd span::after {background-color: #222; }
.pager-block .pager-block__button-list .pager-block__button-prev a, .pager-block .pager-block__button-list .pager-block__button-next a { color: #ccc; background-color: #333;}
.unclap-button,.detail-article__button-comment a,.detail-minimail__content {background-color: #333;}

/* mini-mail */
.sidebar__write-minimail {background-color:#333;}
.sidebar__write-minimail a,a.detail-minimail__button-reply {background-color:#ccc; color:#222;}
.sidebar__nav ul li a,.sidebar__community-category li a {color:#ccc;}
.detail-minimail .detail-minimail__header {background-color:#222;}


/* after-word */
.contents-three-column__main a:visited,.contents-two-column__left a:visited { color: #99ccff;}

/* Photo */
.header .sub-header {background-color: #222}
.header__bottom-inner-nav li a:hover, .header__bottom-inner-nav li a.is-current {background-color:#ccc; border-right:#ccc;}

4000文字では足りません。www

コメント

へいすけさん

2020年06月28日 17:59

さくらこさん、こんにちは。

結構、頑張りました。あはは
他のページに移動すると、まだ白いところがあったり、文字が見えなかったりと、大変です。
やっぱり、運営がダークモードを出してくれることに期待しています。^^;

さくらこさん

2020年06月28日 17:22

すごく見やすくなりましたね パチパチパチパチ👏

へいすけさん

2020年06月28日 17:14

続きです。

/* community */
.list-comment#comments {background-color: #222;}
.list-comment__post-button-comment .no-arrow,.list-comment__post-button-comment .no-arrow,.community-each__button-apply button {background-color:#ccc; color:#222;}
.sidebar__local ul li a, .sidebar__local ul li a:focus{background-color:#222; color:#ccc;}
.sidebar__photo-list-three-column .sidebar__photo-list-row-cell .user-nickname a {color: #ccc}
.footer,.footer__bottom { background-color: #000; }

.footer__inner-list li a,.sidebar__administrator ul li a,.sidebar__diary-category li a,.list-community__list-header-meta .information .comment span a {color:#ccc}
.community-customer__search-community-word-tag li a, .community-customer__search-event-word-tag li a, .community-customer__search-user-word-tag li a,.sidebar__link-button ,.show-more__button a {color:#222; background-color:#ccc}
.list-common-photo__list-label-approval {color:#ffffcc; border:#ffffcc;}
.common-table th,.common-table td{background-color:#222}
.community-details .community-details-readmore,.community-each__button-apply {background-color:#222}
}