Implemented darkmode in admin module

This commit is contained in:
Jadowyne Ulve 2025-08-09 17:53:08 -05:00
parent 30954cc6e2
commit 9bc93e12a5
5 changed files with 29 additions and 80 deletions

View File

@ -1,21 +1,3 @@
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
document.addEventListener('DOMContentLoaded', async function() {
let sites = await fetchSites()
await updateSitesPagination()

View File

@ -12,10 +12,16 @@
<!-- Material Symbols - Sharp Set -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
{% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
</head>
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body>
{% endif %}
<nav class="uk-navbar-container">
<div class="uk-container uk-container-expand">
<div class="uk-navbar uk-navbar-primary">

View File

@ -12,10 +12,15 @@
<!-- Material Symbols - Sharp Set -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
{% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
</head>
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body>
{% endif %}
<div class="uk-container uk-section">
<div uk-grid>
<div class="uk-width-1-1" >
@ -84,24 +89,6 @@
await replenishForm(role, mode)
})
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
async function replenishForm(role, mode){
document.getElementById('role_name').value = role.role_name
document.getElementById('role_description').value = role.role_description

View File

@ -12,10 +12,15 @@
<!-- Material Symbols - Sharp Set -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
{% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
</head>
<body id="test">
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body>
{% endif %}
<div class="uk-container uk-section uk-margin-remove-top">
<div uk-grid>
<div class="uk-width-1-1" >
@ -151,24 +156,6 @@
console.log(mode)
})
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
async function replenishForm(site, mode){
document.getElementById('site_name').value = site.site_name
document.getElementById('site_description').value = site.site_description

View File

@ -12,10 +12,15 @@
<!-- Material Symbols - Sharp Set -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
{% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
</head>
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body>
{% endif %}
<div class="uk-section">
<div class="uk-container uk-container-xsmall">
<div class="uk-grid-small" uk-grid>
@ -198,24 +203,6 @@
await replenishForm(user, mode)
})
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
async function replenishForm(user, mode){
document.getElementById('login_name').value = user.username
document.getElementById('login_email').value = user.email