☰

Mastodon | Custom Theme Color

Change the default blue to any color you like!

当前为 2020-10-13 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Mastodon | Custom Theme Color
  3. @version        1.0.0
  4. @description    Change the default blue to any color you like!
  5.  
  6.  -- AUTHOR STUFF --
  7. @namespace      Freeplay
  8. @author         Freeplay (https://pages.codeberg.org/freeplay/)
  9. @homepageURL    https://codeberg.org/Freeplay/UserStyles
  10. @supportURL     https://codeberg.org/Freeplay/UserStyles/issues
  11. @preprocessor   stylus
  12.  
  13.  -- VARIABLES --
  14. @var color theme "Theme Color" #db6c14
  15. @var color text "Button Text Color" white
  16. ==/UserStyle== */
  17.  
  18. @-moz-document domain("mstdn.social") {
  19. 	:root {
  20. 		--theme: theme !important;
  21. 		--text: text !important;
  22. 	}
  23. 	.button:not(.button-secondary), .block-button,
  24. 	.icon-with-badge__badge,
  25. 	.poll__chart.leading,
  26. 	.simple-navigation-active-leaf a, .btn, .react-toggle--checked .react-toggle-track, .radio-button__input.checked, .input-copy > button,
  27.  	li.dropdown-menu__item a:hover, .privacy-dropdown__option.active, .privacy-dropdown__option:hover,
  28.  	.video-player__volume__current, .video-player__volume__handle, .video-player__seek__buffer, .video-player__seek__progress, .video-player__seek__handle {
  29. 		background-color: var(--theme) !important;
  30. 		color: var(--text) !important;		
  31. 		border-color: var(--theme) !important;
  32. 	}
  33. 	.button:hover,
  34.  	.active:hover,
  35. 	.simple-navigation-active-leaf a:hover, .btn:hover,
  36.  	.status__content button > span:hover {
  37. 		filter: opacity(.9);
  38. 		transition: filter .2s;
  39. 	}
  40. 	a.active, p > a, tbody a,
  41. 	.icon-button.active, .selected,
  42. 	.status__content a, .status__content__read-more-button, .account__header__content a, .verified__mark,
  43. 	.column-header__back-button > *, .column-back-button > *, .column-header__icon, .column-back-button, .column-header__back-button,
  44. 	.notification__message .fa,
  45. 	dd a {
  46. 		color: var(--theme) !important;
  47. 		text-decoration-color: var(--theme) !important;
  48. 		border-color: var(--theme) !important;
  49. 	}
  50. 	.verified {
  51. 		background: rgba( theme, .1 ) !important;
  52. 		border-color: var(--theme) !important;
  53. 	}
  54. 	.icon-button, .button-secondary {
  55. 		border-color: var(--theme) !important;
  56. 		border-radius: 4px !important;
  57. 	}
  58. 	.trends__item__sparkline path:last-child {
  59. 		stroke: var(--theme) !important;
  60. 	}
  61. 	.trends__item__sparkline path:first-child {
  62. 		fill: rgba( theme, .1 ) !important;
  63. 	}
  64. 	
  65. 	
  66. }