Follow system theme

This commit is contained in:
krek0 2026-04-22 09:28:58 +02:00
parent 70e825efda
commit 0c42aa321d
4 changed files with 17 additions and 3 deletions

View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
/* Use dark scrollbar */
:root {
color-scheme: dark;
color-scheme: light dark;
}
/* Bootstrap icons */

13
photo21/static/theme.js Normal file
View file

@ -0,0 +1,13 @@
/*
This file is part of photo21
Copyright (C) 2022 Amicale des élèves de l'ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
*/
(function() {
var mq = window.matchMedia('(prefers-color-scheme: dark)');
document.documentElement.setAttribute('data-bs-theme', mq.matches ? 'dark' : 'light');
mq.addEventListener('change', function(e) {
document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light');
});
})();

View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
{% load static i18n %}
<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en" }}"{% if LANGUAGE_BIDI %} dir="rtl"{% endif %} data-bs-theme="dark">
<html lang="{{ LANGUAGE_CODE|default:"en" }}"{% if LANGUAGE_BIDI %} dir="rtl"{% endif %}>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -14,6 +14,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
<meta http-equiv="Referrer-Policy" content="no-referrer">
<title>{% block title %}{{ title }}{% endblock title %} - {{ request.site.name }}</title>
<meta name="description" content="{% trans "The ENS Paris-Saclay pictures server." %}">
<script src="{% static "theme.js" %}"></script>
<link rel="stylesheet" href="{% static "bootstrap5/css/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "layout.css" %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static "favicon-16x16.png" %}">

View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n %}
<div class="card text-white bg-black bg-gradient">
<div class="card bg-gradient">
{% for photo in gallery.sample %}
<img src="{{ photo.get_thumbnail_url }}" class="card-img-top" alt="{{ photo.title }}">
{% endfor %}