☰

myworkoutcompanion.net - Dark Mode [Customizable]

Dark theme for MyWorkoutCompanion

  1. /* ==UserStyle==
  2. @name           myworkoutcompanion.net - Dark Mode [Customizable]
  3. @namespace      typpi.online
  4. @version        1.0.3
  5. @description    Dark theme for MyWorkoutCompanion
  6. @author         Nick2bad4u
  7. @license        UnLicense
  8. @homepageURL    https://github.com/Nick2bad4u/UserStyles
  9. @supportURL     https://github.com/Nick2bad4u/UserStyles/issues
  10.  
  11. @var color option-bg "Option Background" #000000
  12. @var color option-text "Option Text Color" #ffffff
  13. @var color border-focus "Border Focus Color" #7c3900
  14. @var color box-shadow-focus "Box Shadow Focus Color" #7c390040
  15. @var color button-border "Button Border Color" #ffffff
  16. @var color button-bg "Button Background Color" #a9a9a9
  17. @var color button-text "Button Text Color" #7c3900
  18. @var color event-bg "Event Background Color" #7c3900
  19. ==/UserStyle== */
  20. @-moz-document domain("myworkoutcompanion.net") {
  21. 	/* Stylus Variables */
  22. 	:root {
  23. 		--option-bg: var(option-bg);
  24. 		--option-text: var(option-text);
  25. 		--border-focus: var(border-focus);
  26. 		--box-shadow-focus: var(box-shadow-focus);
  27. 		--button-border: var(button-border);
  28. 		--button-bg: var(button-bg);
  29. 		--button-text: var(button-text);
  30. 		--event-bg: var(event-bg);
  31. 	}
  32.  
  33. 	/* Invert colors except images and videos */
  34. 	:is(html:not([stylus-iframe]), img, svg, video) {
  35. 		filter: invert(1) hue-rotate(180deg) !important;
  36. 	}
  37.  
  38. 	option {
  39. 		background: var(--option-bg);
  40. 		color: var(--option-text);
  41. 	}
  42.  
  43. 	.custom-select:focus,
  44. 	.form-control:focus {
  45. 		outline: 0;
  46. 		box-shadow: 0 0 0 0.2rem var(--box-shadow-focus);
  47. 		border-color: var(--border-focus);
  48. 	}
  49.  
  50. 	.fc .fc-button-primary,
  51. 	.fc .fc-button {
  52. 		opacity: 100% !important;
  53. 		border-color: var(--button-border) !important;
  54. 		background-color: var(--button-bg) !important;
  55. 		color: var(--button-text) !important;
  56. 	}
  57.  
  58. 	.fc-direction-ltr .fc-daygrid-event.fc-event-end,
  59. 	.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  60. 		background-color: var(--event-bg) !important;
  61. 	}
  62. }