erjemin/2026-hypn0-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: работает переключение темной/светлой темы.

Browse Source
This commit is contained in:
erjemin
2026-08-15 18:00:34 +03:00
parent ee4eb75617
commit 8605d6991c
2 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hypn0/templates/_base.html
+23 -7
View File
@@ -1,5 +1,5 @@
<!doctype html>{% load static %} <!doctype html>{% load static %}
<html lang="ru"> <html lang="ru" x-data="{ darkMode: false }" x-init="darkMode = localStorage.getItem('darkMode') === 'true'; $watch('darkMode', val => { if(val) document.documentElement.classList.add('dark'); else document.documentElement.classList.remove('dark'); })" x-bind:class="{ 'dark': darkMode }">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -31,7 +31,15 @@
<link rel="icon" type="image/svg+xml" href="{% static 'img/favicon.svg' %}" /> <link rel="icon" type="image/svg+xml" href="{% static 'img/favicon.svg' %}" />
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" /> <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" />
<link rel="apple-touch-icon" href="{% static 'img/apple-touch-icon.png' %}" sizes="180x180" /> <link rel="apple-touch-icon" href="{% static 'img/apple-touch-icon.png' %}" sizes="180x180" />
<link rel="manifest" href="{% static 'img/site.webmanifest' %}" />{% if IS_DEBUG %}{% comment %} <link rel="manifest" href="{% static 'img/site.webmanifest' %}" />
<script>
if (localStorage.getItem('darkMode') === 'true' || (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
{% if IS_DEBUG %}{% comment %}
Переключение dev/prod стилей Tailwind CSS происходит Переключение dev/prod стилей Tailwind CSS происходит
АВТОМАТИЧЕСКИ через переменную IS_DEBUG (см. контексный-процессор АВТОМАТИЧЕСКИ через переменную IS_DEBUG (см. контексный-процессор
frontend/context_processors.py), DEV: tailwindcss из CDN, компилируется прямо в браузере. Удобно frontend/context_processors.py), DEV: tailwindcss из CDN, компилируется прямо в браузере. Удобно
@@ -44,6 +52,13 @@
подключается отдельным link.{% endcomment %} подключается отдельным link.{% endcomment %}
<style type="text/tailwindcss"> <style type="text/tailwindcss">
{% include "css/tailwind-custom.css" %} {% include "css/tailwind-custom.css" %}
@theme {
--color-emerald-700: #047857;
--color-emerald-100: #d1fae5;
--color-zinc-950: #09090b;
--color-stone-50: #fafaf9;
}
@custom-variant dark (&:where(.dark, .dark *));
</style>{% else %}{% comment %} PROD: заранее собранный Tailwind CLI файл (см. </style>{% else %}{% comment %} PROD: заранее собранный Tailwind CLI файл (см.
frontend-assembly/tailwind/input.css и package.json). CLI сканирует шаблоны проекта и генерирует frontend-assembly/tailwind/input.css и package.json). CLI сканирует шаблоны проекта и генерирует
только реально используемые классы, включая кастомные @theme/@layer директивы из того же самого только реально используемые классы, включая кастомные @theme/@layer директивы из того же самого
@@ -55,8 +70,11 @@
"@type": "WebSite", "@type": "WebSite",
"name": "hypn0.xyz", "name": "hypn0.xyz",
"url": "{{ request.scheme }}://{{ request.get_host }}/" "url": "{{ request.scheme }}://{{ request.get_host }}/"
} }{% block EXTRA_LD_JSON %}{% endblock EXTRA_LD_JSON %}
</script>{% block EXTRAHEAD %}{% endblock EXTRAHEAD %} </script>
<script src="{% static 'js/alpine.min.js' %}" defer></script>
<script src="{% static 'js/htmx.min.js' %}" defer></script>
{% block EXTRA_HEAD %}{% endblock EXTRA_HEAD %}
<link rel="stylesheet" href="{% static 'css/hypn0.css' %}" /> <link rel="stylesheet" href="{% static 'css/hypn0.css' %}" />
</head> </head>
<body class="bg-stone-50 text-emerald-700 dark:bg-zinc-950 dark:text-emerald-100 font-mono">{% block ADD_CSS1 %}{% endblock %}{% block ADD_CSS2 %}{% endblock %}{% block ADD_CSS3 %}{% endblock %}{% block BODY %} <body class="bg-stone-50 text-emerald-700 dark:bg-zinc-950 dark:text-emerald-100 font-mono">{% block ADD_CSS1 %}{% endblock %}{% block ADD_CSS2 %}{% endblock %}{% block ADD_CSS3 %}{% endblock %}{% block BODY %}
@@ -66,7 +84,5 @@
</main> </main>
{# {% include "blocks/footer.jinja2" %} #}{% endblock BODY %}{% if not ALLOW_TRACKING %}{# Если клиент еще не согласился на отслеживание покажем ему уведомление #}{% include "block/allow-tracking.html" %}{% else %}{# Если согласился -- отслеживаем#} {# {% include "blocks/footer.jinja2" %} #}{% endblock BODY %}{% if not ALLOW_TRACKING %}{# Если клиент еще не согласился на отслеживание покажем ему уведомление #}{% include "block/allow-tracking.html" %}{% else %}{# Если согласился -- отслеживаем#}
<script src="{% static 'js/analytics.js' %}"></script>{% endif %} <script src="{% static 'js/analytics.js' %}"></script>{% endif %}
<script src="{% static 'js/alpine.min.js' %}"></script> {% block ADD_JS1 %}{% endblock ADD_JS1 %}{% block ADD_JS2 %}{% endblock ADD_JS2 %}{% block ADD_JS3 %}{% endblock ADD_JS3 %}</body>
<script src="{% static 'js/htmx.min.js' %}"></script>{% block ADD_JS1 %}{% endblock ADD_JS1 %}{% block ADD_JS2 %}{% endblock ADD_JS2 %}{% block ADD_JS3 %}{% endblock ADD_JS3 %}
</body>
</html> </html>
hypn0/templates/block/header.html
+1 -1
View File
@@ -11,7 +11,7 @@
{# ПРАВОЕ МЕНЮ #}<menu class="flex items-center gap-x-4 justify-self-start text-xl font-semibold text-slate-900 dark:text-slate-100"> {# ПРАВОЕ МЕНЮ #}<menu class="flex items-center gap-x-4 justify-self-start text-xl font-semibold text-slate-900 dark:text-slate-100">
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg border-0 text-slate-900 dark:text-slate-100">галерея</a> <a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg border-0 text-slate-900 dark:text-slate-100">галерея</a>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block hyphens-none border-0 text-slate-900 dark:text-slate-100">блог</a> <a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden md:block hyphens-none border-0 text-slate-900 dark:text-slate-100">блог</a>
<a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden lg:block border-0 text-slate-900 dark:text-slate-100">◐</a> <a href="#" class="px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg hidden lg:block border-0 text-slate-900 dark:text-slate-100" @click.prevent="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)" title="Переключить тему"><span x-text="darkMode ? '☀️' : '◐'"></span></a>
</menu>{# /ПРАВОЕ МЕНЮ #} </menu>{# /ПРАВОЕ МЕНЮ #}
</div> </div>
</header> </header>