YunoHost/pepettes
1
0
Fork 0
mirror of https://github.com/YunoHost/pepettes.git synced 2024-09-03 20:06:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

support dark mode

Browse source
This commit is contained in:
OniriCorpe 2024-05-22 02:42:56 +02:00
parent c66a7c85d3
commit 784172a8ea
3 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
assets/css/global.css
View file

@ -8,7 +8,12 @@ body {
align-items: center; align-items: center;
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
background-color: #f5f5f5; }
@media (prefers-color-scheme: dark) {
img {
filter: invert(100%);
}
} }
.form-donate { .form-donate {
@ -17,9 +22,11 @@ body {
padding: 15px; padding: 15px;
margin: auto; margin: auto;
} }
.form-donate .checkbox { .form-donate .checkbox {
font-weight: 400; font-weight: 400;
} }
.form-donate .form-control { .form-donate .form-control {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -27,17 +34,19 @@ body {
padding: 10px; padding: 10px;
font-size: 16px; font-size: 16px;
} }
.form-donate .form-control:focus { .form-donate .form-control:focus {
z-index: 2; z-index: 2;
} }
.form-donate input[type="email"] { .form-donate input[type="email"] {
margin-bottom: -1px; margin-bottom: -1px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.form-donate input[type="password"] { .form-donate input[type="password"] {
margin-bottom: 10px; margin-bottom: 10px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }

13
assets/darkmode.js Normal file
View file

@ -0,0 +1,13 @@
// Set theme to the user's preferred color scheme
function updateTheme() {
const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
"dark" :
"light";
document.querySelector("html").setAttribute("data-bs-theme", colorMode);
}
// Set theme on load
updateTheme()
// Update theme when the preferred scheme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)

1
assets/index.html
View file

@ -13,6 +13,7 @@
<link href="./css/global.css" rel="stylesheet" /> <link href="./css/global.css" rel="stylesheet" />
<script src="https://js.stripe.com/v3/"></script> <script src="https://js.stripe.com/v3/"></script>
<script src="./index.js" defer></script> <script src="./index.js" defer></script>
<script src="./darkmode.js" defer></script>
</head> </head>
<body class="text-center"> <body class="text-center">