pages/_includes/head.liquid
Jan van Gemert a7f486fa7a
keep dark mode inside the (site.enable_darkmode) conditional (#3233)
Hi,
I noticed some weird behavior when I turned dark mode off (some of the
text seemed to disappear, it became white :) )

I traced it to: {% if site.enable_darkmode %} in head.liquid
where some darkmode features are place before the if statement.

When putting it inside the if statement then the weird behavior was
solved; see the pull request here :)

Cheers,
Jan
2025-07-21 11:27:21 -03:00

190 lines
5.5 KiB
Plaintext

<!-- Metadata, OpenGraph and Schema.org -->
{% include metadata.liquid %}
<!-- Bootstrap & MDB -->
<link rel="stylesheet" href="{{ '/assets/css/bootstrap.min.css' | relative_url | bust_file_cache }}">
<link
rel="stylesheet"
href="{{ site.third_party_libraries.mdb.url.css }}"
integrity="{{ site.third_party_libraries.mdb.integrity.css }}"
crossorigin="anonymous"
>
{% if page.pretty_table %}
<!-- Bootstrap Table -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.bootstrap-table.url.css }}"
integrity="{{ site.third_party_libraries.bootstrap-table.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
<!-- Fonts & Icons -->
<link defer rel="stylesheet" href="{{ '/assets/css/academicons.min.css' | relative_url | bust_file_cache }}">
<link defer rel="stylesheet" href="{{ '/assets/css/scholar-icons.css' | relative_url | bust_file_cache }}">
<link
defer
rel="stylesheet"
type="text/css"
href="{{ site.third_party_libraries.google_fonts.url.fonts }}"
>
<!-- Code Syntax Highlighting -->
<link
defer
rel="stylesheet"
href="{{ '/assets/css/jekyll-pygments-themes-github.css' | relative_url | bust_file_cache }}"
media=""
id="highlight_theme_light"
>
{% if page.toc and page.toc.sidebar %}
<!-- Sidebar Table of Contents -->
<link defer href="{{ '/assets/css/bootstrap-toc.min.css' | relative_url | bust_file_cache }}" rel="stylesheet">
{% endif %}
<!-- Styles -->
{% if page.pseudocode %}
<!-- pseudocode -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.pseudocode.url.css }}"
integrity="{{ site.third_party_libraries.pseudocode.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
{% if site.icon.size <= 4 %}
<link
rel="shortcut icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.icon }}</text></svg>"
>
{% elsif site.icon != blank %}
<link rel="shortcut icon" href="{{ site.icon | prepend: '/assets/img/' | relative_url | bust_file_cache}}">
{% endif %}
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url | bust_css_cache }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
{% if site.enable_darkmode %}
<!-- Dark Mode -->
<script src="{{ '/assets/js/theme.js' | relative_url | bust_file_cache }}"></script>
<link
defer
rel="stylesheet"
href="{{ '/assets/css/jekyll-pygments-themes-native.css' | relative_url | bust_file_cache }}"
media="none"
id="highlight_theme_dark"
>
<script>
initTheme();
</script>
{% endif %}
{% if page.map %}
<!-- GeoJSON support via Leaflet -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.leaflet.url.css }}"
integrity="{{ site.third_party_libraries.leaflet.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
{% if page.code_diff %}
<!-- diff2html -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.highlightjs.url.css.light }}"
integrity="{{ site.third_party_libraries.highlightjs.integrity.css.light }}"
crossorigin="anonymous"
media="screen and (prefers-color-scheme: light)"
>
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.highlightjs.url.css.dark }}"
integrity="{{ site.third_party_libraries.highlightjs.integrity.css.dark }}"
crossorigin="anonymous"
media="screen and (prefers-color-scheme: dark)"
>
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.diff2html.url.css }}"
integrity="{{ site.third_party_libraries.diff2html.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
{% if page.images %}
{% if page.images.compare %}
<!-- Image comparison slider -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.img-comparison-slider.url.css }}"
integrity="{{ site.third_party_libraries.img-comparison-slider.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
{% if page.images.lightbox2 %}
<!-- Lightbox2 -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.lightbox2.url.css }}"
integrity="{{ site.third_party_libraries.lightbox2.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
{% if page.images.photoswipe %}
<!-- Photoswipe -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.photoswipe.url.css }}"
crossorigin="anonymous"
>
{% endif %}
{% if page.images.slider %}
<!-- Image slider -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.swiper.url.css }}"
integrity="{{ site.third_party_libraries.swiper.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
{% if page.images.spotlight %}
<!-- Spotlight -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.spotlight.url.css }}"
integrity="{{ site.third_party_libraries.spotlight.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
{% if page.images.venobox %}
<!-- Venobox -->
<link
defer
rel="stylesheet"
href="{{ site.third_party_libraries.venobox.url.css }}"
integrity="{{ site.third_party_libraries.venobox.integrity.css }}"
crossorigin="anonymous"
>
{% endif %}
{% endif %}
{% if page.tikzjax %}
<link defer rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
{% endif %}