AtCoder Theme: Solarized Dark

Solarized Dark

As of 19.03.2021. See ბოლო ვერსია.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         AtCoder Theme: Solarized Dark
// @namespace    http://atcoder.jp/
// @version      0.2
// @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: #fdf6e3;
  color: #657b83;
}
.cm-s-solarized-light .emphasis {
  font-weight: bold;
}
.cm-s-solarized-light .dotted {
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light .CodeMirror-gutter {
  background-color: #eee8d5;
  border-right: 3px solid #eee8d5;
}
.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #93a1a1;
}
.cm-s-solarized-light .CodeMirror-cursor {
  border-left-color: #002b36 !important;
}
.cm-s-solarized-light .CodeMirror-matchingbracket {
  color: #002b36;
  background-color: #eee8d5;
  box-shadow: 0 0 10px #eee8d5;
  font-weight: bold;
}
.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
  color: #002b36;
  background-color: #eee8d5;
  box-shadow: 0 0 10px #eee8d5;
  font-weight: bold;
  color: #dc322f;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-keyword {
  color: #657b83;
  font-weight: bold;
}
.cm-s-solarized-light span.cm-atom {
  color: #2aa198;
}
.cm-s-solarized-light span.cm-number {
  color: #586e75;
}
.cm-s-solarized-light span.cm-def {
  color: #268bd2;
}
.cm-s-solarized-light span.cm-variable {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-variable-2 {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-variable-3 {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-comment {
  color: #93a1a1;
}
.cm-s-solarized-light span.cm-property {
  color: #b58900;
}
.cm-s-solarized-light span.cm-operator {
  color: #657b83;
}
.cm-s-solarized-light span.cm-string {
  color: #6c71c4;
}
.cm-s-solarized-light span.cm-error {
  font-weight: bold;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-bracket {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-tag {
  color: #657b83;
}
.cm-s-solarized-light span.cm-attribute {
  color: #586e75;
  font-weight: bold;
}
.cm-s-solarized-light span.cm-meta {
  color: #268bd2;
}
.cm-s-solarized-dark {
  background-color: #002b36;
  color: #839496;
}
.cm-s-solarized-dark .emphasis {
  font-weight: bold;
}
.cm-s-solarized-dark .dotted {
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark .CodeMirror-gutter {
  background-color: #073642;
  border-right: 3px solid #073642;
}
.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #586e75;
}
.cm-s-solarized-dark .CodeMirror-cursor {
  border-left-color: #fdf6e3 !important;
}
.cm-s-solarized-dark .CodeMirror-matchingbracket {
  color: #fdf6e3;
  background-color: #073642;
  box-shadow: 0 0 10px #073642;
  font-weight: bold;
}
.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
  color: #fdf6e3;
  background-color: #073642;
  box-shadow: 0 0 10px #073642;
  font-weight: bold;
  color: #dc322f;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-keyword {
  color: #839496;
  font-weight: bold;
}
.cm-s-solarized-dark span.cm-atom {
  color: #2aa198;
}
.cm-s-solarized-dark span.cm-number {
  color: #93a1a1;
}
.cm-s-solarized-dark span.cm-def {
  color: #268bd2;
}
.cm-s-solarized-dark span.cm-variable {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-2 {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-3 {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-comment {
  color: #586e75;
}
.cm-s-solarized-dark span.cm-property {
  color: #b58900;
}
.cm-s-solarized-dark span.cm-operator {
  color: #839496;
}
.cm-s-solarized-dark span.cm-string {
  color: #6c71c4;
}
.cm-s-solarized-dark span.cm-error {
  font-weight: bold;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-bracket {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-tag {
  color: #839496;
}
.cm-s-solarized-dark span.cm-attribute {
  color: #93a1a1;
  font-weight: bold;
}
.cm-s-solarized-dark span.cm-meta {
  color: #268bd2;
}
</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");
})();