Zakarya
5ce238a44d
Instead of adding or removing the dark theme setting, set the setting to light or dark.
86 lines
4.2 KiB
HTML
86 lines
4.2 KiB
HTML
<!DOCTYPE html>{% load cms_tags i18n menu_tags sekizai_tags static %}{% spaceless %}
|
|
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
|
|
<html data-bs-theme="dark" lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
|
|
<link rel="icon" type="image/x-icon" href="{% static 'colormatic_logo.svg' %}">
|
|
{% block meta %}
|
|
<meta name="description" content="{% page_attribute "meta_description" %}"/>
|
|
<meta property="og:type" content="website"/>
|
|
<meta property="og:title" content="{{ request.current_page.get_page_title|escape }}"/>
|
|
<meta property="og:description" content="{% page_attribute meta_description %}"/>
|
|
{% endblock meta %}
|
|
{% block canonical_url %}
|
|
<link rel="canonical" href="{{ request.build_absolute_uri|urlencode:":/&?" }}"/>
|
|
<meta property="og:url" content="{{ request.build_absolute_uri|urlencode:"&?" }}"/>
|
|
{% endblock canonical_url %}
|
|
{% block fb_meta %}{% endblock %}
|
|
<title>{% block title %}{{ request.current_page.get_page_title|striptags }}{% endblock %}</title>
|
|
{% block base_css %}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
{% endblock base_css %}
|
|
{% endspaceless %}{% render_block 'css' %}{% spaceless %}
|
|
{% block page_head %}{% endblock %}
|
|
</head>
|
|
<body {% block body_attrs %}{% endblock %}>
|
|
{% endspaceless %}{% cms_toolbar %}{% block navbar %}
|
|
<nav class="navbar {% block navbar_options %}navbar-expand-lg{% endblock %}">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/"><img class="logo" width="30" src="{% static 'colormatic_logo.svg' %}" alt="Colormatic Logo">{% block brand %}{% endblock %}</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">{% block menubar %}{% show_menu 0 100 100 100 'bootstrap5/menu.html' %}{% endblock %}</ul>
|
|
{% block searchbar %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
{% endblock navbar %}
|
|
{% block content %}
|
|
<section>
|
|
{% placeholder "Page Content" %}
|
|
</section>
|
|
{% endblock content %}{% spaceless %}
|
|
{% block base_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
|
{% endblock base_js %}
|
|
{% endspaceless %}{% render_block 'js' %}{% spaceless %}
|
|
{% block end_js %}
|
|
<script>
|
|
|
|
/*/
|
|
* Automatically set dark theme
|
|
*
|
|
* This code will detect when the OS's color scheme changes
|
|
* and will update accordingly.
|
|
/*/
|
|
|
|
let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
if (isDarkMode) {
|
|
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
|
}
|
|
else {
|
|
document.documentElement.setAttribute('data-bs-theme', 'light');
|
|
}
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
|
|
isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
if (isDarkMode) {
|
|
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
|
}
|
|
else {
|
|
document.documentElement.setAttribute('data-bs-theme', 'light');
|
|
}
|
|
});
|
|
|
|
</script>
|
|
{% endblock end_js %}
|
|
{% block bottom_css %}{% endblock %}
|
|
</body>
|
|
</html>{% endspaceless %}
|