☰

cssportal.com - Dark Mode

Dark theme for CSS Portal

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址