Skip to content

Instantly share code, notes, and snippets.

@bengrosser
Created December 17, 2022 23:24
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bengrosser/0d43c043b2b8f17a505bb176615274fe to your computer and use it in GitHub Desktop.
Save bengrosser/0d43c043b2b8f17a505bb176615274fe to your computer and use it in GitHub Desktop.
Fix mastodon.social's dark mode so that the post compose form is also in dark mode
/* this probably breaks light mode
* totally untested
* but it does fix my problem, which is that the
* mastodon.social dark mode doesn't adjust the
* post composition window to also be in dark mode
*
* I activate the below using the Stylus extension
*/
.autosuggest-textarea__textarea,
div.autosuggest-textarea__suggestions:nth-child(2) > div:nth-child(1),
.autosuggest-textarea__suggestions-wrapper,
div.autosuggest-textarea__suggestions:nth-child(1),
input,
select,
.language-dropdown__dropdown__results__item__native-name,
.emoji-mart-search,
.emoji-mart-search,
.emoji-mart-scroll,
section.emoji-mart-category > div,
section.emoji-mart-category > span,
#emoji-mart-search-1,
.emoji-mart-anchors,
.emoji-picker-dropdown__menu,
.emoji-mart,
.emoji-mart-category-label span {
background: #282c37 !important;
color: #d8d1e8 !important;
}
.compose-form__modifiers {
background: #282c37 !important;
}
.compose-form__buttons-wrapper, .selected {
background: #191b22c7 !important;
}
.compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:active, .compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:hover {
background: #191b22 !important;
color: #d8d1e8 !important;
}
@sinewalker
Copy link

sinewalker commented Dec 20, 2022

Thank you, much better!

For mastodon.au the icons at the bottom aren't picked up (that instance uses a different software version, I guess). I added this to change them. It works, but I might not be doing it right:

/* mastodon.au */

.fa-fw,
.character-counter,
button.text-icon-button {
  color: #d8d1e8 !important;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment