Solarized Light Theme for CoderPad.io - inject the css via Chrome without browser extension

README.md

Many companies use coderpad.io for interviews and if you have eye strain with the monokai theme (dark background), you can change the theme on your browser by injecting the css.

##Installation Open coderpad.io editor and inject contents of the style.css above. Open inspect via right click and edit the body block as HTML, then paste in the contents of style.html as its own element inside

style.html

<style media="screen" type="text/css">
body.pad {
    background: #fdf6e3;
    color: #657b83;
}
div.CodeMirror.CodeMirror-wrap.cm-s-monokai .CodeMirror-activeline-background {
    background: #eee;
}

.cm-s-monokai span.cm-variable {
    color: #000000;
}

.cm-s-monokai.CodeMirror {
    background: #272822;
    color: #000;
}

.cm-s-monokai {
    background-color: #fdf6e3;
    color: #657b83;
}
.cm-s-monokai .emphasis {
    font-weight: bold;
}
.cm-s-monokai .dotted {
    border-bottom: 1px dotted #cb4b16;
}
.cm-s-monokai .CodeMirror-gutter {
    background-color: #eee8d5;
    border-right: 3px solid #eee8d5;
}
.cm-s-monokai .CodeMirror-gutter .CodeMirror-gutter-text {
    color: #93a1a1;
}
.cm-s-monokai .CodeMirror-cursor {
    border-left-color: #002b36 !important;
}
.cm-s-monokai .CodeMirror-matchingbracket {
    color: #002b36 !important;
    background-color: #eee8d5;
    box-shadow: 0 0 10px #eee8d5;
    font-weight: bold;
}
.cm-s-monokai .CodeMirror-nonmatchingbracket {
    background-color: #eee8d5;
    box-shadow: 0 0 10px #eee8d5;
    font-weight: bold;
    color: #000 !important;
    border-bottom: 1px dotted #cb4b16;
}
.cm-s-monokai span.cm-keyword {
    color: #657b83;
    font-weight: bold;
}
.cm-s-monokai span.cm-atom {
    color: #2aa198;
}
.cm-s-monokai span.cm-number {
    color: #586e75;
}
.cm-s-monokai span.cm-def {
    color: #268bd2;
}
.cm-s-monokai span.cm-variable {
    color: #cb4b16;
}
.cm-s-monokai span.cm-variable-2 {
    color: #cb4b16;
}
.cm-s-monokai span.cm-variable-3 {
    color: #cb4b16;
}
.cm-s-monokai span.cm-comment {
    color: #93a1a1;
}
.cm-s-monokai span.cm-property {
    color: #b58900;
}
.cm-s-monokai span.cm-operator {
    color: #657b83;
}
.cm-s-monokai span.cm-string {
    color: #6c71c4;
}
.cm-s-monokai span.cm-error {
    font-weight: bold;
    border-bottom: 1px dotted #cb4b16;
}
.cm-s-monokai span.cm-bracket {
    color: #cb4b16;
}
.cm-s-monokai span.cm-tag {
    color: #657b83;
}
.cm-s-monokai span.cm-attribute {
    color: #586e75;
    font-weight: bold;
}
.cm-s-monokai span.cm-meta {
    color: #268bd2;
}









.CodeMirror-cursor {
    position: absolute
}

.CodeMirror-measure pre {
    position: static
}

div.CodeMirror-cursors {
    visibility: hidden;
    position: relative;
    z-index: 3
}

div.CodeMirror-dragcursors {
    visibility: visible
}

.CodeMirror-focused div.CodeMirror-cursors {
    visibility: visible
}

.CodeMirror-selected {
    background: #0000cc;
}

.CodeMirror-focused .CodeMirror-selected {
    background: #0000cc;
}

.CodeMirror-crosshair {
    cursor: crosshair
}



body.pad #editor #editor-widget .CodeMirror-linenumber {
    color: #000000;
}

body.pad #editor #editor-widget .CodeMirror-cursor {
    border-left-width: 3px
}

body.pad #editor #editor-widget .CodeMirror.cm-fat-cursor .CodeMirror-cursor {
    background: #0000cc;
    border-left-width: 0
}

body.pad #editor #editor-widget .cm-animate-fat-cursor {
    width: auto;
    border: 0;
    background-color: #000000;
}



.monokai.base03 {
    color: #002b36
}

.monokai.base02 {
    color: #073642
}

.monokai.base01 {
    color: #586e75
}

.monokai.base00 {
    color: #657b83
}

.monokai.base0 {
    color: #839496
}

.monokai.base1 {
    color: #93a1a1
}

.monokai.base2 {
    color: #eee8d5
}

.monokai.base3 {
    color: #fdf6e3
}

.monokai.solar-yellow {
    color: #b58900
}

.monokai.solar-orange {
    color: #cb4b16
}

.monokai.solar-red {
    color: #dc322f
}

.monokai.solar-magenta {
    color: #d33682
}

.monokai.solar-violet {
    color: #6c71c4
}

.monokai.solar-blue {
    color: #268bd2
}

.monokai.solar-cyan {
    color: #2aa198
}

.monokai.solar-green {
    color: #859900
}

.cm-s-monokai {
    line-height: 1.45em;
    color-profile: sRGB;
    rendering-intent: auto
}

.cm-s-monokai.cm-s-dark {
    color: #839496;
    background-color: #002b36;
    text-shadow: #002b36 0 1px
}

.cm-s-monokai.cm-s-light {
    background-color: #fdf6e3;
    color: #657b83;
    text-shadow: #eee8d5 0 1px
}

.cm-s-monokai .CodeMirror-widget {
    text-shadow: none
}

.cm-s-monokai .cm-header {
    color: #586e75
}

.cm-s-monokai .cm-quote {
    color: #93a1a1
}

.cm-s-monokai .cm-keyword {
    color: #cb4b16
}

.cm-s-monokai .cm-atom {
    color: #d33682
}

.cm-s-monokai .cm-number {
    color: #d33682
}

.cm-s-monokai .cm-def {
    color: #2aa198
}

.cm-s-monokai .cm-variable {
    color: #839496
}

.cm-s-monokai .cm-variable-2 {
    color: #b58900
}

.cm-s-monokai .cm-variable-3 {
    color: #6c71c4
}

.cm-s-monokai .cm-property {
    color: #2aa198
}

.cm-s-monokai .cm-operator {
    color: #6c71c4
}

.cm-s-monokai .cm-comment {
    color: #586e75;
    font-style: italic
}

.cm-s-monokai .cm-string {
    color: #859900
}

.cm-s-monokai .cm-string-2 {
    color: #b58900
}

.cm-s-monokai .cm-meta {
    color: #859900
}

.cm-s-monokai .cm-qualifier {
    color: #b58900
}

.cm-s-monokai .cm-builtin {
    color: #d33682
}

.cm-s-monokai .cm-bracket {
    color: #cb4b16
}

.cm-s-monokai .CodeMirror-matchingbracket {
    color: #859900
}

.cm-s-monokai .CodeMirror-nonmatchingbracket {
    color: #dc322f
}

.cm-s-monokai .cm-tag {
    color: #93a1a1
}

.cm-s-monokai .cm-attribute {
    color: #2aa198
}

.cm-s-monokai .cm-hr {
    color: transparent;
    border-top: 1px solid #586e75;
    display: block
}

.cm-s-monokai .cm-link {
    color: #93a1a1;
    cursor: pointer
}

.cm-s-monokai .cm-special {
    color: #6c71c4
}

.cm-s-monokai .cm-em {
    color: #999;
    text-decoration: underline;
    text-decoration-style: dotted
}

.cm-s-monokai .cm-strong {
    color: #eee
}

.cm-s-monokai .cm-error, .cm-s-monokai .cm-invalidchar {
    color: #586e75;
    border-bottom: 1px dotted #dc322f
}

.cm-s-monokai.cm-s-dark div.CodeMirror-selected {
    background: #073642
}

.cm-s-monokai.cm-s-dark.CodeMirror ::selection {
    background: rgba(7, 54, 66, 0.99)
}

.cm-s-monokai.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection {
    background: rgba(7, 54, 66, 0.99)
}

.cm-s-monokai.cm-s-light div.CodeMirror-selected {
    background: #eee8d5
}

.cm-s-monokai.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection {
    background: #eee8d5
}

.cm-s-monokai.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-ligh .CodeMirror-line > span::-moz-selection, .cm-s-ligh .CodeMirror-line > span > span::-moz-selection {
    background: #eee8d5
}

.cm-s-monokai.CodeMirror {
    -moz-box-shadow: inset 7px 0 12px -6px #000;
    -webkit-box-shadow: inset 7px 0 12px -6px #000;
    box-shadow: inset 7px 0 12px -6px #000
}

.cm-s-monokai .CodeMirror-gutters {
    border-right: 1px solid
}

.cm-s-monokai.cm-s-dark .CodeMirror-gutters {
    background-color: #002b36;
    border-color: #00232c
}

.cm-s-monokai.cm-s-dark .CodeMirror-linenumber {
    text-shadow: #021014 0 -1px
}

.cm-s-monokai.cm-s-light .CodeMirror-gutters {
    background-color: #fdf6e3;
    border-color: #eee8d5
}

.cm-s-monokai .CodeMirror-linenumber {
    color: #586e75;
    padding: 0 5px
}

.cm-s-monokai .CodeMirror-guttermarker-subtle {
    color: #586e75
}

.cm-s-monokai.cm-s-dark .CodeMirror-guttermarker {
    color: #ddd
}

.cm-s-monokai.cm-s-light .CodeMirror-guttermarker {
    color: #cb4b16
}

.cm-s-monokai .CodeMirror-gutter .CodeMirror-gutter-text {
    color: #586e75
}

.cm-s-monokai .CodeMirror-cursor {
    border-left: 1px solid #819090
}

.cm-s-monokai.cm-s-dark .CodeMirror-activeline-background {
    background: rgba(255, 255, 255, 0.1)
}

.cm-s-monokai.cm-s-light .CodeMirror-activeline-background {
    background: rgba(0, 0, 0, 0.1)
}


div.CodeMirror.CodeMirror-wrap.cm-s-monokai .CodeMirror-activeline-background {
    background: #f7f7f7
}

div.CodeMirror.CodeMirror-wrap span.CodeMirror-nonmatchingbracket {
    color: #000 !important;
}

.CodeMirror-line{
    color:#000000;
}
</style>