Greasy Fork is available in English.

AtCoder-Style-Changer

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

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
  1. // ==UserScript==
  2. // @name AtCoder-Style-Changer
  3. // @namespace http://github.com/i-708
  4. // @version 1.2.2
  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. // タイマー
  198. $("#fixed-server-timer").css({
  199. color: bgColor,
  200. });
  201.  
  202. $("head").append(
  203. "<style type='text/css'> #header .header-page li.is-active a {color: #c3c3c3 !important; } </style>"
  204. );
  205.  
  206. $("head").append(
  207. "<style type='text/css'> #header .header-lang li a:hover {color: #c3c3c3 !important; } </style>"
  208. );
  209.  
  210. //ユーザーカラー
  211. userColor();
  212.  
  213. // ユーザページ
  214. $("body").css({
  215. "background-color": bgColor,
  216. color: baseColor,
  217. });
  218.  
  219. $("#main-container").css({
  220. "background-color": bgColor,
  221. });
  222.  
  223. $("button").css({
  224. color: baseColor,
  225. "background-color": bgColor,
  226. });
  227.  
  228. $(".btn.btn-default.active").css({
  229. "border-color": borderColor,
  230. });
  231.  
  232. $("ul").css({
  233. color: baseColor,
  234. "background-color": bgColor,
  235. });
  236.  
  237. $("head").append(
  238. "<style type='text/css'> .new-is-active {color: '#c3c3c3'; } </style>"
  239. );
  240.  
  241. $(
  242. ".glyphicon.glyphicon-resize-full, .glyphicon.glyphicon-search.black"
  243. ).css({
  244. color: baseColor,
  245. });
  246.  
  247. $(".form-control.input-sm").css({
  248. color: baseColor,
  249. "background-color": bgColor,
  250. });
  251.  
  252. $(".header-inner").css({
  253. "background-color": bgColor,
  254. "border-bottom-color": baseColor,
  255. });
  256.  
  257. $(".header-sub_page").css({
  258. "background-color": bgColor,
  259. });
  260. $("#footer").css({
  261. background: bgColor,
  262. });
  263.  
  264. $(".t-inner").css({
  265. "background-color": bgColor,
  266. });
  267.  
  268. $(".text-center.even").css({
  269. "background-color": bgColor,
  270. });
  271.  
  272. $(".text-center.odd").css({
  273. "background-color": bgColor,
  274. });
  275.  
  276. $("a").css({
  277. color: baseColor,
  278. "background-color": "transparent",
  279. });
  280.  
  281. // コンテスト成績証
  282. $(".panel-body").css({
  283. "background-color": bgColor,
  284. });
  285.  
  286. $(".panel-footer").css({
  287. "background-color": bgColor,
  288. });
  289.  
  290. $("tr").css({
  291. color: baseColor,
  292. });
  293.  
  294. $(".grey").css({
  295. color: "#f2f1f1",
  296. });
  297.  
  298. $(".dark-grey").css({
  299. color: "#ddd",
  300. });
  301.  
  302. $(".panel-primary").css({
  303. "border-color": borderColor,
  304. });
  305.  
  306. $(".panel-primary>.panel-heading").css({
  307. "border-color": borderColor,
  308. });
  309.  
  310. //コンテストページ
  311. $("tr").css({
  312. "background-color": bgColor,
  313. });
  314.  
  315. $("#contest-nav-tabs").css({
  316. "background-color": bgColor,
  317. });
  318.  
  319. $("li.active a").css({
  320. "background-color": bgColor,
  321. });
  322.  
  323. $(".insert-participant-box").css({
  324. "background-color": bgColor,
  325. });
  326.  
  327. $(".container-fluid").css({
  328. "background-color": bgColor,
  329. });
  330.  
  331. $("#main-div").css({
  332. background: bgColor,
  333. });
  334.  
  335. $("small.contest-duration, span.mr-2").css({
  336. color: baseColor,
  337. });
  338.  
  339. // 問題ページ
  340. $("pre").css({
  341. color: baseColor,
  342. background: bgColor,
  343. });
  344.  
  345. $(".btn-copy").css({
  346. color: baseColor,
  347. background: bgColor,
  348. });
  349.  
  350. $("span.select2-selection.select2-selection--single").css({
  351. color: baseColor,
  352. background: bgColor,
  353. });
  354.  
  355. $("span.select2-selection__rendered").css({
  356. color: baseColor,
  357. background: bgColor,
  358. });
  359.  
  360. // 問題文等のボーダー付与
  361. $("p code").css({
  362. color: "#ffaa2a",
  363. "background-color": "transparent",
  364. border: "white solid 1px",
  365. });
  366. $("section ul li code").css({
  367. color: "#ffaa2a",
  368. "background-color": "transparent",
  369. border: "white solid 1px",
  370. });
  371. $("ol li code").css({
  372. color: "#ffaa2a",
  373. "background-color": "transparent",
  374. border: "white solid 1px",
  375. });
  376.  
  377. // 解説ページのコードはボーダーなし
  378. $("pre ol li code").css({
  379. color: "#ffaa2a",
  380. "background-color": "transparent",
  381. border: "",
  382. });
  383.  
  384. $(".alert.alert-warning.alert-dismissible.fade.in").css({
  385. color: "#ffbe2b",
  386. "background-color": bgColor,
  387. border: "#ffdd38 solid 1px",
  388. });
  389.  
  390. /* コード画面*/
  391. $(".CodeMirror-scroll").css({
  392. "background-color": bgColor,
  393. });
  394.  
  395. // カーソル
  396. $("head").append(
  397. "<style type='text/css'>.CodeMirror-cursor{border-left: 1px solid white;border-right: none;width: 0;}</style>"
  398. );
  399.  
  400. // 文字色
  401. $("head").append(
  402. "<style type='text/css'>.cm-s-default .cm-builtin{color: #bb98ff}</style>"
  403. );
  404.  
  405. $("head").append(
  406. "<style type='text/css'>.cm-s-default .cm-keyword{color: #ed72ff}</style>"
  407. );
  408.  
  409. $("head").append(
  410. "<style type='text/css'>.cm-s-default .cm-def{color: #23c2ff}</style>"
  411. );
  412.  
  413. $("head").append(
  414. "<style type='text/css'>.cm-s-default .cm-string{color: #ff9a5f}</style>"
  415. );
  416.  
  417. $("head").append(
  418. "<style type='text/css'>.cm-s-default .cm-number{color: #11cb81}</style>"
  419. );
  420.  
  421. $("head").append(
  422. "<style type='text/css'>.cm-s-default .cm-comment{color: #9e9e9e}</style>"
  423. );
  424.  
  425. $(".CodeMirror-gutter").css({
  426. color: "white",
  427. "background-color": bgColor,
  428. });
  429.  
  430. $("head").append(
  431. "<style type='text/css'>div.CodeMirror-linenumber.CodeMirror-gutter-elt{color: white}</style>"
  432. );
  433.  
  434. $(".CodeMirror").css("color", "white");
  435.  
  436. //提出結果
  437. $(".panel-heading").css({
  438. color: baseColor,
  439. background: bgColor,
  440. });
  441.  
  442. $(".label-warning").css({
  443. background: "#d58617",
  444. });
  445.  
  446. $(".btn.btn-link.btn-xs").css({
  447. color: baseColor,
  448. background: bgColor,
  449. border: "solid 1px",
  450. });
  451.  
  452. //コード
  453. $("head").append(
  454. "<style type='text/css'>ol.linenums{color: #c3c3c3; background-color: #1c1b1b;}</style>"
  455. );
  456. $("head").append(
  457. "<style type='text/css'>ol.linenums li{background-color: black;}</style>"
  458. );
  459. $("head").append("<style type='text/css'>.com{color: #e11313;}</style>");
  460. $("head").append("<style type='text/css'>.str{color: #1ec91e;}</style>");
  461. $("head").append("<style type='text/css'>.kwd{color: #00d0ff;}</style>");
  462. $("head").append("<style type='text/css'>.pln{color: #dfdfdf;}</style>");
  463. $("head").append("<style type='text/css'>.pun{color: #ffe000;}</style>");
  464. $("head").append("<style type='text/css'>.lit{color: #41df00;}</style>");
  465. $("head").append("<style type='text/css'>.typ{color: #da01da;}</style>");
  466. // セレクター
  467. $("head").append(
  468. "<style type='text/css'>.select2-dropdown, .select2-search__field{background-color: black !important;color: #c3c3c3 !important;}</style>"
  469. );
  470.  
  471. //コードテスト
  472. $("head").append(
  473. "<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>"
  474. );
  475.  
  476. $("head").append(
  477. "<style type='text/css'>table.table.table-bordered tbody{color:#c3c3c3; background-color: black;}</style>"
  478. );
  479.  
  480. $("head").append(
  481. "<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>"
  482. );
  483.  
  484. $("head").append(
  485. "<style type='text/css'>.btn-primary{color:#c3c3c3 !important; background-color: black !important; border-color: #d10000 !important;}</style>"
  486. );
  487.  
  488. $("head").append(
  489. "<style type='text/css'>.btn.btn-lg.btn-default.center-block.mt-2{color:#c3c3c3 !important; background-color: black !important; border-color: #d10000 !important;}</style>"
  490. );
  491.  
  492. $("textarea#input.form-control.customtest-textarea").css({
  493. color: "white",
  494. background: bgColor,
  495. });
  496.  
  497. $("textarea#stdout.form-control.customtest-textarea").css({
  498. color: "white",
  499. background: bgColor,
  500. });
  501.  
  502. $("textarea#stderr.form-control.customtest-textarea").css({
  503. color: "white",
  504. background: bgColor,
  505. });
  506.  
  507. // Home
  508. $(
  509. "div.f-flex.f-flex_mg5.f-flex_mg0_s.f-flex_mb5_s div.f-flex4.f-flex12_s"
  510. ).css({
  511. border: "solid 1px",
  512. });
  513.  
  514. $("head").append(
  515. "<style type='text/css'>#header .header-page li a:hover{color:#c3c3c3 !important;}</style>"
  516. );
  517.  
  518. $("head").append(
  519. "<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>"
  520. );
  521.  
  522. $(".m-box_inner").css({
  523. "background-color": bgColor,
  524. });
  525.  
  526. $(".m-box-news_post::before").css({
  527. "background-color": bgColor,
  528. });
  529.  
  530. $("a.a-btn_bg.small").css({
  531. color: baseColor,
  532. "background-color": bgColor,
  533. });
  534.  
  535. $(".panel.panel-primary").css({
  536. color: baseColor,
  537. "background-color": bgColor,
  538. });
  539.  
  540. $("#keyvisual").css({
  541. color: baseColor,
  542. "background-color": bgColor,
  543. "background-blend-mode": "darken",
  544. });
  545. $("head").append(
  546. "<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>"
  547. );
  548.  
  549. $("head").append(
  550. "<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>"
  551. );
  552.  
  553. $(".status").css({
  554. "background-color": "#037abf",
  555. });
  556.  
  557. $(".status.status-gray").css({
  558. "background-color": "#717171",
  559. });
  560.  
  561. $(".status.status-green").css({
  562. "background-color": "#317f01",
  563. });
  564.  
  565. $(".a-btn_bg").css({
  566. border: "solid 1px",
  567. });
  568.  
  569. $(".a-btn_arrow").css({
  570. color: baseColor,
  571. "background-color": bgColor,
  572. });
  573.  
  574. $(".a-btn_arrow").css({
  575. cssText: $(".a-btn_arrow").attr("style") + "color: #c3c3c3 !important;",
  576. });
  577.  
  578. //PAST
  579. $(".center-block").css({
  580. "background-color": "#d6d6d6",
  581. });
  582.  
  583. //Jobs
  584. $(".f-flex3").css({
  585. border: "solid 1px",
  586. });
  587.  
  588. $(".m-list-job_company").css({
  589. color: baseColor,
  590. });
  591.  
  592. //順位表
  593. $("head").append(
  594. "<style type='text/css'>tr.info td{background-color: black !important;color: #c3c3c3 !important;}</style>"
  595. );
  596.  
  597. //ランキング
  598. $(".form-control").css({
  599. color: baseColor,
  600. "background-color": bgColor,
  601. });
  602.  
  603. //ダイアログ
  604. $(".modal-content").css({
  605. color: baseColor,
  606. "background-color": bgColor,
  607. });
  608.  
  609. $("html body").css({
  610. "background-color": bgColor,
  611. color: baseColor,
  612. });
  613.  
  614. $("html body").css("cssText", "color:#c3c3c3;background-image: none !important;background-color: black !important;");
  615. }
  616.  
  617. init();
  618.  
  619. // 監視
  620. if (document.URL.match("/standings")) {
  621. loadObservation();
  622. }
  623.  
  624. if (document.URL.match("/results")) {
  625. resultObservation();
  626. }
  627.  
  628. // 色変えコードの埋め込み
  629. const locationPathName = location.pathname;
  630. const correctLocation = location.pathname.match(/\/users\/[A-Za-z0-9_]*/);
  631. if (
  632. locationPathName == correctLocation &&
  633. (location.search == "" ||
  634. location.search == "?graph=rank" ||
  635. location.search == "?graph=rating")
  636. ) {
  637. $("head").append(
  638. `<script>
  639. function pixelDataChange(event) {
  640. var c = document.getElementById("ratingStatus");
  641. if (!c){
  642. c = document.getElementById("rankStatus");
  643. }
  644. const canvas = c;
  645. const ctx = canvas.getContext("2d");
  646. const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  647. const data = imageData.data;
  648. const oldColor = [
  649. [128,128,128],
  650. [128,64,0],
  651. [0,128,0],
  652. [0,192,192],
  653. [0,0,255],
  654. [192,192,0],
  655. [255,128,0],
  656. [255,0,0],
  657. [226,83,14],
  658. [192,192,192],
  659. [254,195,11],
  660. [132,230,255]
  661. ];
  662. const newColor = [
  663. [201,201,201],
  664. [168,85,2],
  665. [2,186,2],
  666. [0,192,192],
  667. [24,148,255],
  668. [192,192,0],
  669. [255,128,0],
  670. [255,0,0],
  671. [226,83,14],
  672. [192,192,192],
  673. [254,195,11],
  674. [132,230,255]
  675. ];
  676. let result = newColor.length;
  677. let jPlus = 0;
  678. if (location.search == "?graph=rank" || !!document.getElementById("rankStatus")){
  679. jPlus = 8;
  680. }
  681. for (let i = 0, len = data.length; i < len; i += 4) {
  682. for (let j = jPlus; j < oldColor.length; j += 1) {
  683. if (data[i] == oldColor[j][0] && data[i + 1] == oldColor[j][1] && data[i + 2] == oldColor[j][2]) {
  684. result = j;
  685. break;
  686. }
  687. }
  688. if (result < newColor.length) {
  689. data[i] = newColor[result][0];
  690. data[i + 1] = newColor[result][1];
  691. data[i + 2] = newColor[result][2];
  692. }
  693. else{
  694. data[i] = 255;
  695. data[i + 1] = 255;
  696. data[i + 2] = 255;
  697. }
  698. }
  699. imageData.data = data;
  700. ctx.putImageData(imageData, 0, 0);
  701. }
  702. </script>`
  703. );
  704. $(".mt-2.mb-2").append(
  705. `<script>
  706. window.onload = function(){
  707. createjs.Ticker.addEventListener("tick", pixelDataChange);
  708. };
  709. </script>`
  710. );
  711. }
  712. })();