theme.css (4556B)
1 @media (prefers-color-scheme: light) { 2 html { 3 background-color: var(--light-background); 4 color: var(--light-text); 5 font-weight: var(--light-font); 6 } 7 8 h1, h2, h3, h4, h5 { 9 color: var(--light-green); 10 font-weight: var(--light-font); 11 } 12 13 a { 14 color: var(--light-blue); 15 } 16 .link-white { 17 color: var(--light-text); 18 } 19 20 a:hover:not(.wm-avatar):not(.no-hover), a#active { 21 background-color: var(--light-background-hover); 22 color: var(--light-red); 23 } 24 a:hover:not(.wm-avatar):not(.no-hover):not(.no-outline):not(.footnote-ref), 25 a#active:not(.no-outline):not(.footnote-ref) { 26 outline-color: var(--light-background-hover); 27 background-color: var(--light-background-hover); 28 } 29 30 hr { 31 border-top-color: var(--light-text); 32 } 33 34 strong { 35 font-weight: var(--light-font-bold); 36 } 37 38 time { 39 color: var(--light-red); 40 } 41 42 blockquote { 43 border-left-color: var(--light-red); 44 } 45 46 :not(pre) > code { 47 background-color: var(--light-background-hover); 48 } 49 50 /* content */ 51 .notes:target, .responses:target { 52 outline-color: var(--light-background-hover); 53 } 54 .notes__title, .responses__title, .content.notes.h-entry, .content.responses.h-entry { 55 background-color: var(--light-background); 56 outline-color: var(--light-text); 57 } 58 59 .view-full-size svg { 60 fill: var(--light-red); 61 } 62 63 .content ol li span:before { 64 color: var(--light-red); 65 } 66 .content ul li span:before { 67 color: var(--light-red); 68 } 69 70 .content table th { 71 background-color: var(--light-background-hover); 72 color: var(--light-text); 73 } 74 .content table td, .content table th { 75 border-color: var(--light-text); 76 } 77 .content table tr:nth-child(even) { 78 background-color: var(--light-background-hover); 79 color: var(--light-text); 80 } 81 82 /* webmention */ 83 .wm-form__button { 84 background-color: var(--light-background); 85 border-color: var(--light-blue); 86 color: var(--light-blue); 87 } 88 .wm-form__button:hover { 89 background-color: var(--light-background-hover); 90 border-color: var(--light-red); 91 color: var(--light-red); 92 } 93 94 /* footer */ 95 .footer .hcard { 96 border: solid 1px var(--light-border); 97 } 98 .footer .hcard__description { 99 background-color: var(--light-background); 100 } 101 } 102 103 @media (prefers-color-scheme: dark) { 104 html { 105 background-color: var(--dark-background); 106 color: var(--dark-text); 107 font-weight: var(--dark-font); 108 } 109 110 h1, h2, h3, h4, h5 { 111 color: var(--dark-green); 112 font-weight: var(--dark-font); 113 } 114 115 a { 116 color: var(--dark-blue); 117 } 118 .link-white { 119 color: var(--dark-text); 120 } 121 122 a:hover:not(.wm-avatar):not(.no-hover), a#active { 123 background-color: var(--dark-background-hover); 124 color: var(--dark-red); 125 } 126 a:hover:not(.wm-avatar):not(.no-hover):not(.no-outline):not(.footnote-ref), 127 a#active:not(.no-outline):not(.footnote-ref) { 128 outline-color: var(--dark-background-hover); 129 background-color: var(--dark-background-hover); 130 } 131 132 hr { 133 border-top-color: var(--dark-text); 134 } 135 136 strong { 137 font-weight: var(--dark-font-bold); 138 } 139 140 time { 141 color: var(--dark-red); 142 } 143 144 blockquote { 145 border-left-color: var(--dark-red); 146 } 147 148 :not(pre) > code { 149 background-color: var(--dark-background-hover); 150 } 151 152 /* content */ 153 .notes:target, .responses:target { 154 outline-color: var(--dark-background-hover); 155 } 156 .notes__title, .responses__title, .content.notes.h-entry, .content.responses.h-entry { 157 background-color: var(--dark-background); 158 outline-color: var(--dark-text); 159 outline-width: 0.5px; 160 } 161 162 .view-full-size svg { 163 fill: var(--dark-red); 164 } 165 166 .content ol li span:before { 167 color: var(--dark-red); 168 } 169 .content ul li span:before { 170 color: var(--dark-red); 171 } 172 173 .content table th { 174 background-color: var(--dark-background-hover); 175 color: var(--dark-text); 176 } 177 .content table td, .content table th { 178 border-color: var(--dark-text); 179 } 180 .content table tr:nth-child(even) { 181 background-color: var(--dark-background-hover); 182 color: var(--dark-text); 183 } 184 185 /* webmention */ 186 .wm-form__button { 187 background-color: var(--dark-background); 188 border-color: var(--dark-blue); 189 color: var(--dark-blue); 190 } 191 .wm-form__button:hover { 192 background-color: var(--dark-background-hover); 193 border-color: var(--dark-red); 194 color: var(--dark-red); 195 } 196 197 /* footer */ 198 .footer .hcard { 199 border: solid 1px var(--dark-border); 200 } 201 .footer .hcard__description { 202 background-color: var(--dark-background); 203 } 204 } 205