☰

AtCoder-Style-Changer

AtCoderのテーマをダークテーマに変更します

Fra 28.07.2021. Se den seneste versjonen.

  1. // ==UserScript==
  2. // @name         AtCoder-Style-Changer
  3. // @namespace    http://github.com/i-708
  4. // @version      1.1.0
  5. // @description  AtCoderのテーマをダークテーマに変更します
  6. // @author       i-708
  7. // @license      MIT
  8. // @match        https://atcoder.jp/*
  9. // ==/UserScript==
  10.  
  11. (function () {
  12. 	const baseColor = "#c3c3c3";
  13. 	const bgColor = "black";
  14. 	const borderColor = "#d10000";
  15.  
  16. 	// 順位表などの設定
  17. 	function rankingTableUpdate() {
  18. 		$("#btn-reset").css({
  19. 			color: baseColor,
  20. 			background: bgColor,
  21. 		});
  22.  
  23. 		$("#input-affiliation").css({
  24. 			color: baseColor,
  25. 			background: bgColor,
  26. 		});
  27.  
  28. 		$("#input-user").css("cssText", "color: #c3c3c3; background: black");
  29.  
  30. 		$("#select2-standings-select-country-container").css({
  31. 			color: baseColor,
  32. 			background: bgColor,
  33. 			border: "white 1px solid",
  34. 		});
  35.  
  36. 		$("#refresh, #auto-refresh").css({
  37. 			color: baseColor,
  38. 			background: bgColor,
  39. 		});
  40.  
  41. 		$("#standings-panel-heading.panel-heading").css({
  42. 			color: baseColor,
  43. 			background: bgColor,
  44. 		});
  45.  
  46. 		$(".btn-text").css({
  47. 			color: baseColor,
  48. 		});
  49.  
  50. 		$("tr").css({
  51. 			color: baseColor,
  52. 			background: bgColor,
  53. 		});
  54.  
  55. 		$("tr.info td").css({
  56. 			color: baseColor,
  57. 			background: bgColor,
  58. 		});
  59.  
  60. 		$(".standings-score").css({
  61. 			color: "#4aabff",
  62. 		});
  63.  
  64. 		$(".pagination.pagination-sm.mt-0.mb-1 a").css({
  65. 			color: baseColor,
  66. 			background: bgColor,
  67. 			"border-color": "",
  68. 		});
  69.  
  70. 		$("li.active a").css({
  71. 			"border-color": borderColor,
  72. 		});
  73.  
  74. 		$("td.standings-result.standings-perf").css({
  75. 			color: baseColor,
  76. 			background: bgColor,
  77. 		});
  78.  
  79. 		$("td.standings-result.standings-rate").css({
  80. 			color: baseColor,
  81. 			background: bgColor,
  82. 		});
  83.  
  84. 		$(".standings-ac").css({
  85. 			color: "#00e152",
  86. 		});
  87.  
  88. 		$(".standings-result p").css({
  89. 			color: "#d8d8d8",
  90. 		});
  91.  
  92. 		$(".standings-statistics td p,.standings-fa td p").css({
  93. 			color: "#d8d8d8",
  94. 		});
  95.  
  96. 		$(".sort-th.no-break a").css({
  97. 			color: "#d6d6d6",
  98. 		});
  99. 	}
  100.  
  101. 	// userのカラー設定
  102. 	function userColor() {
  103. 		$("head").append(
  104. 			"<style type='text/css'> .user-blue {color: #0095ff; } </style>"
  105. 		);
  106.  
  107. 		$("head").append(
  108. 			"<style type='text/css'> .user-unrated {color: white; } </style>"
  109. 		);
  110.  
  111. 		$("head").append(
  112. 			"<style type='text/css'> .user-brown {color: #b16c28; } </style>"
  113. 		);
  114.  
  115. 		$("head").append(
  116. 			"<style type='text/css'> .user-green {color: #00ce00; } </style>"
  117. 		);
  118.  
  119. 		$("head").append(
  120. 			"<style type='text/css'> .user-gray {color: #a9a9a9; } </style>"
  121. 		);
  122.  
  123. 		$("head").append(
  124. 			"<style type='text/css'> .user-yellow {color: #dede01; } </style>"
  125. 		);
  126.  
  127. 		$("head").append(
  128. 			"<style type='text/css'> .user-cyan {color: #00f1f1; } </style>"
  129. 		);
  130. 	}
  131. 	// 監視
  132. 	function loadObservation() {
  133. 		const loadElem = document
  134. 			.getElementById("vue-standings")
  135. 			.getElementsByClassName("loading-show")[0];
  136. 		const loadOptions = { attributes: true };
  137. 		const loadObserver = new MutationObserver(() => {
  138. 			if (!!document.getElementById("standings-tbody")) {
  139. 				rankingTableUpdate();
  140. 				standObservation();
  141. 				refreshObservation();
  142. 			}
  143. 		});
  144. 		loadObserver.observe(loadElem, loadOptions);
  145. 	}
  146.  
  147. 	function standObservation() {
  148. 		const standElem = document.getElementById("standings-tbody");
  149. 		const standElemOption = {
  150. 			childList: true,
  151. 			attributes: true,
  152. 		};
  153. 		if (standElem) {
  154. 			const standObserver = new MutationObserver(rankingTableUpdate);
  155. 			standObserver.observe(standElem, standElemOption);
  156. 		}
  157. 	}
  158.  
  159. 	function refreshObservation() {
  160. 		const refreshElem = document.getElementById("refresh");
  161. 		const refreshElemOptions = {
  162. 			attributes: true,
  163. 			attributeFilter: ["class"],
  164. 		};
  165. 		if (refreshElem) {
  166. 			const refreshObserver = new MutationObserver((mutationRecord) => {
  167. 				const isDisabled =
  168. 					mutationRecord[0].target.classList.contains("disabled");
  169. 				if (isDisabled) {
  170. 					rankingTableUpdate();
  171. 				}
  172. 			}).observe(refreshElem, refreshElemOptions);
  173. 		}
  174. 	}
  175. 	function resultObservation() {
  176. 		const resultElem = document.getElementsByTagName("tbody")[0];
  177. 		const resultOptions = {
  178. 			childList: true,
  179. 			attributes: true,
  180. 			subtree: true,
  181. 		};
  182. 		if (resultElem) {
  183. 			const resultObserver = new MutationObserver(rankingTableUpdate).observe(
  184. 				resultElem,
  185. 				resultOptions
  186. 			);
  187. 		}
  188. 	}
  189.  
  190. 	function init() {
  191. 		//全体共通
  192. 		$("li.active a").not("ul.dropdown-menu li a").css({
  193. 			"border-color": borderColor,
  194. 			border: " #d10000 solid 1px",
  195. 		});
  196.  
  197. 		$(".btn-primary").css({
  198. 			"border-color": borderColor,
  199. 		});
  200.  
  201. 		// タイマー
  202. 		$("#fixed-server-timer").css({
  203. 			color: bgColor,
  204. 		});
  205.  
  206. 		$("head").append(
  207. 			"<style type='text/css'> #header .header-page li.is-active a {color: #c3c3c3 !important; } </style>"
  208. 		);
  209.  
  210. 		$("head").append(
  211. 			"<style type='text/css'> #header .header-lang li a:hover {color: #c3c3c3 !important; } </style>"
  212. 		);
  213.  
  214. 		//ユーザーカラー
  215. 		userColor();
  216.  
  217. 		// ユーザページ
  218. 		$("body").css({
  219. 			"background-color": bgColor,
  220. 			color: baseColor,
  221. 		});
  222.  
  223. 		$("#main-container").css({
  224. 			"background-color": bgColor,
  225. 		});
  226.  
  227. 		$("button").css({
  228. 			color: baseColor,
  229. 			"background-color": bgColor,
  230. 		});
  231.  
  232. 		$(".btn.btn-default.active").css({
  233. 			"border-color": borderColor,
  234. 		});
  235.  
  236. 		$("ul").css({
  237. 			color: baseColor,
  238. 			"background-color": bgColor,
  239. 		});
  240.  
  241. 		$("head").append(
  242. 			"<style type='text/css'> .new-is-active {color: '#c3c3c3'; } </style>"
  243. 		);
  244.  
  245. 		$(
  246. 			".glyphicon.glyphicon-resize-full, .glyphicon.glyphicon-search.black"
  247. 		).css({
  248. 			color: baseColor,
  249. 		});
  250.  
  251. 		$(".form-control.input-sm").css({
  252. 			color: baseColor,
  253. 			"background-color": bgColor,
  254. 		});
  255.  
  256. 		$(".header-inner").css({
  257. 			"background-color": bgColor,
  258. 			"border-bottom-color": baseColor,
  259. 		});
  260.  
  261. 		$(".header-sub_page").css({
  262. 			"background-color": bgColor,
  263. 		});
  264. 		$("#footer").css({
  265. 			background: bgColor,
  266. 		});
  267.  
  268. 		$(".t-inner").css({
  269. 			"background-color": bgColor,
  270. 		});
  271.  
  272. 		$(".text-center.even").css({
  273. 			"background-color": bgColor,
  274. 		});
  275.  
  276. 		$(".text-center.odd").css({
  277. 			"background-color": bgColor,
  278. 		});
  279.  
  280. 		$("a").css({
  281. 			color: baseColor,
  282. 			"background-color": "transparent",
  283. 		});
  284.  
  285. 		// コンテスト成績証
  286. 		$(".panel-body").css({
  287. 			"background-color": bgColor,
  288. 		});
  289.  
  290. 		$(".panel-footer").css({
  291. 			"background-color": bgColor,
  292. 		});
  293.  
  294. 		$("tr").css({
  295. 			color: baseColor,
  296. 		});
  297.  
  298. 		$(".grey").css({
  299. 			color: "#f2f1f1",
  300. 		});
  301.  
  302. 		$(".dark-grey").css({
  303. 			color: "#ddd",
  304. 		});
  305.  
  306. 		$(".panel-primary").css({
  307. 			"border-color": borderColor,
  308. 		});
  309.  
  310. 		$(".panel-primary>.panel-heading").css({
  311. 			"border-color": borderColor,
  312. 		});
  313.  
  314. 		//コンテストページ
  315. 		$("tr").css({
  316. 			"background-color": bgColor,
  317. 		});
  318.  
  319. 		$("#contest-nav-tabs").css({
  320. 			"background-color": bgColor,
  321. 		});
  322.  
  323. 		$("li.active a").css({
  324. 			"background-color": bgColor,
  325. 		});
  326.  
  327. 		$(".insert-participant-box").css({
  328. 			"background-color": bgColor,
  329. 		});
  330.  
  331. 		$(".container-fluid").css({
  332. 			"background-color": bgColor,
  333. 		});
  334.  
  335. 		$("#main-div").css({
  336. 			background: bgColor,
  337. 		});
  338.  
  339. 		$("small.contest-duration, span.mr-2").css({
  340. 			color: baseColor,
  341. 		});
  342.  
  343. 		//  問題ページ
  344. 		$("pre").css({
  345. 			color: baseColor,
  346. 			background: bgColor,
  347. 		});
  348.  
  349. 		$(".btn-copy").css({
  350. 			color: baseColor,
  351. 			background: bgColor,
  352. 		});
  353.  
  354. 		$("span.select2-selection.select2-selection--single").css({
  355. 			color: baseColor,
  356. 			background: bgColor,
  357. 		});
  358.  
  359. 		$("span.select2-selection__rendered").css({
  360. 			color: baseColor,
  361. 			background: bgColor,
  362. 		});
  363.  
  364. 		$("code:not([class])").css({
  365. 			color: "#ffaa2a",
  366. 			"background-color": "transparent",
  367. 			border: "white solid 1px",
  368. 		});
  369. 		$(".alert.alert-warning.alert-dismissible.fade.in").css({
  370. 			color: "#ffbe2b",
  371. 			"background-color": bgColor,
  372. 			border: "#ffdd38 solid 1px",
  373. 		});
  374.  
  375. 		/* コード画面*/
  376. 		$(".CodeMirror-scroll").css({
  377. 			"background-color": bgColor,
  378. 		});
  379.  
  380. 		// カーソル
  381. 		$("head").append(
  382. 			"<style type='text/css'>.CodeMirror-cursor{border-left: 1px solid white;border-right: none;width: 0;}</style>"
  383. 		);
  384.  
  385. 		// 文字色
  386. 		$("head").append(
  387. 			"<style type='text/css'>.cm-s-default .cm-builtin{color: #bb98ff}</style>"
  388. 		);
  389.  
  390. 		$("head").append(
  391. 			"<style type='text/css'>.cm-s-default .cm-keyword{color: #ed72ff}</style>"
  392. 		);
  393.  
  394. 		$("head").append(
  395. 			"<style type='text/css'>.cm-s-default .cm-def{color: #23c2ff}</style>"
  396. 		);
  397.  
  398. 		$("head").append(
  399. 			"<style type='text/css'>.cm-s-default .cm-string{color: #ff9a5f}</style>"
  400. 		);
  401.  
  402. 		$("head").append(
  403. 			"<style type='text/css'>.cm-s-default .cm-number{color: #11cb81}</style>"
  404. 		);
  405.  
  406. 		$("head").append(
  407. 			"<style type='text/css'>.cm-s-default .cm-comment{color: #9e9e9e}</style>"
  408. 		);
  409.  
  410. 		$(".CodeMirror-gutter").css({
  411. 			color: "white",
  412. 			"background-color": bgColor,
  413. 		});
  414.  
  415. 		$("head").append(
  416. 			"<style type='text/css'>div.CodeMirror-linenumber.CodeMirror-gutter-elt{color: white}</style>"
  417. 		);
  418.  
  419. 		$(".CodeMirror").css("color", "white");
  420.  
  421. 		//提出結果
  422. 		$(".panel-heading").css({
  423. 			color: baseColor,
  424. 			background: bgColor,
  425. 		});
  426.  
  427. 		$(".label-warning").css({
  428. 			background: "#d58617",
  429. 		});
  430.  
  431. 		$(".btn.btn-link.btn-xs").css({
  432. 			color: baseColor,
  433. 			background: bgColor,
  434. 			border: "solid 1px",
  435. 		});
  436.  
  437. 		//コード
  438. 		$("head").append(
  439. 			"<style type='text/css'>ol.linenums{color: #c3c3c3; background-color: #1c1b1b;}</style>"
  440. 		);
  441. 		$("head").append(
  442. 			"<style type='text/css'>ol.linenums li{background-color: black;}</style>"
  443. 		);
  444. 		$("head").append("<style type='text/css'>.com{color: #e11313;}</style>");
  445. 		$("head").append("<style type='text/css'>.str{color: #1ec91e;}</style>");
  446. 		$("head").append("<style type='text/css'>.kwd{color: #00d0ff;}</style>");
  447. 		$("head").append("<style type='text/css'>.pln{color: #dfdfdf;}</style>");
  448. 		$("head").append("<style type='text/css'>.pun{color: #ffe000;}</style>");
  449. 		$("head").append("<style type='text/css'>.lit{color: #41df00;}</style>");
  450.  
  451. 		// セレクター
  452. 		$("head").append(
  453. 			"<style type='text/css'>.select2-dropdown, .select2-search__field{background-color: black !important;color: #c3c3c3 !important;}</style>"
  454. 		);
  455.  
  456. 		//コードテスト
  457. 		$("head").append(
  458. 			"<style type='text/css'>.table>thead>tr>td.danger, .table>tbody>tr>td.danger, .table>tfoot>tr>td.danger, .table>thead>tr>th.danger, .table>tbody>tr>th.danger, .table>tfoot>tr>th.danger, .table>thead>tr.danger>td, .table>tbody>tr.danger>td, .table>tfoot>tr.danger>td, .table>thead>tr.danger>th, .table>tbody>tr.danger>th, .table>tfoot>tr.danger>th{background-color: #a31010;　color: #c3c3c3;}</style>"
  459. 		);
  460.  
  461. 		$("head").append(
  462. 			"<style type='text/css'>table.table.table-bordered tbody{color:#c3c3c3; background-color: black;}</style>"
  463. 		);
  464.  
  465. 		$("head").append(
  466. 			"<style type='text/css'>table>thead>tr>td.success, .table>tbody>tr>td.success, .table>tfoot>tr>td.success, .table>thead>tr>th.success, .table>tbody>tr>th.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>tbody>tr.success>td, .table>tfoot>tr.success>td, .table>thead>tr.success>th, .table>tbody>tr.success>th, .table>tfoot>tr.success>th{color:#c3c3c3; background-color: #379d0d;}</style>"
  467. 		);
  468.  
  469. 		$("head").append(
  470. 			"<style type='text/css'>.btn-primary{color:#c3c3c3 !important; background-color: black !important; border-color: #d10000 !important;}</style>"
  471. 		);
  472.  
  473. 		$("textarea#input.form-control.customtest-textarea").css({
  474. 			color: "white",
  475. 			background: bgColor,
  476. 		});
  477.  
  478. 		$("textarea#stdout.form-control.customtest-textarea").css({
  479. 			color: "white",
  480. 			background: bgColor,
  481. 		});
  482.  
  483. 		$("textarea#stderr.form-control.customtest-textarea").css({
  484. 			color: "white",
  485. 			background: bgColor,
  486. 		});
  487.  
  488. 		// Home
  489. 		$(
  490. 			"div.f-flex.f-flex_mg5.f-flex_mg0_s.f-flex_mb5_s div.f-flex4.f-flex12_s"
  491. 		).css({
  492. 			border: "solid 1px",
  493. 		});
  494.  
  495. 		$("head").append(
  496. 			"<style type='text/css'>#header .header-page li a:hover{color:#c3c3c3 !important;}</style>"
  497. 		);
  498.  
  499. 		$("head").append(
  500. 			"<style type='text/css'>#header .header-page li a:before{content: '';width: 0;height: 2px;position: absolute;left: 0;right: 0;bottom: 0;background-color: white !important;-webkit-transition: width .4s;transition: width .4s;}</style>"
  501. 		);
  502.  
  503. 		$(".m-box_inner").css({
  504. 			"background-color": bgColor,
  505. 		});
  506.  
  507. 		$(".m-box-news_post::before").css({
  508. 			"background-color": bgColor,
  509. 		});
  510.  
  511. 		$("a.a-btn_bg.small").css({
  512. 			color: baseColor,
  513. 			"background-color": bgColor,
  514. 		});
  515.  
  516. 		$(".panel.panel-primary").css({
  517. 			color: baseColor,
  518. 			"background-color": bgColor,
  519. 		});
  520.  
  521. 		$("#keyvisual").css({
  522. 			color: baseColor,
  523. 			"background-color": bgColor,
  524. 			"background-blend-mode": "darken",
  525. 		});
  526. 		$("head").append(
  527. 			"<style type='text/css'>#keyvisual .keyvisual-inner:before{background-color:black; content: ''; display: block;position: absolute;top: 0;width: 18px;height: 400px;pointer-events: none;}</style>"
  528. 		);
  529.  
  530. 		$("head").append(
  531. 			"<style type='text/css'>.m-box-news_post:before{content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 100px;background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #fff), to(rgba(255,255,255,0)));background: linear-gradient(0deg, #000 50%, rgba(255,255,255,0) 100%);}</style>"
  532. 		);
  533.  
  534. 		$(".status").css({
  535. 			"background-color": "#037abf",
  536. 		});
  537.  
  538. 		$(".status.status-gray").css({
  539. 			"background-color": "#717171",
  540. 		});
  541.  
  542. 		$(".status.status-green").css({
  543. 			"background-color": "#317f01",
  544. 		});
  545.  
  546. 		$(".a-btn_bg").css({
  547. 			border: "solid 1px",
  548. 		});
  549.  
  550. 		$(".a-btn_arrow").css({
  551. 			color: baseColor,
  552. 			"background-color": bgColor,
  553. 		});
  554.  
  555. 		$(".a-btn_arrow").css({
  556. 			cssText: $(".a-btn_arrow").attr("style") + "color: #c3c3c3 !important;",
  557. 		});
  558.  
  559. 		//PAST
  560. 		$(".center-block").css({
  561. 			"background-color": "#d6d6d6",
  562. 		});
  563.  
  564. 		//Jobs
  565. 		$(".f-flex3").css({
  566. 			border: "solid 1px",
  567. 		});
  568.  
  569. 		$(".m-list-job_company").css({
  570. 			color: baseColor,
  571. 		});
  572.  
  573. 		//順位表
  574. 		$("head").append(
  575. 			"<style type='text/css'>tr.info td{background-color: black !important;color: #c3c3c3 !important;}</style>"
  576. 		);
  577.  
  578. 		//ランキング
  579. 		$(".form-control").css({
  580. 			color: baseColor,
  581. 			"background-color": bgColor,
  582. 		});
  583.  
  584. 		//ダイアログ
  585. 		$(".modal-content").css({
  586. 			color: baseColor,
  587. 			"background-color": bgColor,
  588. 		});
  589. 	}
  590.  
  591. 	init();
  592.  
  593. 	// 監視
  594. 	if (document.URL.match("/standings")) {
  595. 		loadObservation();
  596. 	}
  597.  
  598. 	if (document.URL.match("/results")) {
  599. 		resultObservation();
  600. 	}
  601.  
  602. 	// 色変えコードの埋め込み
  603. 	const locationPathName = location.pathname;
  604. 	const correctLocation = location.pathname.match(/\/users\/[A-Za-z0-9_]*/);
  605. 	if (
  606. 		locationPathName == correctLocation &&
  607. 		(location.search == "" ||
  608. 			location.search == "?graph=rank" ||
  609. 			location.search == "?graph=rating")
  610. 	) {
  611. 		$("head").append(
  612. 			`<script>
  613. 				    function pixelDataChange(event) {
  614. 					    var c = document.getElementById("ratingStatus");
  615. 					    if (!c){
  616. 						    c = document.getElementById("rankStatus");
  617. 					    }
  618. 					    const canvas = c;
  619. 					    const ctx = canvas.getContext("2d");
  620. 					    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  621. 					    const data = imageData.data;
  622. 					    const oldColor = [
  623. 						    [128,128,128],
  624. 						    [128,64,0],
  625. 						    [0,128,0],
  626. 						    [0,192,192],
  627. 						    [0,0,255],
  628. 						    [192,192,0],
  629. 						    [255,128,0],
  630. 						    [255,0,0],
  631. 						    [226,83,14],
  632. 						    [192,192,192],
  633. 						    [254,195,11],
  634. 						    [132,230,255]
  635. 					    ];
  636. 					    const newColor = [
  637. 						    [201,201,201],
  638. 						    [168,85,2],
  639. 						    [2,186,2],
  640. 						    [0,192,192],
  641. 						    [24,148,255],
  642. 						    [192,192,0],
  643. 						    [255,128,0],
  644. 						    [255,0,0],
  645. 						    [226,83,14],
  646. 						    [192,192,192],
  647. 						    [254,195,11],
  648. 						    [132,230,255]
  649. 					    ];
  650. 					    let result = newColor.length;
  651. 					    let jPlus = 0;
  652. 					    if (location.search == "?graph=rank" || !!document.getElementById("rankStatus")){
  653. 						    jPlus = 8;
  654. 					    }
  655. 					    for (let i = 0, len = data.length; i < len; i += 4) {
  656. 						    for (let j = jPlus; j < oldColor.length; j += 1) {
  657. 							    if (data[i] == oldColor[j][0] && data[i + 1] == oldColor[j][1] && data[i + 2] == oldColor[j][2]) {
  658. 								    result = j;
  659. 								    break;
  660. 							    }
  661. 						    }
  662. 						    if (result < newColor.length) {
  663. 							    data[i] = newColor[result][0];
  664. 							    data[i + 1] = newColor[result][1];
  665. 							    data[i + 2] = newColor[result][2];
  666. 						    }
  667. 						    else{
  668. 							    data[i] = 255;
  669. 							    data[i + 1] = 255;
  670. 							    data[i + 2] = 255;
  671. 						    }
  672. 					    }
  673. 					    imageData.data = data;
  674. 					    ctx.putImageData(imageData, 0, 0);
  675. 				    }
  676. 			    </script>`
  677. 		);
  678. 		$(".mt-2.mb-2").append(
  679. 			`<script>
  680. 				    window.onload = function(){
  681. 					    createjs.Ticker.addEventListener("tick", pixelDataChange);
  682. 				    };
  683. 			</script>`
  684. 		);
  685. 	}
  686. })();