Dark mode: use monokai style from pygments

Fix #152
This commit is contained in:
Klaas van Schelven
2025-07-17 09:45:22 +02:00
parent 99f782f4e3
commit 45ad2aceec
3 changed files with 88 additions and 3 deletions

View File

@@ -56,7 +56,7 @@
{% for frame in exception.stacktrace.frames %}
{% with frame=frame|pygmentize:event.platform %}
<div class="bg-white dark:bg-slate-900 w-full font-mono"> {# per frame div #}
<div class="bg-white dark:bg-slate-700 w-full font-mono"> {# per frame div #}
{% if frame.raise_point %}<span id="raise"></span>{% endif %}
{% if frame.in_app %}<span id="in-app"></span>{% endif %}
{% if forloop.first and forloop.parentloop.first %}<span id="first-frame"></span>{% endif %}
@@ -116,7 +116,7 @@
{% for line in frame.pre_context %}<li class="pl-6"><div class="whitespace-pre w-full inline pr-6">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
{# the gradient is a workaround, because I can't get a full-width elem going here inside the overflow #}
{# when some other line is overflowing. Using the gradient hides this fact (it happens to also look good) #}
<li class="pl-6 bg-gradient-to-r from-slate-300 font-bold w-full"><div class="whitespace-pre w-full inline pr-6">{{ frame.context_line }} {# leave space to avoid collapse #}</div></li>
<li class="pl-6 bg-gradient-to-r from-slate-300 dark:from-slate-950 font-bold w-full"><div class="whitespace-pre w-full inline pr-6">{{ frame.context_line }} {# leave space to avoid collapse #}</div></li>
{% for line in frame.post_context %}<li class="pl-6"><div class="whitespace-pre w-full inline pr-6">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
</ol>
</div>

File diff suppressed because one or more lines are too long

View File

@@ -214,6 +214,91 @@ pre { line-height: 125%; }
.syntax-coloring .vm { color: #19177C } /* Name.Variable.Magic */
.syntax-coloring .il { color: #666666 } /* Literal.Number.Integer.Long */
[data-theme="dark"] td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
[data-theme="dark"] span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
[data-theme="dark"] td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
[data-theme="dark"] span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
[data-theme="dark"] .syntax-coloring .hll { background-color: #49483e }
[data-theme="dark"] .syntax-coloring { background: #272822; color: #F8F8F2 }
[data-theme="dark"] .syntax-coloring .c { color: #959077 } /* Comment */
[data-theme="dark"] .syntax-coloring .err { color: #ED007E; background-color: #1E0010 } /* Error */
[data-theme="dark"] .syntax-coloring .esc { color: #F8F8F2 } /* Escape */
[data-theme="dark"] .syntax-coloring .g { color: #F8F8F2 } /* Generic */
[data-theme="dark"] .syntax-coloring .k { color: #66D9EF } /* Keyword */
[data-theme="dark"] .syntax-coloring .l { color: #AE81FF } /* Literal */
[data-theme="dark"] .syntax-coloring .n { color: #F8F8F2 } /* Name */
[data-theme="dark"] .syntax-coloring .o { color: #FF4689 } /* Operator */
[data-theme="dark"] .syntax-coloring .x { color: #F8F8F2 } /* Other */
[data-theme="dark"] .syntax-coloring .p { color: #F8F8F2 } /* Punctuation */
[data-theme="dark"] .syntax-coloring .ch { color: #959077 } /* Comment.Hashbang */
[data-theme="dark"] .syntax-coloring .cm { color: #959077 } /* Comment.Multiline */
[data-theme="dark"] .syntax-coloring .cp { color: #959077 } /* Comment.Preproc */
[data-theme="dark"] .syntax-coloring .cpf { color: #959077 } /* Comment.PreprocFile */
[data-theme="dark"] .syntax-coloring .c1 { color: #959077 } /* Comment.Single */
[data-theme="dark"] .syntax-coloring .cs { color: #959077 } /* Comment.Special */
[data-theme="dark"] .syntax-coloring .gd { color: #FF4689 } /* Generic.Deleted */
[data-theme="dark"] .syntax-coloring .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
[data-theme="dark"] .syntax-coloring .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
[data-theme="dark"] .syntax-coloring .gr { color: #F8F8F2 } /* Generic.Error */
[data-theme="dark"] .syntax-coloring .gh { color: #F8F8F2 } /* Generic.Heading */
[data-theme="dark"] .syntax-coloring .gi { color: #A6E22E } /* Generic.Inserted */
[data-theme="dark"] .syntax-coloring .go { color: #66D9EF } /* Generic.Output */
[data-theme="dark"] .syntax-coloring .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
[data-theme="dark"] .syntax-coloring .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
[data-theme="dark"] .syntax-coloring .gu { color: #959077 } /* Generic.Subheading */
[data-theme="dark"] .syntax-coloring .gt { color: #F8F8F2 } /* Generic.Traceback */
[data-theme="dark"] .syntax-coloring .kc { color: #66D9EF } /* Keyword.Constant */
[data-theme="dark"] .syntax-coloring .kd { color: #66D9EF } /* Keyword.Declaration */
[data-theme="dark"] .syntax-coloring .kn { color: #FF4689 } /* Keyword.Namespace */
[data-theme="dark"] .syntax-coloring .kp { color: #66D9EF } /* Keyword.Pseudo */
[data-theme="dark"] .syntax-coloring .kr { color: #66D9EF } /* Keyword.Reserved */
[data-theme="dark"] .syntax-coloring .kt { color: #66D9EF } /* Keyword.Type */
[data-theme="dark"] .syntax-coloring .ld { color: #E6DB74 } /* Literal.Date */
[data-theme="dark"] .syntax-coloring .m { color: #AE81FF } /* Literal.Number */
[data-theme="dark"] .syntax-coloring .s { color: #E6DB74 } /* Literal.String */
[data-theme="dark"] .syntax-coloring .na { color: #A6E22E } /* Name.Attribute */
[data-theme="dark"] .syntax-coloring .nb { color: #F8F8F2 } /* Name.Builtin */
[data-theme="dark"] .syntax-coloring .nc { color: #A6E22E } /* Name.Class */
[data-theme="dark"] .syntax-coloring .no { color: #66D9EF } /* Name.Constant */
[data-theme="dark"] .syntax-coloring .nd { color: #A6E22E } /* Name.Decorator */
[data-theme="dark"] .syntax-coloring .ni { color: #F8F8F2 } /* Name.Entity */
[data-theme="dark"] .syntax-coloring .ne { color: #A6E22E } /* Name.Exception */
[data-theme="dark"] .syntax-coloring .nf { color: #A6E22E } /* Name.Function */
[data-theme="dark"] .syntax-coloring .nl { color: #F8F8F2 } /* Name.Label */
[data-theme="dark"] .syntax-coloring .nn { color: #F8F8F2 } /* Name.Namespace */
[data-theme="dark"] .syntax-coloring .nx { color: #A6E22E } /* Name.Other */
[data-theme="dark"] .syntax-coloring .py { color: #F8F8F2 } /* Name.Property */
[data-theme="dark"] .syntax-coloring .nt { color: #FF4689 } /* Name.Tag */
[data-theme="dark"] .syntax-coloring .nv { color: #F8F8F2 } /* Name.Variable */
[data-theme="dark"] .syntax-coloring .ow { color: #FF4689 } /* Operator.Word */
[data-theme="dark"] .syntax-coloring .pm { color: #F8F8F2 } /* Punctuation.Marker */
[data-theme="dark"] .syntax-coloring .w { color: #F8F8F2 } /* Text.Whitespace */
[data-theme="dark"] .syntax-coloring .mb { color: #AE81FF } /* Literal.Number.Bin */
[data-theme="dark"] .syntax-coloring .mf { color: #AE81FF } /* Literal.Number.Float */
[data-theme="dark"] .syntax-coloring .mh { color: #AE81FF } /* Literal.Number.Hex */
[data-theme="dark"] .syntax-coloring .mi { color: #AE81FF } /* Literal.Number.Integer */
[data-theme="dark"] .syntax-coloring .mo { color: #AE81FF } /* Literal.Number.Oct */
[data-theme="dark"] .syntax-coloring .sa { color: #E6DB74 } /* Literal.String.Affix */
[data-theme="dark"] .syntax-coloring .sb { color: #E6DB74 } /* Literal.String.Backtick */
[data-theme="dark"] .syntax-coloring .sc { color: #E6DB74 } /* Literal.String.Char */
[data-theme="dark"] .syntax-coloring .dl { color: #E6DB74 } /* Literal.String.Delimiter */
[data-theme="dark"] .syntax-coloring .sd { color: #E6DB74 } /* Literal.String.Doc */
[data-theme="dark"] .syntax-coloring .s2 { color: #E6DB74 } /* Literal.String.Double */
[data-theme="dark"] .syntax-coloring .se { color: #AE81FF } /* Literal.String.Escape */
[data-theme="dark"] .syntax-coloring .sh { color: #E6DB74 } /* Literal.String.Heredoc */
[data-theme="dark"] .syntax-coloring .si { color: #E6DB74 } /* Literal.String.Interpol */
[data-theme="dark"] .syntax-coloring .sx { color: #E6DB74 } /* Literal.String.Other */
[data-theme="dark"] .syntax-coloring .sr { color: #E6DB74 } /* Literal.String.Regex */
[data-theme="dark"] .syntax-coloring .s1 { color: #E6DB74 } /* Literal.String.Single */
[data-theme="dark"] .syntax-coloring .ss { color: #E6DB74 } /* Literal.String.Symbol */
[data-theme="dark"] .syntax-coloring .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */
[data-theme="dark"] .syntax-coloring .fm { color: #A6E22E } /* Name.Function.Magic */
[data-theme="dark"] .syntax-coloring .vc { color: #F8F8F2 } /* Name.Variable.Class */
[data-theme="dark"] .syntax-coloring .vg { color: #F8F8F2 } /* Name.Variable.Global */
[data-theme="dark"] .syntax-coloring .vi { color: #F8F8F2 } /* Name.Variable.Instance */
[data-theme="dark"] .syntax-coloring .vm { color: #F8F8F2 } /* Name.Variable.Magic */
[data-theme="dark"] .syntax-coloring .il { color: #AE81FF } /* Literal.Number.Integer.Long */
input[type='radio'] {
/* I wanted to style the whole of the radio button in a non-navy color (something that fits more with what we
do generally but I didn't manage to get it done in the self-allotted time. I'm still seeing a navy outer ring */