Solarized Dark
Stan na
// ==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");
})();