☰

AtCoder Theme: Solarized Dark

Solarized Dark

Fra 19.03.2021. Se den seneste versjonen.

// ==UserScript==
// @name         AtCoder Theme: Solarized Dark
// @namespace    http://atcoder.jp/
// @version      0.2.1
// @description  Solarized Dark
// @author       magurofly
// @match        https://atcoder.jp/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  const editorFontSize = "10pt";

  const base03  = "#002b36";
  const base02  = "#073642";
  const base01  = "#586e75";
  const base00  = "#657b83";
  const base0   = "#839496";
  const base1   = "#93a1a1";
  const base2   = "#eee8d5";
  const base3   = "#fdf6e3";
  const yellow  = "#b58900";
  const orange  = "#cb4b16";
  const red     = "#dc322f";
  const magenta = "#d33682";
  const violet  = "#6c71c4";
  const blue    = "#268bd2";
  const cyan    = "#2aa198";
  const green   = "#859900";

  document.head.insertAdjacentHTML("afterend", `
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/bootstrap-solarized-dark.css" integrity="sha256-tB0RB3tqlptLWI8ldVHgQXM3/bu9TrxY8yqvLTZiX64=" crossorigin="anonymous">
  <style>
  /* https://gist.github.com/rmurphey/3073731 */
  html * {
    color-profile: sRGB;
    rendering-intent: auto;
  }
  .cm-s-solarized-light {
    background-color: ${base3};
    color: ${base00};
  }
  .cm-s-solarized-light .emphasis {
    font-weight: bold;
  }
  .cm-s-solarized-light .dotted {
    border-bottom: 1px dotted ${orange};
  }
  .cm-s-solarized-light .CodeMirror-gutter {
    background-color: ${base2};
    border-right: 3px solid ${base2};
  }
  .cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
    color: ${base1};
  }
  .cm-s-solarized-light .CodeMirror-cursor {
    border-left-color: ${base03} !important;
  }
  .cm-s-solarized-light .CodeMirror-matchingbracket {
    color: ${base03};
    background-color: ${base2};
    box-shadow: 0 0 10px ${base2};
    font-weight: bold;
  }
  .cm-s-solarized-light .CodeMirror-nonmatchingbracket {
    color: ${base03};
    background-color: ${base2};
    box-shadow: 0 0 10px ${base2};
    font-weight: bold;
    color: ${red};
    border-bottom: 1px dotted ${orange};
  }
  .cm-s-solarized-light span.cm-keyword {
    color: ${base00};
    font-weight: bold;
  }
  .cm-s-solarized-light span.cm-atom {
    color: ${cyan};
  }
  .cm-s-solarized-light span.cm-number {
    color: ${base01};
  }
  .cm-s-solarized-light span.cm-def {
    color: ${blue};
  }
  .cm-s-solarized-light span.cm-variable {
    color: ${orange};
  }
  .cm-s-solarized-light span.cm-variable-2 {
    color: ${orange};
  }
  .cm-s-solarized-light span.cm-variable-3 {
    color: ${orange};
  }
  .cm-s-solarized-light span.cm-comment {
    color: ${base1};
  }
  .cm-s-solarized-light span.cm-property {
    color: ${yellow};
  }
  .cm-s-solarized-light span.cm-operator {
    color: ${base00};
  }
  .cm-s-solarized-light span.cm-string {
    color: ${violet};
  }
  .cm-s-solarized-light span.cm-error {
    font-weight: bold;
    border-bottom: 1px dotted ${orange};
  }
  .cm-s-solarized-light span.cm-bracket {
    color: ${orange};
  }
  .cm-s-solarized-light span.cm-tag {
    color: ${base00};
  }
  .cm-s-solarized-light span.cm-attribute {
    color: ${base01};
    font-weight: bold;
  }
  .cm-s-solarized-light span.cm-meta {
    color: ${blue};
  }
  .cm-s-solarized-dark {
    background-color: ${base03};
    color: ${base0};
  }
  .cm-s-solarized-dark .emphasis {
    font-weight: bold;
  }
  .cm-s-solarized-dark .dotted {
    border-bottom: 1px dotted ${orange};
  }
  .cm-s-solarized-dark .CodeMirror-gutter {
    background-color: ${base02};
    border-right: 3px solid ${base02};
  }
  .cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
    color: ${base01};
  }
  .cm-s-solarized-dark .CodeMirror-cursor {
    border-left-color: ${base3} !important;
  }
  .cm-s-solarized-dark .CodeMirror-matchingbracket {
    color: ${base3};
    background-color: ${base02};
    box-shadow: 0 0 10px ${base02};
    font-weight: bold;
  }
  .cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
    color: ${base3};
    background-color: ${base02};
    box-shadow: 0 0 10px ${base02};
    font-weight: bold;
    color: ${red};
    border-bottom: 1px dotted ${orange};
  }
  .cm-s-solarized-dark span.cm-keyword {
    color: ${base0};
    font-weight: bold;
  }
  .cm-s-solarized-dark span.cm-atom {
    color: ${cyan};
  }
  .cm-s-solarized-dark span.cm-number {
    color: ${base1};
  }
  .cm-s-solarized-dark span.cm-def {
    color: ${blue};
  }
  .cm-s-solarized-dark span.cm-variable {
    color: ${orange};
  }
  .cm-s-solarized-dark span.cm-variable-2 {
    color: ${orange};
  }
  .cm-s-solarized-dark span.cm-variable-3 {
    color: ${orange};
  }
  .cm-s-solarized-dark span.cm-comment {
    color: ${base01};
  }
  .cm-s-solarized-dark span.cm-property {
    color: ${yellow};
  }
  .cm-s-solarized-dark span.cm-operator {
    color: ${base0};
  }
  .cm-s-solarized-dark span.cm-string {
    color: ${violet};
  }
  .cm-s-solarized-dark span.cm-error {
    font-weight: bold;
    border-bottom: 1px dotted ${orange};
  }
  .cm-s-solarized-dark span.cm-bracket {
    color: ${orange};
  }
  .cm-s-solarized-dark span.cm-tag {
    color: ${base0};
  }
  .cm-s-solarized-dark span.cm-attribute {
    color: ${base1};
    font-weight: bold;
  }
  .cm-s-solarized-dark span.cm-meta {
    color: ${blue};
  }
  </style>
  <style>
  /* general */
  body {
    background-color: ${base03};
    color: ${base00} !important;
  }
  pre {
    background-color: ${base01};
    color: ${base2};
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    font-family: monospace;
    line-height: 1.42857143;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  
  /* select2 */
  .select2, .select2-dropdown, .select2-selection, .select2-selection__rendered {
    background-color: ${base02} !important;
    color: ${base1} !important;
  }
  
  /* CodeMirror */
  .CodeMirror {
    font-size: ${editorFontSize};
  }
  
  /* atcoder-specific */
  .float-container>#main-container.container {
    background-color: ${base03};
  }
  #header>div.header-inner {
    background-color: ${base00} !important;
  }
  #main-div.float-container {
    background-color: ${base02} !important;
  }
  .cnvtb-fixed {
    background-color: ${base01};
    position: sticky;
  }
  </style>  
`);
  $(".editor").data("editor").setOption("theme", "solarized-dark");

  console.info("solarized-dark");
})();