Skip to content

Mastodon | Custom Theme Color by Freeplay

Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/Mastodon-CustomThemeColor.user.css

Mastodon | Custom Theme Color screenshot

Details

AuthorFreeplay

LicenseNo License

Created

Updated

CategoryMastodon

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Weekly updates

Description

Change the default blue to any color you like!
Make sure to add your instance in the 'Applies To' domains!

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           Mastodon | Custom Theme Color
@version        1.0.0
@description    Change the default blue to any color you like!

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://pages.codeberg.org/freeplay/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues
@preprocessor   stylus

 -- VARIABLES --
@var color theme "Theme Color" #db6c14
@var color text "Button Text Color" white
==/UserStyle== */

@-moz-document domain("mstdn.social") {
	:root {
		--theme: theme !important;
		--text: text !important;
	}
	.button:not(.button-secondary), .block-button,
	.icon-with-badge__badge,
	.poll__chart.leading,
	.simple-navigation-active-leaf a, .btn, .react-toggle--checked .react-toggle-track, .radio-button__input.checked, .input-copy > button,
 	li.dropdown-menu__item a:hover, .privacy-dropdown__option.active, .privacy-dropdown__option:hover,
 	.video-player__volume__current, .video-player__volume__handle, .video-player__seek__buffer, .video-player__seek__progress, .video-player__seek__handle {
		background-color: var(--theme) !important;
		color: var(--text) !important;		
		border-color: var(--theme) !important;
	}
	.button:hover,
 	.active:hover,
	.simple-navigation-active-leaf a:hover, .btn:hover,
 	.status__content button > span:hover {
		filter: opacity(.9);
		transition: filter .2s;
	}
	a.active, p > a, tbody a,
	.icon-button.active, .selected,
	.status__content a, .status__content__read-more-button, .account__header__content a, .verified__mark,
	.column-header__back-button > *, .column-back-button > *, .column-header__icon, .column-back-button, .column-header__back-button,
	.notification__message .fa,
	dd a {
		color: var(--theme) !important;
		text-decoration-color: var(--theme) !important;
		border-color: var(--theme) !important;
	}
	.verified {
		background: rgba( theme, .1 ) !important;
		border-color: var(--theme) !important;
	}
	.icon-button, .button-secondary {
		border-color: var(--theme) !important;
		border-radius: 4px !important;
	}
	.trends__item__sparkline path:last-child {
		stroke: var(--theme) !important;
	}
	.trends__item__sparkline path:first-child {
		fill: rgba( theme, .1 ) !important;
	}
	
	
}

Reviews

No reviews yet.