AtCoder Theme: Solarized Dark

Solarized Dark

Per 19-03-2021. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==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");
})();