userchrome.css

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

.CodeMirror-scroll > .CodeMirror-sizer {
  max-width: none !important;
}

.CodeMirror-scroll {
  background-color: #f7f1e3;
}
.CodeMirror-lines {
  padding: 0 5px 0;
}
.cm-jn-code-block-background {
  /* background-color: #e8ffc0 !important; */
  background-color: #272822 !important;
  color: #f8f8f2 !important;
}
.cm-jn-code-block {
  padding-left: 5px !important;
}
.CodeMirror .cm-jn-code-block {
  font-family: "Lucida Console", Consolas, Courier, monospace !important;
}

/* アウトラインプラグイン */
.gCTJhE {
  width: 100% !important;
}


:root .cm-jn-monospace {
  font-family: "Lucida Console", Consolas, Courier, monospace !important;
}
/* :root .CodeMirror * {
  font-family: "Lucida Console", Consolas, Courier, monospace !important;
} */
/* :root div, span, a {
  font-family: "Lucida Console", Consolas, Courier, monospace !important;
} */


.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4 {
  display: block;
  color: #000000;
  font-size: 20px !important;
  text-align: left;
  padding-bottom: initial;
}
.cm-header-1 {
  color: #ffffff !important;
  /* margin: 20px 0 10px 0; */
  background-color: #014471;
  background-repeat: no-repeat;
  line-height: 40px !important;
  padding-left: 6px;
  background-image:linear-gradient(#0068ad 6%, #014471 18%, #0068ad 75%, #0068ad 94%, #014471 100%);
}
.cm-header-2, .big_sponsor {
  background-color: #e0e0e0;
  background-repeat: no-repeat;
  line-height: 30px !important;
  padding-left: 10px;
  border-left: #3366FF 25px solid;
  /* margin: 40px 0 20px 0; */
  font-weight: bold;
  background-image:linear-gradient(#e0e0e0 10%, #eaebeb 40%, #fdfdfd 92%, #e0e0e0 100%);
}

.cm-header-3, .cm-header-4 {
  background-color: #e0e0e0;
  font-size:17px;
  line-height: 22px !important;
  padding-left: 10px;
  /* margin: 15px 0 15px 0; */
  font-weight: bold;
  padding-left: 10px;
  border-left: #8cc63f 10px solid;
}
.cm-header-4 {
  border-left: #CC99CC 10px solid;
  font-size:14px;
  color: black !important;
}


/*
https://codemirror.net/theme/monokai.css
を参考にカスタマイズ
 */

/* .cm-s-default.CodeMirror { background: #272822; color: #f8f8f2; } */
/* .cm-s-default .CodeMirror-line::selection, .cm-s-default .CodeMirror-line > span::selection, .cm-s-default .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
.cm-s-default .CodeMirror-line::-moz-selection, .cm-s-default .CodeMirror-line > span::-moz-selection, .cm-s-default .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
.cm-s-default .CodeMirror-gutters { background: #272822; border-right: 0px; }
.cm-s-default .CodeMirror-guttermarker { color: white; }
.cm-s-default .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-default .CodeMirror-linenumber { color: #d0d0d0; } */


.cm-s-default div.CodeMirror-selected { background-color: #bd71bd; }

.cm-s-default .CodeMirror-cursor { border-left: 3px solid #77a51c !important; }

.cm-s-default span.cm-comment { color: #75715e !important; }
.cm-s-default span.cm-atom { color: #e6d93a !important; }
.cm-s-default span.cm-number { color: #ae81ff !important; }

.cm-s-default span.cm-comment.cm-attribute { color: #97b757 !important; }
.cm-s-default span.cm-comment.cm-def { color: #bc9262 !important; }
.cm-s-default span.cm-comment.cm-tag { color: #eaaec4 !important; }
.cm-s-default span.cm-comment.cm-type { color: #5998a6 !important; }

.cm-s-default span.cm-property, .cm-s-default span.cm-attribute { color: #a6e22e !important; }
.cm-s-default span.cm-keyword { color: #FF8484 !important; }
.cm-s-default span.cm-builtin { color: #66d9ef !important; }
.cm-s-default span.cm-string { color: #e6db74 !important; }

.cm-s-default span.cm-operator { color: #f8f8f2 !important; }
.cm-s-default span.cm-null { color: #97860f !important; }
.cm-s-default span.cm-variable { color: #f8f8f2 !important; }
.cm-s-default span.cm-variable-2.cm-jn-monospace { color: #A6E22E !important; }
.cm-s-default span.cm-variable-3, .cm-s-default span.cm-type { color: #66d9ef !important; }
.cm-s-default span.cm-def { color: #f8f8f0 !important; }
.cm-s-default span.cm-bracket { color: #f8f8f2 !important; }
.cm-s-default span.cm-tag { color: #bc6283 !important; }
/* .cm-s-default span.cm-header { color: #ae81ff !important; } */
.cm-s-default span.cm-link { color: #ae81ff !important; }
.cm-s-default span.cm-error { background: #f92672; color: #f8f8f0 !important; }

.cm-s-default .CodeMirror-activeline-background { background: #373831 !important; }
.cm-s-default .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}


.cm-s-default span.cm-comment {color: #D1A3BB !important;}

userstyle.css

/* For styling the rendered Markdown */
/*:root{
  --select-text-font-color:inherit !important;
}*/

body {
  font-family:"Arial",'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Osaka,sans-serif !important;
  line-height: 1.3rem;
  background-color: #f7f1e3;
}

h1, h2, h3 {
  color: black;
  font-size: 20px;
  text-align: left;
  padding-bottom: initial;
}
h1 {
  margin: 30px 0 10px 0;
  background-color: #014471;
  background-repeat: no-repeat;
  color: #ffffff;
  line-height: 40px;
  padding-left: 6px;
  background-image:linear-gradient(#0068ad 6%, #014471 18%, #0068ad 75%, #0068ad 94%, #014471 100%);
}
h2, .big_sponsor {
  background-color: #e0e0e0;
  background-repeat: no-repeat;
  line-height: 30px;
  padding-left: 10px;
  border-left: #3366FF 25px solid;
  margin: 40px 0 20px 0;
  font-weight: bold;
  color: #333333;
  background-image:linear-gradient(#e0e0e0 10%, #eaebeb 40%, #fdfdfd 92%, #e0e0e0 100%);
}

h3, h4 {
  background-color: #e0e0e0;
  font-size:17px;
  line-height: 22px;
  padding-left: 10px;
  margin: 15px 0 15px 0;
  font-weight: bold;
  color: #333333;
  padding-left: 10px;
  border-left: #8cc63f 10px solid;
}
h4 {
  border-left: #CC99CC 10px solid;
  font-size:14px;
}
li {
  margin-bottom: .2em;
}


#write {
    max-width: 1200px;
    margin: 0;
    padding: 20px;
    padding-bottom: 100px;
}

.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}

#rendered-md {
  max-width: none !important;
}

/*
https://highlightjs.org/static/demo/
https://highlightjs.org/download/
*/


/*
Dracula Theme v1.2.0

https://github.com/zenorocha/dracula-theme

Copyright 2015, All rights reserved

Code licensed under the MIT license
http://zenorocha.mit-license.org

@author Éverton Ribeiro <nuxlli@gmail.com>
@author Zeno Rocha <hi@zenorocha.com>
*/

code {
  font-family: "Lucida Console", Consolas, Courier, monospace !important;
}
pre.hljs {
  line-height: 1.35rem !important;
  font-size: 0.9rem !important;
}


.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #282a36;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
  color: #FF8484;
}
.hljs-literal {
  color: #F77669;
}

/* ↓ 階層になっている */
.hljs-function .hljs-keyword,
.hljs-class .hljs-keyword {
  color: #66D9EF;
}
.hljs-class .hljs-title {
  color: #fff;
}



.hljs,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-string {
    color: #fff;
}
.hljs-title,
.hljs-name,
.hljs-type,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #A6E22E;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
  color: #D1A3BB;
  font-style: normal;
}

.hljs-built_in {
  color: #ffb1b1 !important;
}

.hljs-emphasis {
  font-style: italic;
}