hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow setting accent/default theme per page/section

Browse Source 
Woo-hoo!
This commit is contained in:
daudix
2024-09-18 02:17:05 +03:00
parent 0e24fcd190
commit c460476303
5 changed files with 84 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/base.html
View File

@ -8,7 +8,7 @@
{%- set rtl_languages = ["ar", "arc", "az", "dv", "ff", "he", "ku", "nqo", "fa", "rhg", "syc", "ur"] -%}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" {% if lang in rtl_languages %}dir="rtl"{% endif %} lang="{{ lang }}" {% if config.extra.default_theme %}data-theme="{{config.extra.default_theme}}"{% endif %}>
<html xmlns="http://www.w3.org/1999/xhtml" {% if lang in rtl_languages %}dir="rtl"{% endif %} lang="{{ lang }}" {% include "partials/default_theme.html" %}>
{% include "partials/head.html" %}
<body>
{% block body %}

7
templates/partials/default_theme.html Normal file
View File

@ -0,0 +1,7 @@
{%- if page.extra.default_theme -%}
data-theme="{{ page.extra.default_theme }}"
{%- elif section.extra.default_theme -%}
data-theme="{{ section.extra.default_theme }}"
{%- elif config.extra.default_theme -%}
data-theme="{{ config.extra.default_theme }}"
{%- endif -%}

39
templates/partials/head.html
View File

@ -38,44 +38,7 @@
<link rel="alternate" type={% if config.feed_filenames[0] == "atom.xml" %}"application/atom+xml"{% else %}"application/rss+xml"{% endif %} title="{{ config.title }}" href="{{ get_url(path=config.feed_filenames[0]) | safe }}" />
{%- endif %}
<style type="text/css">
:root {
--accent-color: {{ config.extra.accent_color | default(value="#6f8396") | safe }};
--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 80%){% else %}#fff{% endif %};
}
{%- if config.extra.accent_color_dark %}
[data-theme="dark"] {
--accent-color: {{ config.extra.accent_color_dark | safe }};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent-color: {{ config.extra.accent_color_dark | safe }};
}
}
{%- endif %}
{%- if config.extra.fix_contrast_dark %}
[data-theme="dark"] {
--contrast-color: rgb(0 0 0 / 80%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: rgb(0 0 0 / 80%);
}
}
{%- endif %}
{%- if config.extra.debug_layout -%}
*,
*::before,
*::after {
outline: solid 1px var(--accent-color);
}
{%- endif -%}
</style>
{%- include "partials/variables.html" %}
{%- set styles = [ "style.css" ] %}

73
templates/partials/variables.html Normal file
View File

@ -0,0 +1,73 @@
<style type="text/css">
:root {
{%- if page.extra.accent_color -%}
--accent-color: {{ page.extra.accent_color | safe }};
{%- elif section.extra.accent_color -%}
--accent-color: {{ section.extra.accent_color | safe }};
{%- else -%}
--accent-color: {{ config.extra.accent_color | default(value="#6f8396") | safe }};
{%- endif -%}
{%- if page.extra.fix_contrast -%}
--contrast-color: rgb(0 0 0 / 80%);
{%- elif section.extra.fix_contrast -%}
--contrast-color: rgb(0 0 0 / 80%);
{%- elif config.extra.fix_contrast -%}
--contrast-color: rgb(0 0 0 / 80%);
{%- else -%}
--contrast-color: #fff;
{%- endif -%}
}
{%- if page.extra.accent_color_dark -%}
[data-theme="dark"] {
--accent-color: {{ page.extra.accent_color_dark | safe }};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent-color: {{ page.extra.accent_color_dark | safe }};
}
}
{%- elif section.extra.accent_color_dark -%}
[data-theme="dark"] {
--accent-color: {{ section.extra.accent_color_dark | safe }};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent-color: {{ section.extra.accent_color_dark | safe }};
}
}
{%- elif config.extra.accent_color_dark -%}
[data-theme="dark"] {
--accent-color: {{ config.extra.accent_color_dark | safe }};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent-color: {{ config.extra.accent_color_dark | safe }};
}
}
{%- endif -%}
{%- if page.extra.fix_contrast_dark or section.extra.fix_contrast_dark or config.extra.fix_contrast_dark -%}
[data-theme="dark"] {
--contrast-color: rgb(0 0 0 / 80%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: rgb(0 0 0 / 80%);
}
}
{%- endif -%}
{%- if page.extra.debug_layout or section.extra.debug_layout or config.extra.debug_layout -%}
*,
*::before,
*::after {
outline: solid 1px var(--accent-color);
}
{%- endif -%}
</style>