colour settings start

This commit is contained in:
2025-05-25 21:15:28 +02:00
parent a8aeb2dbee
commit 3fe3037aed
14 changed files with 221 additions and 57 deletions

View File

@@ -62,6 +62,26 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Helper function to get computed CSS variable value
function getCssVar(varName) {
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
}
// Get all chart colors
const chartColors = {
primary: getCssVar('--chart-primary'),
secondary: getCssVar('--chart-secondary'),
warning: getCssVar('--chart-warning'),
primaryLight: getCssVar('--chart-primary-light'),
primaryLighter: getCssVar('--chart-primary-lighter'),
primaryLightest: getCssVar('--chart-primary-lightest'),
primaryPale: getCssVar('--chart-primary-pale'),
secondaryLight: getCssVar('--chart-secondary-light'),
secondaryLighter: getCssVar('--chart-secondary-lighter'),
secondaryLightest: getCssVar('--chart-secondary-lightest'),
secondaryPale: getCssVar('--chart-secondary-pale')
};
// Contact Status Chart
const statusCtx = document.getElementById('statusChart');
if (statusCtx) {
@@ -71,7 +91,7 @@ document.addEventListener('DOMContentLoaded', function() {
labels: ['Active', 'Inactive'],
datasets: [{
data: [{{ active_count }}, {{ inactive_count }}],
backgroundColor: ['#16767b', '#741b5f'],
backgroundColor: [chartColors.primary, chartColors.secondary],
borderWidth: 0,
hoverOffset: 4
}]
@@ -98,7 +118,7 @@ document.addEventListener('DOMContentLoaded', function() {
labels: ['Starred', 'Unstarred'],
datasets: [{
data: [{{ starred_count }}, {{ file_count - starred_count }}],
backgroundColor: ['#ffd700', '#16767b'],
backgroundColor: [chartColors.warning, chartColors.primary],
borderWidth: 0,
hoverOffset: 4
}]
@@ -124,8 +144,16 @@ document.addEventListener('DOMContentLoaded', function() {
datasets: [{
data: [{% for type in storage_by_type %}{{ type.total_size }}{% if not loop.last %}, {% endif %}{% endfor %}],
backgroundColor: [
'#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
'#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
chartColors.primary,
chartColors.primaryLight,
chartColors.primaryLighter,
chartColors.primaryLightest,
chartColors.primaryPale,
chartColors.secondary,
chartColors.secondaryLight,
chartColors.secondaryLighter,
chartColors.secondaryLightest,
chartColors.secondaryPale
],
borderWidth: 0,
hoverOffset: 4
@@ -156,8 +184,16 @@ document.addEventListener('DOMContentLoaded', function() {
datasets: [{
data: [{% for type in trash_by_type %}{{ type.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
backgroundColor: [
'#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
'#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
chartColors.primary,
chartColors.primaryLight,
chartColors.primaryLighter,
chartColors.primaryLightest,
chartColors.primaryPale,
chartColors.secondary,
chartColors.secondaryLight,
chartColors.secondaryLighter,
chartColors.secondaryLightest,
chartColors.secondaryPale
],
borderWidth: 0,
hoverOffset: 4