
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の使い方は下記記事を参照