AtCoder-Style-Changer

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

As of 2021-11-05. See the latest version.

  1. // ==UserScript==
  2. // @name AtCoder-Style-Changer
  3. // @namespace http://github.com/i-708
  4. // @version 1.2.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. $("p code").css({
  365. color: "#ffaa2a",
  366. "background-color": "transparent",
  367. border: "white solid 1px",
  368. });
  369.  
  370. $(".alert.alert-warning.alert-dismissible.fade.in").css({
  371. color: "#ffbe2b",
  372. "background-color": bgColor,
  373. border: "#ffdd38 solid 1px",
  374. });
  375.  
  376. /* コード画面*/
  377. $(".CodeMirror-scroll").css({
  378. "background-color": bgColor,
  379. });
  380.  
  381. // カーソル
  382. $("head").append(
  383. "<style type='text/css'>.CodeMirror-cursor{border-left: 1px solid white;border-right: none;width: 0;}</style>"
  384. );
  385.  
  386. // 文字色
  387. $("head").append(
  388. "<style type='text/css'>.cm-s-default .cm-builtin{color: #bb98ff}</style>"
  389. );
  390.  
  391. $("head").append(
  392. "<style type='text/css'>.cm-s-default .cm-keyword{color: #ed72ff}</style>"
  393. );
  394.  
  395. $("head").append(
  396. "<style type='text/css'>.cm-s-default .cm-def{color: #23c2ff}</style>"
  397. );
  398.  
  399. $("head").append(
  400. "<style type='text/css'>.cm-s-default .cm-string{color: #ff9a5f}</style>"
  401. );
  402.  
  403. $("head").append(
  404. "<style type='text/css'>.cm-s-default .cm-number{color: #11cb81}</style>"
  405. );
  406.  
  407. $("head").append(
  408. "<style type='text/css'>.cm-s-default .cm-comment{color: #9e9e9e}</style>"
  409. );
  410.  
  411. $(".CodeMirror-gutter").css({
  412. color: "white",
  413. "background-color": bgColor,
  414. });
  415.  
  416. $("head").append(
  417. "<style type='text/css'>div.CodeMirror-linenumber.CodeMirror-gutter-elt{color: white}</style>"
  418. );
  419.  
  420. $(".CodeMirror").css("color", "white");
  421.  
  422. //提出結果
  423. $(".panel-heading").css({
  424. color: baseColor,
  425. background: bgColor,
  426. });
  427.  
  428. $(".label-warning").css({
  429. background: "#d58617",
  430. });
  431.  
  432. $(".btn.btn-link.btn-xs").css({
  433. color: baseColor,
  434. background: bgColor,
  435. border: "solid 1px",
  436. });
  437.  
  438. //コード
  439. $("head").append(
  440. "<style type='text/css'>ol.linenums{color: #c3c3c3; background-color: #1c1b1b;}</style>"
  441. );
  442. $("head").append(
  443. "<style type='text/css'>ol.linenums li{background-color: black;}</style>"
  444. );
  445. $("head").append("<style type='text/css'>.com{color: #e11313;}</style>");
  446. $("head").append("<style type='text/css'>.str{color: #1ec91e;}</style>");
  447. $("head").append("<style type='text/css'>.kwd{color: #00d0ff;}</style>");
  448. $("head").append("<style type='text/css'>.pln{color: #dfdfdf;}</style>");
  449. $("head").append("<style type='text/css'>.pun{color: #ffe000;}</style>");
  450. $("head").append("<style type='text/css'>.lit{color: #41df00;}</style>");
  451. $("head").append("<style type='text/css'>.typ{color: #da01da;}</style>");
  452. // セレクター
  453. $("head").append(
  454. "<style type='text/css'>.select2-dropdown, .select2-search__field{background-color: black !important;color: #c3c3c3 !important;}</style>"
  455. );
  456.  
  457. //コードテスト
  458. $("head").append(
  459. "<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>"
  460. );
  461.  
  462. $("head").append(
  463. "<style type='text/css'>table.table.table-bordered tbody{color:#c3c3c3; background-color: black;}</style>"
  464. );
  465.  
  466. $("head").append(
  467. "<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>"
  468. );
  469.  
  470. $("head").append(
  471. "<style type='text/css'>.btn-primary{color:#c3c3c3 !important; background-color: black !important; border-color: #d10000 !important;}</style>"
  472. );
  473.  
  474. $("textarea#input.form-control.customtest-textarea").css({
  475. color: "white",
  476. background: bgColor,
  477. });
  478.  
  479. $("textarea#stdout.form-control.customtest-textarea").css({
  480. color: "white",
  481. background: bgColor,
  482. });
  483.  
  484. $("textarea#stderr.form-control.customtest-textarea").css({
  485. color: "white",
  486. background: bgColor,
  487. });
  488.  
  489. // Home
  490. $(
  491. "div.f-flex.f-flex_mg5.f-flex_mg0_s.f-flex_mb5_s div.f-flex4.f-flex12_s"
  492. ).css({
  493. border: "solid 1px",
  494. });
  495.  
  496. $("head").append(
  497. "<style type='text/css'>#header .header-page li a:hover{color:#c3c3c3 !important;}</style>"
  498. );
  499.  
  500. $("head").append(
  501. "<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>"
  502. );
  503.  
  504. $(".m-box_inner").css({
  505. "background-color": bgColor,
  506. });
  507.  
  508. $(".m-box-news_post::before").css({
  509. "background-color": bgColor,
  510. });
  511.  
  512. $("a.a-btn_bg.small").css({
  513. color: baseColor,
  514. "background-color": bgColor,
  515. });
  516.  
  517. $(".panel.panel-primary").css({
  518. color: baseColor,
  519. "background-color": bgColor,
  520. });
  521.  
  522. $("#keyvisual").css({
  523. color: baseColor,
  524. "background-color": bgColor,
  525. "background-blend-mode": "darken",
  526. });
  527. $("head").append(
  528. "<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>"
  529. );
  530.  
  531. $("head").append(
  532. "<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>"
  533. );
  534.  
  535. $(".status").css({
  536. "background-color": "#037abf",
  537. });
  538.  
  539. $(".status.status-gray").css({
  540. "background-color": "#717171",
  541. });
  542.  
  543. $(".status.status-green").css({
  544. "background-color": "#317f01",
  545. });
  546.  
  547. $(".a-btn_bg").css({
  548. border: "solid 1px",
  549. });
  550.  
  551. $(".a-btn_arrow").css({
  552. color: baseColor,
  553. "background-color": bgColor,
  554. });
  555.  
  556. $(".a-btn_arrow").css({
  557. cssText: $(".a-btn_arrow").attr("style") + "color: #c3c3c3 !important;",
  558. });
  559.  
  560. //PAST
  561. $(".center-block").css({
  562. "background-color": "#d6d6d6",
  563. });
  564.  
  565. //Jobs
  566. $(".f-flex3").css({
  567. border: "solid 1px",
  568. });
  569.  
  570. $(".m-list-job_company").css({
  571. color: baseColor,
  572. });
  573.  
  574. //順位表
  575. $("head").append(
  576. "<style type='text/css'>tr.info td{background-color: black !important;color: #c3c3c3 !important;}</style>"
  577. );
  578.  
  579. //ランキング
  580. $(".form-control").css({
  581. color: baseColor,
  582. "background-color": bgColor,
  583. });
  584.  
  585. //ダイアログ
  586. $(".modal-content").css({
  587. color: baseColor,
  588. "background-color": bgColor,
  589. });
  590.  
  591. $("html body").css({
  592. "background-color": bgColor,
  593. color: baseColor,
  594. });
  595.  
  596. $("html body").css("cssText", "color:#c3c3c3;background-image: none !important;background-color: black !important;");
  597. }
  598.  
  599. init();
  600.  
  601. // 監視
  602. if (document.URL.match("/standings")) {
  603. loadObservation();
  604. }
  605.  
  606. if (document.URL.match("/results")) {
  607. resultObservation();
  608. }
  609.  
  610. // 色変えコードの埋め込み
  611. const locationPathName = location.pathname;
  612. const correctLocation = location.pathname.match(/\/users\/[A-Za-z0-9_]*/);
  613. if (
  614. locationPathName == correctLocation &&
  615. (location.search == "" ||
  616. location.search == "?graph=rank" ||
  617. location.search == "?graph=rating")
  618. ) {
  619. $("head").append(
  620. `<script>
  621. function pixelDataChange(event) {
  622. var c = document.getElementById("ratingStatus");
  623. if (!c){
  624. c = document.getElementById("rankStatus");
  625. }
  626. const canvas = c;
  627. const ctx = canvas.getContext("2d");
  628. const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  629. const data = imageData.data;
  630. const oldColor = [
  631. [128,128,128],
  632. [128,64,0],
  633. [0,128,0],
  634. [0,192,192],
  635. [0,0,255],
  636. [192,192,0],
  637. [255,128,0],
  638. [255,0,0],
  639. [226,83,14],
  640. [192,192,192],
  641. [254,195,11],
  642. [132,230,255]
  643. ];
  644. const newColor = [
  645. [201,201,201],
  646. [168,85,2],
  647. [2,186,2],
  648. [0,192,192],
  649. [24,148,255],
  650. [192,192,0],
  651. [255,128,0],
  652. [255,0,0],
  653. [226,83,14],
  654. [192,192,192],
  655. [254,195,11],
  656. [132,230,255]
  657. ];
  658. let result = newColor.length;
  659. let jPlus = 0;
  660. if (location.search == "?graph=rank" || !!document.getElementById("rankStatus")){
  661. jPlus = 8;
  662. }
  663. for (let i = 0, len = data.length; i < len; i += 4) {
  664. for (let j = jPlus; j < oldColor.length; j += 1) {
  665. if (data[i] == oldColor[j][0] && data[i + 1] == oldColor[j][1] && data[i + 2] == oldColor[j][2]) {
  666. result = j;
  667. break;
  668. }
  669. }
  670. if (result < newColor.length) {
  671. data[i] = newColor[result][0];
  672. data[i + 1] = newColor[result][1];
  673. data[i + 2] = newColor[result][2];
  674. }
  675. else{
  676. data[i] = 255;
  677. data[i + 1] = 255;
  678. data[i + 2] = 255;
  679. }
  680. }
  681. imageData.data = data;
  682. ctx.putImageData(imageData, 0, 0);
  683. }
  684. </script>`
  685. );
  686. $(".mt-2.mb-2").append(
  687. `<script>
  688. window.onload = function(){
  689. createjs.Ticker.addEventListener("tick", pixelDataChange);
  690. };
  691. </script>`
  692. );
  693. }
  694. })();