見出し画像

noteがダークモード実装してくれないからユーザーCSS書いた

noteさんダークモード実装待ってます。

CSSコード

body,article,header,footer,nav,section,h1,h2,h3,h4,h5,h6,th,td,li,dt,dd,input,textarea,rt,
figure em,
.pswp__bg,
.bg-background-primary,
.bg-surface-normal,
.t-newCreator{
    background-color: #1f1f1f !important;
    color: #bfbfbf !important;
}

.bg-background-primary,
.o-magazineFooter,
.o-shareBooster,
.o-shareBooster:before {
    background-color: #1f1f1f !important;
    opacity: 0.9 !important;
}

div,p,
.o-commentArea h2,
.o-commentArea__item a,
.o-commentArea__item .o-like__count,
.o-siblingNote__labelSubText,
.m-navbarPostings__itemLabel,
.o-userMenu__description,
.o-noteLikeV3__count,
.o-noteContentHeader__date,
.o-articleList__statusLabel,
.external-article-widget-update{
    color: #efefef !important;
}

.p-article__body h2 {
    border-bottom: 1px solid #bfbfbf !important;
}

.p-article__body strong {
    background: linear-gradient(transparent 70%, #238f76 90%);
}
.external-article-widget strong {
    background: none !important;
}

a {
    color: #a8c7fa !important;
}
a:hover {
    color: #8a95de !important;
    text-decoration: underline !important;
}
a:visited {
    color: #c58af9 !important;
}

a:hover,
button:hover {
    opacity: 0.8 !important;
}

.m-modalHeader {
    font-weight: bold !important;
    border-bottom: 1px solid #777 !important;
    padding-bottom: 0.5rem !important;
}

.o-sectionHeadline a:hover,
.m-categoryMenu__container a:hover{
    text-decoration: none !important;
}

svg path {
    fill: #fff !important;
}

.a-icon:before{
    color: #fff !important;
}

input[type="search"],
.a-textarea{
    background-color: #1f1f1f !important;
    border: 1px solid #bfbfbf !important;
}

.m-navbarSearchHistory__clearButton {
    color: #bfbfbf !important;
}

#searchSuggestion,
#searchSuggestion a,
.m-balloon__body,
.m-balloon__body:before,
.a-balloon__body,
.a-balloon__body:before,
.m-basicBalloonList__item,
.note-embed,
.m-postCounts__inner,
.m-navbarPostings__item,
.o-userMenu,
.m-menuGroup,
.m-menuGroup li,
.o-navbarNotif__content li,
.modal-content,
.m-basicModalContent,
.modal-content li,
.m-basicModalContent li,
.m-warningMessage,
.m-trendMessage,
#table-of-contents,
.o-magazineShare__body,
.o-navbarSearchForm--open {
    background-color: #333 !important;
}

.o-likerModal__userList .m-userListItem {
    background-color: #333 !important;
    color: #bfbfbf !important;
}
.o-likerModal__userList .m-userListItem:hover {
    background-color: #444 !important;
    color: #bfbfbf !important;
}

.o-magazineShare__body h1 {
    margin-bottom: 20px;
}

.m-menuGroup li,
.o-navbarNotif__content li,
.o-tableOfContents__list li button {
    color: #bfbfbf !important;
}

.m-tabNav button {
    color: #bfbfbf !important;
}
.m-tabNav button.active,
.m-tabMenu__menu .m-tabMenu__item.is--active {
    border-color: #fff !important;
}

.m-tabMenu__menu .m-tabMenu__item a {
    color: #999 !important;
    text-decoration: none !important;
}
.m-tabMenu__menu .m-tabMenu__item.is--active a {
    color: #bfbfbf !important;
}

.o-articleList__item:hover,
#searchSuggestion a:hover {
    background-color: #666 !important;
}

.a-select__field,
.m-basicBalloonList__item button {
    color: #bfbfbf !important;
}
.a-select--width_fit,
.a-select__field,
.m-basicBalloonList__item button:hover {
    background-color: #444 !important;
}

.p-article__extraItemSection {
    border-color: #bfbfbf !important;
}

label.a-file {
    color: #bfbfbf !important;
    background-color: #333 !important;
    border: 1px solid #777 !important;
}
blockquote,
#sideCreatorProfile,
.a-button,
.membership-button,
.o-tableOfContents {
    background-color: #333 !important;
    border: 1px solid #777 !important;
}

.m-odaiCard {
    background-color: #333 !important;
    border: 1px solid #777 !important;
}

.o-tableOfContents li {
    background-color: #333 !important;
    border-bottom: 1px solid #777 !important;
}
.o-tableOfContents li:last-child {
    border: none !important;
}

.support-button-group .a-button {
    border: none !important;
}

.o-supportAppealBox {
    border: 1px solid #777 !important;
}
.bg-background-secondary,
.o-supportAppealBox,
.o-supportAppealBox h2 {
    background-color: #1f1f1f !important;
    color: #bfbfbf !important;
}

.o-supportAppealBox h2 {
    border: none !important;
}

#tagListBody .a-tag {
    background-color: #333 !important;
    color: #bfbfbf !important;
    border: 1px solid #777 !important;
}

.o-noteLikeV3__iconContainer{
    background-color: inherit !important;
}

.m-largeNoteWrapper__card {
    background-color: #1f1f1f !important;
    color: #bfbfbf !important;
}

.o-magazineItemWithNotes__body,
.o-magazineItemWithNotes__body:before,
.o-magazineItemWithNotes__body:after{
    background-color: #1f1f1f !important;
    border-color: #bfbfbf !important;
}


.modal-content-wrapper header,
.modal-content-wrapper h1,
.modal-content-wrapper footer,
.o-magazineList,
.o-magazineList li,
.o-magazineList__header,
.m-magazineCover__status,
.a-icon--navnext,
.a-icon--navbefore,
.o-categorySection__itemContents a:hover:before{
    background-color: #333 !important;
}

.o-magazineListItem a:hover {
    background-color: #666 !important;
}

.o-magazineCard__cover .o-magazineCard__magazineName {
    background-color: inherit !important;
    color: #fff !important;
}

.text-text-secondary,
.m-categoryList__title{
    color: #bfbfbf !important;
}

.m-categoryMenu__container a,
.m-categoryMenu__container a:visited {
    color: #bfbfbf !important;
}

.m-categoryMenu__container a:hover{
    background-color: #555 !important;
}
.m-categoryMenu__container a[aria-current="page"]{
    background-color: #555 !important;
}

.t-timeline-new__nav {
    scrollbar-color: #555 #333 !important;
    scrollbar-width: thin !important;
}

.o-categorySection__itemContent,
.o-smallThemeCard__count{
    color: #bfbfbf !important;
}

.o-categorySection__itemContent:hover {
    text-decoration: none !important;
}
.o-categorySection__itemContent:hover .o-smallThemeCard__title {
    color: #bfbfbf !important;
    background-color: #333 !important;
}

button[aria-haspopup="true"] span[data-name="reaction-overlay"] {
    border: 1px solid #bfbfbf !important;
    border-radius: 6px !important;
}

div[data-name="Popover"] ul {
    border: 1px solid #bfbfbf !important;
    border-radius: 6px !important;
}

.m-userDescCard {
    background-color: #1f1f1f !important;
    border: 1px solid #bfbfbf !important;
}

.o-searchResultUser__item .m-userListItem:hover {
    background-color: #333 !important;
}

.t-timeline-new__nav:after {
    display: none !important;
}

/* my page */
main.t-settings,
main.t-settings .t-settings__main,
.t-settings__aside .o-sidebarTips,
.t-settings__aside .o-noteTips__books{
    background-color: #1f1f1f !important;
}

main.t-settings .o-statsContent__overviewItem,
.o-onboardingNotice {
    background-color: #333 !important;
    border-radius: 6px !important;
}

main.t-settings .m-buttonGroup__item .btn {
    background-color: #333 !important;
    color: #bfbfbf !important;
}
main.t-settings .m-buttonGroup__item .btn.is-active {
    background-color: #238f76 !important;
}

.p-badges .p-badges__listItem{
    background-color: #1f1f1f !important;
}
.p-badges .p-badges__listItem:hover,
.o-badgeDetail__collectionItem{
    background-color: #333 !important;
}
.p-badges .p-badges__listSupplement {
    color: #bfbfbf !important;
}
.p-userVerification__form {
    background-color: #333 !important;
}
.m-salesThisMonth__summary h3{
    background-color: #238f76 !important;
}

/* editor */

.desGyO,
.jBeLTg,
.cxQTUS{
    color: #bfbfbf !important;
}

.sc-5d6015b-0 {
    border-bottom: 1px solid #bfbfbf !important;
}

.sc-c64e3389-2{
    border-left: 1px solid #bfbfbf !important;
}

.leBnMn,
.cUwXNk,
.ffmfZR{
    background-color: #1f1f1f !important;
    border: 1px solid #bfbfbf !important;
}

.sc-ddcb4ce1-2 {
    border: 1px solid #bfbfbf !important;
}

.sc-8dc22c24-6,
.sc-ddcb4ce1-4 {
    background-color: #1f1f1f !important;
}

.cxQTUS {
    border-bottom: 2px solid #1f1f1f !important;
}

.cxQTUS[data-active="true"] {
    border-bottom: 2px solid #bfbfbf !important;
}

.desGyO[data-current="true"] {
    background-color: #333 !important;
}

.kOqZLB,
.sc-136c6acc-2{
    border: 1px solid #bfbfbf !important;
}

.sc-55ff0407-1,
.sc-55ff0407-2,
.sc-1e0b2197-8,
.sc-1e0b2197-3,
.sc-1e0b2197-4{
    background-color: #333 !important;
    color: #bfbfbf !important;
}

スタイル指定先

ドメイン上のURL:note.com
次で始まるURL:https://note

備考

  • 筆者はGoogle Chromeを利用していて、ユーザーCSSはStylusという拡張機能を使用しています

  • 全ページ総ざらいしたわけではないし、全ての要素を網羅できたわけではなく、ざっくり見える部分をダークモード化しただけなので、部分的に漏れがあると思います。漏れを見つけ方はお手数ですがコメントかXのリプで知らせてもらえれば追加します

  • Stylusの使い方は下記記事を参照


いいなと思ったら応援しよう!