feat: better light mode highlighting

This commit is contained in:
zaaarf 2023-12-26 03:37:28 +01:00
parent 8956abcb84
commit 9ccf994f55
No known key found for this signature in database
GPG key ID: 102E445F4C3F829B
3 changed files with 9 additions and 7 deletions

1
.gitignore vendored
View file

@ -1 +1,2 @@
public/ public/
static/hl-*.css

View file

@ -8,12 +8,6 @@ pre {
overflow-x: scroll; overflow-x: scroll;
} }
:root.light {
pre {
@extend .inverted;
}
}
p code, p code,
li code, li code,
div code { div code {

View file

@ -112,15 +112,22 @@
--metaColor: {% if config.extra.colors.light.meta_color %}{{ config.extra.colors.light.meta_color }}{% else %}#D26878{% endif %}; --metaColor: {% if config.extra.colors.light.meta_color %}{{ config.extra.colors.light.meta_color }}{% else %}#D26878{% endif %};
--linkColor: {% if config.extra.colors.light.link_color %}{{ config.extra.colors.light.link_color }}{% else %}#5690AF{% endif %}; --linkColor: {% if config.extra.colors.light.link_color %}{{ config.extra.colors.light.link_color }}{% else %}#5690AF{% endif %};
--dateLinkColor: {% if config.extra.colors.light.date_link_color %}{{ config.extra.colors.light.date_link_color }}{% else %}#223844{% endif %}; --dateLinkColor: {% if config.extra.colors.light.date_link_color %}{{ config.extra.colors.light.date_link_color }}{% else %}#223844{% endif %};
--codeLineColor: {% if config.extra.colors.light.code_line_color %}{{ config.extra.colors.light.code_line_color }}{% else %}#CCCCCC{% endif %}; --codeLineColor: {% if config.extra.colors.light.code_line_color %}{{ config.extra.colors.light.code_line_color }}{% else %}#FFFFFF{% endif %};
} }
</style> </style>
<link id="syntaxHighlighting" rel="stylesheet" type="text/css" href="{{ get_url(path='ayu-dark.css', trailing_slash=false) | safe }}" />
<link rel="stylesheet" href="{{ get_url(path='style.css', trailing_slash=false) | safe }}"/> <link rel="stylesheet" href="{{ get_url(path='style.css', trailing_slash=false) | safe }}"/>
{% endblock css %} {% endblock css %}
<script> <script>
const setTheme = (theme) => { const setTheme = (theme) => {
document.documentElement.className = theme; document.documentElement.className = theme;
localStorage.setItem('theme', theme); localStorage.setItem('theme', theme);
var link = document.getElementById('syntaxHighlighting');
if (theme === 'light') {
link.setAttribute('href', '{{ get_url(path="hl-light.css", trailing_slash=false) | safe }}');
} else if (theme === 'dark') {
link.setAttribute('href', '{{ get_url(path="hl-dark.css", trailing_slash=false) | safe }}');
}
} }
const hasCodeRun = localStorage.getItem('hasCodeRun'); const hasCodeRun = localStorage.getItem('hasCodeRun');