Skip to content

Togetter Dark by mmahhi

Screenshot of Togetter Dark
Homepage Write a review Install Get Stylus

Details

Authormmahhi

LicenseMIT

Categorytogetter.com

Created

Updated

Size24 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

概要

Togetter (https://togetter.com/) をダークモードに対応させるユーザーCSSです。

サポート

ユーザーCSSのインストール方法については、こちらのページをご覧ください。
→「ユーザーCSSのインストール方法について」

Firefoxにて動作確認をしております。不具合がありましたらご連絡ください。可能な限り対応します。
ご意見、感想、不具合報告などは、こちらのページからどうぞ。
→「ユーザーCSSに関するお問い合わせフォーム」

Stylusでデバイスのテーマに合わせて、適用するユーザーCSSを切り替える方法は、こちらのページで解説しています。
→「Stylusで自動的にダークモードを制御する」

更新履歴

Ver.1.0.0 (2024/04/26)

  • 公開

Ver.1.1.0 (2024/05/10)

  • min.t（ミント）に対応しました。
  • まとめ作成の新エディターに対応しました。

Ver.1.1.1 (2024/08/03)

  • min.t（ミント）の対応を強化しました。
  • ダークモードが適応されない箇所を修正しました。

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Togetter Dark
@namespace      togetter-dark
@version        1.1.1
@description    Togetter (https://togetter.com/) をダークモードに対応させます。
@author         mmahhi <mmahhi@s203.xrea.com> (http://mmahhi.s203.xrea.com/)
@homepageURL    http://mmahhi.s203.xrea.com/userstyle/togetter-dark/
@supportURL     http://mmahhi.s203.xrea.com/userstyle/contact/
@license        MIT
==/UserStyle== */

@-moz-document url-prefix("https://togetter.com"), url-prefix("https://min.togetter.com") {
    /* Togetter Dark Ver.1.1.1 (2024/08/03) */
    body {
        --bg0: #0d0d0d;
        --bg1: #121212;
        --bg15: #181818;
        --bg2: #202020;
        --bg3: #282828;
        --bg4: #303030;
        --color0: #f1f1f1;
        --color1: #c9d1d9;
        --color2: #aaa;
        --color3: #666;
        --colorA: #1eacc1;
        --border0: rgba(255, 255, 255, 0.1);
        --border1: #444;
        --border2: #666;
        --link-color: #99ccff;
        --link-color-v: #3399ff;
        --link-color-h: #55aaff;
    }
    :root {
        color-scheme: dark;
    }
    body {
        background-color: var(--bg1);
        color: var(--color1);
    }
    html {
        background-color: var(--bg1);
    }
    a, a:link, a:visited {
        color: var(--link-color);
    }
    #header {
        background-color: var(--bg1);
    }
    .header_navigator {
        background-color: var(--bg1);
        border-color: var(--border1);
    }
    .header_navigator .inner > ul.header_link > li a {
        color: var(--color1);
    }
    .desc_input, .desc_input:focus, .desc_input:not(:placeholder-shown) {
        background-color: var(--bg1);
        border-color: var(--border1);
        color: var(--color1);
    }
    #subheader > li .menu-btn {
        color: var(--color1);
    }
    .dropdown {
        background-color: var(--bg1);
        border-color: var(--border0);
    }
    .dropdown.menu a {
        color: var(--color1);
    }
    .dropdown.menu .divider {
        background-color: var(--border0);
        border-color: var(--bg1);
    }
    .caret_menu_btn {
        color: var(--color1);
    }

    div:not(.kiji_body) > .type_markdown .md-h-1 {
        border-color: var(--border1);
    }
    /* 記事タイトル */
    .info_box h1 a.info_title {
        color: var(--color1);
    }
    .info_status_box .info_status li .icon_comment span, .info_status_box .info_status li .icon_view span, .css-17evwry {
        color: var(--color2);
    }
    .info_box .info_thumb img {
        border-color: var(--border1);
    }
    .title_head_box h1 a {
        color: var(--color0);
    }
    /* アイコン */
    .info_status_box .favorite_box .icon_image img {
        background-color: var(--bg1);
        border-color: var(--bg1);
    }
    .css-1d246me {
        color: var(--color2);
    }

    /* トップページ */
    .simple_list li {
        border-color: var(--border1);
    }
    .simple_list li.has_thumb .thumb img {
        border-color: var(--border1);
    }
    .simple_list li a h3 {
        color: var(--color1);
    }
    .simple_list li a:visited h3 {
        color: var(--color2);
    }
    .simple_list li .content .view_str {
        color: var(--color2);
    }
    .simple_list li .content .view_str span {
        color: var(--color1);
    }
    .count_facebook {
        color: var(--color2);
    }
    .title_simple_box h3 a {
        color: var(--color1);
    }
    .review_matome_box {
        border-color: var(--border1);
    }
    .simple_list li .topic {
        background-color: #1b2f39;
        color: #acd4e8;
    }
    .simple_list li .desc {
        color: var(--color2);
    }
    .simple_list li .content .date_label {
        color: var(--color2);
    }

    /* 目次 */
    div:not(.kiji_body) > .type_markdown .show_headings {
        background-color: var(--bg2);
    }
    div:not(.kiji_body) > .type_markdown .show_headings ul li a {
        color: var(--color2);
    }
    div:not(.kiji_body) > .type_markdown .show_headings ul li {
        border-color: var(--border1);
    }
    div:not(.kiji_body) > .type_markdown .md-h-2 {
        border-color: var(--border1);
    }
    .info_box .description_box {
        color: var(--color2);
    }
    .impl_profile_big .user_link {
        color: var(--color1);
    }
    .list_box.type_url.type_profile p {
        color: var(--color2);
    }
    .impl_profile_big .user_link span {
        color: var(--color2);
    }
    .impl_profile .user_link, .impl_profile .user_link span {
        color: var(--color2);
    }
    .info_status_box .favorite_box .favorite {
        background-color: var(--bg1);
        border-color: var(--border1);
    }
    .info_status_box .favorite_box .favorite .svg-icon {
        color: var(--color2);
    }
    a.lite_share, span.lite_share {
        color: var(--color0);
    }
    .css-1bottj1 {
        background-color: var(--bg1);
    }
    .css-1bottj1:hover {
        background-color: var(--bg2);
    }
    .css-1qrusdx, .css-1d4xps1 {
        color: var(--color2);
    }
    a.css-15rw3ma {
        color: var(--color2);
    }
    [src*="placeholder.gif"] {
        visibility: hidden;
    }
    .lazy.lazy-hidden:not(.loaded), img[src*="placeholder.gif"], img[src="https://s.tgstc.com/static/web/p.gif"], img.loading {
        visibility: hidden;
    }
    
    /* 目次ポップアップ */
    .show_headings_modal_box li a {
        color: var(--color1);
    }
    .show_headings_modal_box li {
        border-color: var(--border1);
    }

    .status .link {
        color: var(--color2);
    }
    .status .link.intent, .impl_profile > span:first-child .twitter_logo {
        color: var(--color3);
    }
    .c01 {
        color: #fd3b3b;
    }
    .c03 {
        color: #7373ff;
    }
    .c07 {
        color: #ff7979;
    }
    .c08 {
        color: #db42db;
    }
    .c09 {
        color: #babaff;
    }
    .c10 {
        color: #2ea8a8;
    }
    .c12 {
        color: #b5b52a;
    }
    .c14 {
        color: #aaa;
    }
    .c15 {
        color: #bbb;
    }
    .c16 {
        color: #ddd;
    }
    .c19 {
        color: #ff0298;
    }
    .quoted_tweet_box {
        border-color: var(--border1);
    }
    /* URL */
    .list_box.type_url {
        border-color: var(--border1);
    }
    .list_box .title a {
        color: var(--color1);
    }
    .list_box.type_url .counts_box .view_str span {
        color: var(--color1);
    }
    .list_box.type_url .content .label {
        background-color: var(--bg2);
    }
    .count_twitter {
        color: var(--color1);
    }
    /* ページネーション */
    .pagenation a {
        color: var(--color2);
        border-color: var(--border1);
    }
    .pagenation a:hover {
        background-color: var(--bg3);
    }
    .pagenation a.current {
        background-color: var(--bg2);
        border-color: var(--bg2);
    }

    .title_simple_box h3 {
        color: var(--color1);
    }
    .simple_line_box li a {
        color: var(--color1);
    }
    .css-1ehayua a h3, .css-19t9nf6 a h3 {
        color: var(--color1);
    }
    .css-1ehayua a:visited h3, .css-19t9nf6 a:visited h3 {
        color: var(--color2);
    }
    .css-isjun6 span {
        color: var(--color1);
    }
    .css-1tz1lqn .e6o1uz80 .ewwybq20 {
        border-color: var(--border1);
    }
    img[src*="noimage200.png"] {
        filter: invert(1) brightness(1.5);
        border-color: #ddd !important;
    }
    img[src*="noicon.png"] {
        filter: brightness(0.6);
    }

    /* コメント */
    .css-5emgry, .css-19x6ngq {
        background-color: var(--bg2);
    }
    .css-vv65v3 {
        border-color: var(--border1);
    }
    .css-1mi2drd {
        color: var(--color2);
    }
    .css-5obanl {
        color: rgb(253, 59, 59);
    }
    .css-94kfhd {
        background-color: rgb(38, 36, 13);
    }
    .css-9o5ejj {
        background-color: var(--bg2);
    }
    .css-cs12yk {
        background-color: var(--border1);
    }
    .css-myh76c {
        background-color: var(--bg2);
        border-color: var(--border1);
    }
    .css-myh76c:focus {
        background-color: var(--bg1);
    }
    .css-vbfhpz {
        background-color: var(--bg2);
    }
    .css-4yedmj:not(:placeholder-shown) {
        background-color: var(--bg2);
        border-color: var(--border1);
        color: var(--color1);
    }
    .css-8fhhx0 {
        background-color: var(--bg1);
    }
    .css-pys3kp, .css-d5bbvk > * + * {
        border-color: var(--border1);
    }
    .css-1m33i20 {
        color: var(--color1);
    }
    .css-1m33i20:hover {
        background-color: var(--bg2);
    }
    .css-wngxh3 {
        background-color: rgb(45, 70, 67);
    }
    a.css-1317rze, .css-1317rze {
        color: rgb(204, 204, 204);
    }
    .css-pturtv {
        background-color: var(--bg2);
    }
    .css-e299y6 {
        background-color: var(--bg2);
    }
    .css-1frwcv2 {
        background-color: var(--bg2);
    }

    /* サイドカラム */
    .side_box {
        background-color: var(--bg1);
        border-color: var(--border1);
    }
    .expandable.scrollable.side_line_box .main_box {
        border-color: var(--border1);
    }
    .side_line_box li {
        border-color: var(--border1);
    }
    .side_box .side_tab_box .btn {
        border-bottom-color: var(--border1);
    }
    .side_box .side_tab_box .btn.selected {
        background-color: var(--bg1);
        border-bottom-color: var(--bg1);
    }
    .side_line_box li > a {
        color: var(--color1);
    }
    .side_line_box li > a:hover {
        background-color: #222;
    }
    .list_box.type_tweet + .list_box.type_tweet {
        border-top-color: var(--border1);
    }
...

Reviews

No reviews yet.