First dark mode CSS

This commit is contained in:
James Cole
2023-01-29 08:38:53 +01:00
parent 41941b37f9
commit 5a5c92b5b5
5 changed files with 585 additions and 166 deletions

View File

@@ -28,7 +28,19 @@
{# the theme #}
<link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
<link href="v1/lib/adminlte/css/skins/skin-blue-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
<script nonce="{{ JS_NONCE }}">
// If `prefers-color-scheme` is not supported, fall back to light mode.
// In this case, light.css will be downloaded with `highest` priority.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="v1/lib/adminlte/css/skins/skin-light.css?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}" onload="document.documentElement.style.display = \'\'">',
);
}
</script>
<link href="v1/lib/adminlte/css/skins/skin-light.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
<link href="v1/lib/adminlte/css/skins/skin-dark.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: dark)">
{# Firefly III customisations #}
<link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
@@ -52,7 +64,7 @@
{% include 'partials.favicons' %}
</head>
<body class="skin-blue-light sidebar-mini hold-transition">
<body class="skin-firefly-iii sidebar-mini hold-transition">
<div class="wrapper" id="app">
<header class="main-header">