☰

AtCoder Theme: Solarized Dark

Solarized Dark

当前为 2021-03-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         AtCoder Theme: Solarized Dark
  3. // @namespace    http://atcoder.jp/
  4. // @version      0.2.1
  5. // @description  Solarized Dark
  6. // @author       magurofly
  7. // @match        https://atcoder.jp/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.   'use strict';
  13.  
  14.   const editorFontSize = "10pt";
  15.  
  16.   const base03  = "#002b36";
  17.   const base02  = "#073642";
  18.   const base01  = "#586e75";
  19.   const base00  = "#657b83";
  20.   const base0   = "#839496";
  21.   const base1   = "#93a1a1";
  22.   const base2   = "#eee8d5";
  23.   const base3   = "#fdf6e3";
  24.   const yellow  = "#b58900";
  25.   const orange  = "#cb4b16";
  26.   const red     = "#dc322f";
  27.   const magenta = "#d33682";
  28.   const violet  = "#6c71c4";
  29.   const blue    = "#268bd2";
  30.   const cyan    = "#2aa198";
  31.   const green   = "#859900";
  32.  
  33.   document.head.insertAdjacentHTML("afterend", `
  34.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-solarized@1.0.2/bootstrap-solarized-dark.css" integrity="sha256-tB0RB3tqlptLWI8ldVHgQXM3/bu9TrxY8yqvLTZiX64=" crossorigin="anonymous">
  35.   <style>
  36.   /* https://gist.github.com/rmurphey/3073731 */
  37.   html * {
  38.     color-profile: sRGB;
  39.     rendering-intent: auto;
  40.   }
  41.   .cm-s-solarized-light {
  42.     background-color: ${base3};
  43.     color: ${base00};
  44.   }
  45.   .cm-s-solarized-light .emphasis {
  46.     font-weight: bold;
  47.   }
  48.   .cm-s-solarized-light .dotted {
  49.     border-bottom: 1px dotted ${orange};
  50.   }
  51.   .cm-s-solarized-light .CodeMirror-gutter {
  52.     background-color: ${base2};
  53.     border-right: 3px solid ${base2};
  54.   }
  55.   .cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
  56.     color: ${base1};
  57.   }
  58.   .cm-s-solarized-light .CodeMirror-cursor {
  59.     border-left-color: ${base03} !important;
  60.   }
  61.   .cm-s-solarized-light .CodeMirror-matchingbracket {
  62.     color: ${base03};
  63.     background-color: ${base2};
  64.     box-shadow: 0 0 10px ${base2};
  65.     font-weight: bold;
  66.   }
  67.   .cm-s-solarized-light .CodeMirror-nonmatchingbracket {
  68.     color: ${base03};
  69.     background-color: ${base2};
  70.     box-shadow: 0 0 10px ${base2};
  71.     font-weight: bold;
  72.     color: ${red};
  73.     border-bottom: 1px dotted ${orange};
  74.   }
  75.   .cm-s-solarized-light span.cm-keyword {
  76.     color: ${base00};
  77.     font-weight: bold;
  78.   }
  79.   .cm-s-solarized-light span.cm-atom {
  80.     color: ${cyan};
  81.   }
  82.   .cm-s-solarized-light span.cm-number {
  83.     color: ${base01};
  84.   }
  85.   .cm-s-solarized-light span.cm-def {
  86.     color: ${blue};
  87.   }
  88.   .cm-s-solarized-light span.cm-variable {
  89.     color: ${orange};
  90.   }
  91.   .cm-s-solarized-light span.cm-variable-2 {
  92.     color: ${orange};
  93.   }
  94.   .cm-s-solarized-light span.cm-variable-3 {
  95.     color: ${orange};
  96.   }
  97.   .cm-s-solarized-light span.cm-comment {
  98.     color: ${base1};
  99.   }
  100.   .cm-s-solarized-light span.cm-property {
  101.     color: ${yellow};
  102.   }
  103.   .cm-s-solarized-light span.cm-operator {
  104.     color: ${base00};
  105.   }
  106.   .cm-s-solarized-light span.cm-string {
  107.     color: ${violet};
  108.   }
  109.   .cm-s-solarized-light span.cm-error {
  110.     font-weight: bold;
  111.     border-bottom: 1px dotted ${orange};
  112.   }
  113.   .cm-s-solarized-light span.cm-bracket {
  114.     color: ${orange};
  115.   }
  116.   .cm-s-solarized-light span.cm-tag {
  117.     color: ${base00};
  118.   }
  119.   .cm-s-solarized-light span.cm-attribute {
  120.     color: ${base01};
  121.     font-weight: bold;
  122.   }
  123.   .cm-s-solarized-light span.cm-meta {
  124.     color: ${blue};
  125.   }
  126.   .cm-s-solarized-dark {
  127.     background-color: ${base03};
  128.     color: ${base0};
  129.   }
  130.   .cm-s-solarized-dark .emphasis {
  131.     font-weight: bold;
  132.   }
  133.   .cm-s-solarized-dark .dotted {
  134.     border-bottom: 1px dotted ${orange};
  135.   }
  136.   .cm-s-solarized-dark .CodeMirror-gutter {
  137.     background-color: ${base02};
  138.     border-right: 3px solid ${base02};
  139.   }
  140.   .cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
  141.     color: ${base01};
  142.   }
  143.   .cm-s-solarized-dark .CodeMirror-cursor {
  144.     border-left-color: ${base3} !important;
  145.   }
  146.   .cm-s-solarized-dark .CodeMirror-matchingbracket {
  147.     color: ${base3};
  148.     background-color: ${base02};
  149.     box-shadow: 0 0 10px ${base02};
  150.     font-weight: bold;
  151.   }
  152.   .cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
  153.     color: ${base3};
  154.     background-color: ${base02};
  155.     box-shadow: 0 0 10px ${base02};
  156.     font-weight: bold;
  157.     color: ${red};
  158.     border-bottom: 1px dotted ${orange};
  159.   }
  160.   .cm-s-solarized-dark span.cm-keyword {
  161.     color: ${base0};
  162.     font-weight: bold;
  163.   }
  164.   .cm-s-solarized-dark span.cm-atom {
  165.     color: ${cyan};
  166.   }
  167.   .cm-s-solarized-dark span.cm-number {
  168.     color: ${base1};
  169.   }
  170.   .cm-s-solarized-dark span.cm-def {
  171.     color: ${blue};
  172.   }
  173.   .cm-s-solarized-dark span.cm-variable {
  174.     color: ${orange};
  175.   }
  176.   .cm-s-solarized-dark span.cm-variable-2 {
  177.     color: ${orange};
  178.   }
  179.   .cm-s-solarized-dark span.cm-variable-3 {
  180.     color: ${orange};
  181.   }
  182.   .cm-s-solarized-dark span.cm-comment {
  183.     color: ${base01};
  184.   }
  185.   .cm-s-solarized-dark span.cm-property {
  186.     color: ${yellow};
  187.   }
  188.   .cm-s-solarized-dark span.cm-operator {
  189.     color: ${base0};
  190.   }
  191.   .cm-s-solarized-dark span.cm-string {
  192.     color: ${violet};
  193.   }
  194.   .cm-s-solarized-dark span.cm-error {
  195.     font-weight: bold;
  196.     border-bottom: 1px dotted ${orange};
  197.   }
  198.   .cm-s-solarized-dark span.cm-bracket {
  199.     color: ${orange};
  200.   }
  201.   .cm-s-solarized-dark span.cm-tag {
  202.     color: ${base0};
  203.   }
  204.   .cm-s-solarized-dark span.cm-attribute {
  205.     color: ${base1};
  206.     font-weight: bold;
  207.   }
  208.   .cm-s-solarized-dark span.cm-meta {
  209.     color: ${blue};
  210.   }
  211.   </style>
  212.   <style>
  213.   /* general */
  214.   body {
  215.     background-color: ${base03};
  216.     color: ${base00} !important;
  217.   }
  218.   pre {
  219.     background-color: ${base01};
  220.     color: ${base2};
  221.     display: block;
  222.     padding: 9.5px;
  223.     margin: 0 0 10px;
  224.     font-size: 13px;
  225.     font-family: monospace;
  226.     line-height: 1.42857143;
  227.     word-break: break-all;
  228.     word-wrap: break-word;
  229.     border: 1px solid #ccc;
  230.     border-radius: 3px;
  231.   }
  232.   
  233.   /* select2 */
  234.   .select2, .select2-dropdown, .select2-selection, .select2-selection__rendered {
  235.     background-color: ${base02} !important;
  236.     color: ${base1} !important;
  237.   }
  238.   
  239.   /* CodeMirror */
  240.   .CodeMirror {
  241.     font-size: ${editorFontSize};
  242.   }
  243.   
  244.   /* atcoder-specific */
  245.   .float-container>#main-container.container {
  246.     background-color: ${base03};
  247.   }
  248.   #header>div.header-inner {
  249.     background-color: ${base00} !important;
  250.   }
  251.   #main-div.float-container {
  252.     background-color: ${base02} !important;
  253.   }
  254.   .cnvtb-fixed {
  255.     background-color: ${base01};
  256.     position: sticky;
  257.   }
  258.   </style>  
  259. `);
  260.   $(".editor").data("editor").setOption("theme", "solarized-dark");
  261.  
  262.   console.info("solarized-dark");
  263. })();