Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-09-12 17:52:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Made usage table colours use theme colours.

Browse Source 
Added listener to themebutton trigger.
Added delay to account for uI update
This commit is contained in:
Connor Yoh 2025-03-25 15:41:19 +00:00
parent ba785ddbf7
commit 610cc7cc9c
1 changed files with 27 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/main/resources/static/js/usage.js
View File

@ -13,57 +13,44 @@ let myChart;
// Function to determine if we're in dark mode // Function to determine if we're in dark mode
function isDarkMode() { function isDarkMode() {
// Check if dark theme is active based on the app's theme implementation // Check if dark theme is active based on the app's theme implementation
const attribute = document.documentElement.getAttribute('data-bs-theme') === 'dark';
const preference = window.matchMedia('(prefers-color-scheme: dark)').matches;
return ( return (
document.documentElement.getAttribute('data-bs-theme') === 'dark' || attribute ||
window.matchMedia('(prefers-color-scheme: dark)').matches preference
); );
} }
// Function to get chart colors based on current theme // Function to get chart colors based on current theme
function getChartColors() { function getChartColors() {
// Define default colors for light and dark modes var style = window.getComputedStyle(document.body)
const darkModeColors = {
textColor: 'rgb(223, 226, 235)',
primaryColor: 'rgb(162, 201, 255)',
backgroundColor: 'rgb(15, 20, 26)',
gridColor: 'rgb(64, 71, 83)',
tooltipBgColor: 'rgb(45, 49, 55)',
tooltipTextColor: 'rgb(238, 241, 250)'
};
const lightModeColors = { const colours = {
textColor: 'rgb(24, 28, 34)', textColor: style.getPropertyValue('--md-sys-color-on-surface') ,
primaryColor: 'rgb(0, 96, 170)', primaryColor: style.getPropertyValue('--md-sys-color-primary'),
backgroundColor: 'rgb(248, 249, 255)', backgroundColor: style.getPropertyValue('--md-sys-color-background'),
gridColor: 'rgb(192, 199, 213)', gridColor: style.getPropertyValue('--md-sys-color-surface-variant'),
tooltipBgColor: 'rgb(45, 49, 55)', tooltipBgColor: style.getPropertyValue('--md-sys-color-inverse-on-surface'),
tooltipTextColor: 'rgb(238, 241, 250)' tooltipTextColor: style.getPropertyValue('rgb(238, 241, 250)')
}; }
return colours;
// Return appropriate color set based on current mode
return isDarkMode() ? darkModeColors : lightModeColors;
} }
// Watch for theme changes and update chart if needed // Watch for theme changes and update chart if needed
function setupThemeChangeListener() { function setupThemeChangeListener() {
// Watch for manual theme changes via data-bs-theme attribute
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'data-bs-theme') {
if (myChart) {
// Redraw the current chart with new theme colors
const currentLimit = document.getElementById('currentlyShowing').textContent;
const limit = (currentLimit === endpointStatsTranslations.all)
? filteredData.length
: (currentLimit === endpointStatsTranslations.top20 ? 20 : 10);
updateChart(limit);
}
}
});
});
// Start observing theme changes // Start observing theme changes
observer.observe(document.documentElement, { attributes: true }); document.addEventListener("modeChanged", (event) => {
setTimeout(function() {
if (myChart) {
const currentLimit = document.getElementById('currentlyShowing').textContent;
const limit = (currentLimit === endpointStatsTranslations.all)
? filteredData.length
: (currentLimit === endpointStatsTranslations.top20 ? 20 : 10);
updateChart(limit);
}
}, 100);
});
// Also watch for system preference changes // Also watch for system preference changes
window window