☰

cssportal.com - Dark Mode

Dark theme for CSS Portal

当前为 2025-01-21 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           cssportal.com - Dark Mode
  3. @namespace      typpi.online
  4. @version        1.0.3
  5. @description    Dark theme for CSS Portal
  6. @author         Nick2bad4u
  7. @license        UnLicense
  8. @homepageURL    https://github.com/Nick2bad4u/UserStyles
  9. @supportURL     https://github.com/Nick2bad4u/UserStyles/issues
  10. ==/UserStyle== */
  11. @-moz-document domain("cssportal.com") {
  12. 	/* Invert colors except images and videos */
  13. 	html,
  14. 	img,
  15. 	svg,
  16. 	video,
  17. 	iframe {
  18. 		filter: invert(1) hue-rotate(180deg) !important;
  19. 	}
  20.  
  21. 	:root [data-topbar='dark'],
  22. 	[data-bs-theme='light'] [data-topbar='dark'] {
  23. 		--bs-header-bg: #cdc5e5 !important;
  24. 		--bs-header-item-color: #f8f9fa;
  25. 		--bs-header-item-sub-color: #8795ab;
  26. 	}
  27.  
  28. 	:root,
  29. 	[data-bs-theme='light'] {
  30. 		--bs-blue: #5156be;
  31. 		--bs-indigo: #564ab1;
  32. 		--bs-purple: #6f42c1;
  33. 		--bs-pink: #e83e8c;
  34. 		--bs-red: #fd625e;
  35. 		--bs-orange: #f1734f;
  36. 		--bs-yellow: #ffbf53;
  37. 		--bs-green: #2ab57d;
  38. 		--bs-teal: #050505;
  39. 		--bs-cyan: #4ba6ef;
  40. 		--bs-black: #000;
  41. 		--bs-white: #fff;
  42. 		--bs-gray: #74788d;
  43. 		--bs-gray-dark: #2c302e;
  44. 		--bs-gray-100: #f8f9fa;
  45. 		--bs-gray-200: #e9e9ef;
  46. 		--bs-gray-300: #f6f6f6;
  47. 		--bs-gray-400: #ced4da;
  48. 		--bs-gray-500: #adb5bd;
  49. 		--bs-gray-600: #74788d;
  50. 		--bs-gray-700: #313533;
  51. 		--bs-gray-800: #2c302e;
  52. 		--bs-gray-900: #212529;
  53. 		--bs-primary: #5156be;
  54. 		--bs-secondary: #74788d;
  55. 		--bs-success: #2ab57d;
  56. 		--bs-info: #4ba6ef;
  57. 		--bs-warning: #ffbf53;
  58. 		--bs-danger: #fd625e;
  59. 		--bs-light: #e9e9ef;
  60. 		--bs-dark: #2c302e;
  61. 		--bs-primary-rgb: 81, 86, 190;
  62. 		--bs-secondary-rgb: 116, 120, 141;
  63. 		--bs-success-rgb: 42, 181, 125;
  64. 		--bs-info-rgb: 75, 166, 239;
  65. 		--bs-warning-rgb: 255, 191, 83;
  66. 		--bs-danger-rgb: 253, 98, 94;
  67. 		--bs-pink-rgb: 232, 62, 140;
  68. 		--bs-light-rgb: 233, 233, 239;
  69. 		--bs-dark-rgb: 44, 48, 46;
  70. 		--bs-primary-text: #393c85;
  71. 		--bs-secondary-text: #313533;
  72. 		--bs-success-text: #196d4b;
  73. 		--bs-info-text: #2d648f;
  74. 		--bs-warning-text: #997332;
  75. 		--bs-danger-text: #ca4e4b;
  76. 		--bs-light-text: #74788d;
  77. 		--bs-dark-text: #2c302e;
  78. 		--bs-primary-bg-subtle: #b9bbe5;
  79. 		--bs-secondary-bg-subtle: #ced4da;
  80. 		--bs-success-bg-subtle: #aae1cb;
  81. 		--bs-info-bg-subtle: #b7dbf9;
  82. 		--bs-warning-bg-subtle: #ffe5ba;
  83. 		--bs-danger-bg-subtle: #fec0bf;
  84. 		--bs-light-bg-subtle: #fbfbfb;
  85. 		--bs-dark-bg-subtle: #adb5bd;
  86. 		--bs-primary-border-subtle: #a8abdf;
  87. 		--bs-secondary-border-subtle: #ced4da;
  88. 		--bs-success-border-subtle: #7fd3b1;
  89. 		--bs-info-border-subtle: #93caf5;
  90. 		--bs-warning-border-subtle: #ffd998;
  91. 		--bs-danger-border-subtle: #fea19e;
  92. 		--bs-light-border-subtle: #f6f6f6;
  93. 		--bs-dark-border-subtle: #adb5bd;
  94. 		--bs-white-rgb: 255, 255, 255;
  95. 		--bs-black-rgb: 0, 0, 0;
  96. 		--bs-body-color-rgb: 49, 53, 51;
  97. 		--bs-font-sans-serif: 'Poppins', sans-serif;
  98. 		--bs-font-monospace: sfmono-regular, menlo,
  99. 			monaco, consolas, 'Liberation Mono',
  100. 			'Courier New', monospace;
  101. 		--bs-gradient: linear-gradient(
  102. 			180deg,
  103. 			rgb(255 255 255 / 15%),
  104. 			rgb(255 255 255 / 0%)
  105. 		);
  106. 		--bs-body-font-family: var(
  107. 			--bs-font-sans-serif
  108. 		);
  109. 		--bs-body-font-size: 0.875rem;
  110. 		--bs-body-font-weight: 400;
  111. 		--bs-body-line-height: 1.5;
  112. 		--bs-body-color: #313533;
  113. 		--bs-emphasis-color: #000;
  114. 		--bs-emphasis-color-rgb: 0, 0, 0;
  115. 		--bs-secondary-color: #2c302e;
  116. 		--bs-secondary-color-rgb: 44, 48, 46;
  117. 		--bs-secondary-bg: #fff;
  118. 		--bs-secondary-bg-rgb: 255, 255, 255;
  119. 		--bs-tertiary-color: #878a99;
  120. 		--bs-tertiary-color-rgb: 135, 138, 153;
  121. 		--bs-tertiary-bg: #f8f9fa;
  122. 		--bs-tertiary-bg-rgb: 248, 249, 250;
  123. 		--bs-body-bg: #fff;
  124. 		--bs-body-bg-rgb: 255, 255, 255;
  125. 		--bs-link-color: #5156be;
  126. 		--bs-link-color-rgb: 81, 86, 190;
  127. 		--bs-link-decoration: none;
  128. 		--bs-link-hover-color: #414598;
  129. 		--bs-link-hover-color-rgb: 65, 69, 152;
  130. 		--bs-link-hover-decoration: underline;
  131. 		--bs-code-color: #e83e8c;
  132. 		--bs-border-width: 1px;
  133. 		--bs-border-style: solid;
  134. 		--bs-border-color: #e9e9ef;
  135. 		--bs-border-color-translucent: #ced4da;
  136. 		--bs-border-radius: 0.25rem;
  137. 		--bs-border-radius-sm: 0.2rem;
  138. 		--bs-border-radius-lg: 0.4rem;
  139. 		--bs-border-radius-xl: 1rem;
  140. 		--bs-border-radius-2xl: 2rem;
  141. 		--bs-border-radius-pill: 50rem;
  142. 		--bs-box-shadow: rgb(116 120 141 / 10%) 0 5px
  143. 			20px -6px;
  144. 		--bs-box-shadow-sm: 0 0.125rem 0.25rem
  145. 			rgba(var(--bs-body-color-rgb), 0.075);
  146. 		--bs-box-shadow-lg: 0 1rem 3rem
  147. 			rgba(var(--bs-body-color-rgb), 0.175);
  148. 		--bs-box-shadow-inset: inset 0 1px 2px
  149. 			rgba(var(--bs-body-color-rgb), 0.075);
  150. 		--bs-form-control-bg: var(--bs-body-bg);
  151. 		--bs-form-control-disabled-bg: var(
  152. 			--bs-secondary-bg
  153. 		);
  154. 		--bs-highlight-bg: #fcf8e3;
  155. 		--bs-breakpoint-xs: 0;
  156. 		--bs-breakpoint-sm: 576px;
  157. 		--bs-breakpoint-md: 768px;
  158. 		--bs-breakpoint-lg: 992px;
  159. 		--bs-breakpoint-xl: 1200px;
  160. 		--bs-breakpoint-xxl: 1400px;
  161. 	}
  162.  
  163. 	.list-group {
  164. 		--bs-list-group-color: var(
  165. 			--bs-secondary-color
  166. 		);
  167. 		--bs-list-group-bg: var(--bs-secondary-bg);
  168. 		--bs-list-group-border-color: var(
  169. 			--bs-border-color
  170. 		);
  171. 		--bs-list-group-border-width: 1px;
  172. 		--bs-list-group-border-radius: 0.25rem;
  173. 		--bs-list-group-item-padding-x: 1.25rem;
  174. 		--bs-list-group-item-padding-y: 0.75rem;
  175. 		--bs-list-group-action-color: var(
  176. 			--bs-secondary-color
  177. 		);
  178. 		--bs-list-group-action-hover-color: var(
  179. 			--bs-secondary-color
  180. 		);
  181. 		--bs-list-group-action-hover-bg: var(
  182. 			--bs-tertiary-bg
  183. 		);
  184. 		--bs-list-group-action-active-color: var(
  185. 			--bs-secondary-color
  186. 		);
  187. 		--bs-list-group-action-active-bg: var(
  188. 			--bs-list-group-hover-bg
  189. 		);
  190. 		--bs-list-group-disabled-color: #74788d;
  191. 		--bs-list-group-disabled-bg: var(
  192. 			--bs-secondary-bg
  193. 		);
  194. 		--bs-list-group-active-color: #000;
  195. 		--bs-list-group-active-bg: #cdc5e5;
  196. 		--bs-list-group-active-border-color: #5156be;
  197. 		display: -webkit-box;
  198. 		display: flexbox;
  199. 		display: flex;
  200. 		-webkit-box-orient: vertical;
  201. 		-webkit-box-direction: normal;
  202. 		-ms-flex-direction: column;
  203. 		flex-direction: column;
  204. 		margin-bottom: 0;
  205. 		border-radius: var(
  206. 			--bs-list-group-border-radius
  207. 		);
  208. 		padding-left: 0;
  209. 	}
  210.  
  211. 	.rightbar-overlay {
  212. 		display: none;
  213. 		position: absolute;
  214. 		z-index: 9998;
  215. 		-webkit-transition: all 0.2s ease-out;
  216. 		transition: all 0.2s ease-out;
  217. 		inset: 0;
  218. 		background-color: #ac9dc778;
  219. 	}
  220.  
  221. 	body[data-topbar='dark'] .navbar-brand-box {
  222. 		box-shadow: 0 0 2px var(--bs-header-bg);
  223. 		border-color: var(
  224. 			--bs-list-group-active-border-color
  225. 		);
  226. 		background-color: var(
  227. 			--bs-list-group-active-bg
  228. 		);
  229. 	}
  230.  
  231. 	.logo-txt {
  232. 		color: black;
  233. 	}
  234. }