Customize your interface: CSS Styles

Copy the full text inside the (darker) code block and paste that in the large code field in Stylus.

This replaces the annoying Hide button on images with a simple ⏷. You can of course use another character as well.

.media-gallery__actions {
    inset-inline-end: 9px;
    top: 9px;    
}

.media-gallery__actions__pill {
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1 !important;
}

.media-gallery__actions__pill > span {
    font-size: 0
}

.media-gallery__actions__pill > span::after {
    	content: '⛛';
    	font-size: 12px;
}

/* Green boost icon */

.icon-button.active .icon-retweet {
  color: #19A341 !important;
}

.status__action-bar__button.icon-button.active.icon-button--with-counter .icon-button__counter {
  color: #19A341;
}

.status__action-bar__button.star-icon.icon-button.active.icon-button--with-counter .icon-button__counter .animated-number {
  color: #ca8f04 !important;
}

This is the Mastodon default.

/* Screaming content warning  */

.content-warning::after, .content-warning::before {
  background: url(/packs/media/images/warning-stripes-9bb6a826bc6215da538d09fe7e6c1917.svg) repeat-y;
  border-left: unset;
  border-right: unset;
  border-end-start-radius: 4px;
  border-start-start-radius: 4px;  
  border-end-end-radius: 4px;
  border-start-end-radius: 4px;
}

.compose-form .spoiler-input__border {
  background: url(/packs/media/images/warning-stripes-9bb6a826bc6215da538d09fe7e6c1917.svg) repeat-y;
}

As the title says, this is only for the Mastodon dark theme. You can of course change the background-color to your liking. You can also use our Todon Classic Dark theme (see preferences > appearance), that includes also the green boost icon.

/* Classic Todon dark  */

.column > .scrollable, .columns-area .scrollable {
  background-color: #292938;
}

.flash-message, .admin-wrapper .content-wrapper .content .table-wrapper .table > tbody > tr > th, .admin-wrapper .content-wrapper .content .table > tbody > tr > td, .admin-wrapper .content-wrapper .content .batch-table__row  {
    background-color: #292938;
}

.drawer__header, .drawer__inner, .column-header__wrapper, .notification__filter-bar, .account__section-headline, .column-inline-form, .dropdown-menu, .hover-card, .language-dropdown__dropdown, .privacy-dropdown__dropdown, .language-dropdown__dropdown .emoji-mart-scroll, .language-dropdown__dropdown .emoji-mart-search, .actions-modal, .boost-modal, .compare-history-modal, .report-modal, .report-dialog-modal, .dialog-modal, .safety-action-modal__bottom, .safety-action-modal__top {
  background-color: #20202c;           
}

.admin-wrapper, .admin-wrapper .sidebar-wrapper__inner, .admin-wrapper .sidebar ul ul, .admin-wrapper .content-wrapper .content .table-wrapper .table th, .admin-wrapper .content-wrapper .content .batch-table__toolbar {
  background-color: #20202c;           
}

.notification-group--direct, .notification-ungrouped--direct, .status__wrapper-direct {
  background: rgba(99,100,255,.035);
}