From 6b2bc8188982fb5db532eb0f6efde0b39cd3bed7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1vid=20Benko?= <benko@cesnet.cz>
Date: Tue, 30 Sep 2025 21:37:26 +0200
Subject: [PATCH] feat(frontend): implement light mode

Adds light mode support into GUI, and button to switch between light and
dark mode in the navbar. User's preference is stored in the browser's
local storage for presistence. Browser's default setting is respected as
a initial value.

This commit also introduces changes to coloring of several elements
to maintain contrast in both light and dark mode.
---
 frontend/src/App.vue                          |  8 ++++-
 frontend/src/assets/logo-black.svg            | 22 +++++++++++++
 .../src/assets/{logo.svg => logo-white.svg}   |  0
 .../src/components/ActivityClassBadge.vue     |  6 ++--
 frontend/src/components/ActivityTimeline.vue  |  8 +++--
 frontend/src/components/NavigationBar.vue     | 19 +++++++++--
 .../src/components/ObservationsTimeline.vue   |  7 +++-
 frontend/src/components/ThemeToggle.vue       | 20 +++++++++++
 frontend/src/stores/theme.js                  | 33 +++++++++++++++++++
 frontend/src/utils/commonCharts.js            |  7 ++++
 10 files changed, 121 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/assets/logo-black.svg
 rename frontend/src/assets/{logo.svg => logo-white.svg} (100%)
 create mode 100644 frontend/src/components/ThemeToggle.vue
 create mode 100644 frontend/src/stores/theme.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 19e7a46..2252780 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,13 +1,15 @@
 <script setup>
-import { inject, provide } from 'vue'
+import { inject, provide, watchEffect } from 'vue'
 import { RouterView } from 'vue-router'
 
 import { useRequestsStateStore } from '@/stores/requestsState'
+import { useThemeStore } from '@/stores/theme'
 import NavigationBar from '@/components/NavigationBar.vue'
 import RequestsState from '@/components/RequestsState.vue'
 
 const axios = inject('axios')
 const requestsState = useRequestsStateStore()
+const theme = useThemeStore()
 
 /**
  * Universal data getter
@@ -27,6 +29,10 @@ async function getData(urlPath, ...params) {
 
 // Provide data getter to whole app
 provide('getData', getData)
+
+watchEffect(() => {
+  document.documentElement.setAttribute('data-bs-theme', theme.theme)
+})
 </script>
 
 <template>
diff --git a/frontend/src/assets/logo-black.svg b/frontend/src/assets/logo-black.svg
new file mode 100644
index 0000000..7b9b409
--- /dev/null
+++ b/frontend/src/assets/logo-black.svg
@@ -0,0 +1,22 @@
+<svg width="498" height="160" viewBox="0 0 498 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.98 148.387C23.5251 146.89 23.4647 146.722 23.4647 141.397C23.4647 136.257 23.3787 135.987 21.9789 136.736C19.9204 137.838 18.5823 142.352 19.2109 146.073C19.8272 149.72 19.1093 149.946 15.7849 147.149C13.7974 145.476 13.4038 144.588 13.4038 141.775C13.4038 139.922 14.2476 136.035 15.279 133.138C16.3103 130.24 17.8621 125.432 18.7274 122.452C19.5927 119.472 21.1696 115.32 22.2316 113.226L24.1626 109.417L21.8743 107.076C20.6158 105.789 18.47 102.006 17.1059 98.6696C15.3653 94.4123 14.1551 92.4859 13.0474 92.2087C11.5232 91.8272 11.4864 91.4495 11.9763 81.2065C12.5002 70.2552 12.9853 67.8215 16.2984 59.5255L18.2483 54.6431L15.7062 52.1733C11.7232 48.3035 9.99713 43.6937 10 36.9338C10.0022 30.4348 11.4434 26.7861 15.7163 22.4563C18.4524 19.6838 25.3111 16.8019 29.1047 16.8308C35.756 16.8815 44.2334 20.9528 46.067 24.9771L46.9019 26.8094L50.0813 24.9704C51.8299 23.9589 56.0467 22.2057 59.452 21.0745C62.8572 19.9432 69.126 17.0945 73.3825 14.7441C86.5797 7.4568 91.9495 8.60911 88.0693 17.8957C87.1426 20.1136 87.1013 20.7746 87.8758 20.9885C88.4176 21.1381 90.7764 21.6949 93.1175 22.2258C95.4586 22.7567 99.1153 24.0113 101.244 25.0138C103.47 26.0625 105.227 26.5035 105.381 26.0522C106.108 23.9207 109.863 20.5543 113.496 18.7767C121.48 14.8705 129.821 16.2719 136.096 22.5734C144.331 30.8436 144.07 43.5488 135.479 52.6587L132.888 55.4054L134.304 58.1648C139.098 67.5094 141.882 89.356 138.519 91.2381C137.738 91.6754 136.068 94.33 134.808 97.1372C133.549 99.9445 131.329 103.897 129.875 105.92L127.232 109.599L129.138 113.009C131.494 117.224 133.61 123.28 136.141 133.054C137.783 139.392 137.955 141.046 137.245 143.682C136.379 146.898 134.674 148.378 131.837 148.378C130.416 148.378 130.323 148.17 131.096 146.724C132.574 143.963 130.844 137.543 128.623 137.543C128.249 137.543 127.944 139.482 127.944 141.851C127.944 147.412 127.003 149.152 123.995 149.152C121.902 149.152 121.712 148.964 122.241 147.411C123.599 143.421 122.371 140.153 119.873 141.112C118.516 141.633 118.513 142.598 119.857 147.286C120.305 148.85 120.108 148.893 113.878 148.601C103.574 148.118 103.691 148.175 104.332 143.903C104.985 139.55 106.216 137.023 108.91 134.506C111.389 132.19 111.447 131.352 109.129 131.352C105.122 131.352 101.334 137.648 101.765 143.591C101.924 145.781 101.679 147.195 101.107 147.388C100.606 147.557 98.4973 146.021 96.4217 143.974C91.0139 138.641 84.8324 136.379 75.7047 136.394C65.4379 136.411 55.9784 140.09 53.7761 144.924C52.5995 147.506 50.5523 147.422 50.5523 144.792C50.5523 138.705 45.7393 131.352 41.7544 131.352C39.2305 131.352 39.1934 131.878 41.5848 133.759C43.7527 135.464 46.3191 140.587 47.0028 144.573C47.4224 147.019 47.2448 147.453 45.4964 148.249C44.4063 148.746 42.1499 149.152 40.4823 149.152C37.0334 149.152 35.4498 147.261 35.7241 143.471C35.8303 142.004 35.5607 141.38 34.9137 141.595C34.3804 141.773 33.3347 141.195 32.59 140.311C31.4228 138.926 31.1285 138.865 30.4581 139.865C29.3701 141.489 29.4692 143.336 30.8175 146.563C31.456 148.091 31.9784 149.473 31.9784 149.634C31.9784 150.507 28.1524 149.711 25.98 148.387ZM115.868 146.374C116.394 145.002 115.853 143.735 114.742 143.735C114.341 143.735 114.013 144.605 114.013 145.67C114.013 147.834 115.143 148.263 115.868 146.374ZM91.9566 124.069C103.022 121.043 114.574 113.979 122.321 105.503C127.621 99.7044 129.511 95.5257 130.048 88.4223C130.472 82.8245 131.146 81.2865 132.093 83.7559C132.338 84.3944 132.898 84.9168 133.337 84.9168C134.644 84.9168 134.246 77.8592 132.57 71.3035C126.233 46.5239 104.919 26.7642 84.4495 26.6906L78.4902 26.6687L80.4311 22.8384C83.5511 16.6813 82.8722 16.3991 74.5434 20.391C70.4997 22.3292 64.231 24.9677 60.6129 26.2543C49.806 30.0974 43.6682 33.8018 35.9711 41.1265C24.4494 52.0907 17.2734 67.1623 17.2734 80.3966C17.2734 85.0006 17.8628 85.8428 19.6107 83.7367C21.1038 81.9376 21.4065 82.8773 21.2169 88.723C20.9681 96.3935 23.2197 100.789 31.4079 108.618C40.0663 116.896 52.9302 123.422 63.8748 125.09C70.8337 126.15 86.418 125.583 91.9566 124.069ZM71.0608 116.092C68.692 115.516 64.604 112.167 63.4242 109.836C62.8431 108.687 62.1412 106.495 61.8645 104.965C61.5069 102.986 60.4702 101.465 58.2784 99.7041C55.1122 97.1597 54.2692 94.5107 56.3693 93.7048C57.0807 93.4318 58.1528 94.0292 59.0902 95.2209C61.2564 97.9748 65.1992 99.1749 68.0611 97.9516C71.7095 96.3921 73.1274 94.9082 72.1242 93.6994C71.6479 93.1255 70.8052 92.656 70.2515 92.656C68.4428 92.656 64.6078 88.7973 64.0947 86.4611C62.9235 81.1287 66.1205 78.7608 75.2427 78.2039C80.2424 77.8987 81.5003 78.0844 83.6527 79.4443C85.0448 80.324 86.5769 81.9065 87.0574 82.9611C87.8035 84.5986 87.6243 85.3421 85.8295 88.0543C84.6336 89.8613 82.5825 91.7086 81.0704 92.3403C77.878 93.6742 77.7748 94.3634 80.4522 96.4694C83.5674 98.9198 87.9144 98.6217 90.9176 95.7517C93.7998 92.9972 94.3924 92.8986 95.078 95.0588C95.4654 96.2792 94.9172 97.3954 92.8925 99.5089C91.4062 101.06 89.9334 103.201 89.6197 104.265C87.3971 111.804 82.0338 116.706 76.1686 116.558C74.2106 116.508 71.9121 116.299 71.0608 116.092ZM79.7682 109.915C83.0629 107.479 85.1824 103.559 83.71 102.626C83.1378 102.263 81.7989 101.937 80.7348 101.9C79.6706 101.864 78.1035 101.56 77.2521 101.225C76.4008 100.89 75.0078 100.89 74.1565 101.226C73.3052 101.561 71.6509 102.041 70.4804 102.291C68.0794 102.805 67.8234 104.093 69.4841 107.305C70.7555 109.763 75.2076 112.91 76.4442 112.224C76.8886 111.977 78.3844 110.938 79.7682 109.915ZM81.1153 82.464C82.4597 81.2249 79.8115 80.297 74.9304 80.297C69.7394 80.297 67.8942 81.0596 68.6048 82.9113C69.0091 83.9648 69.9546 84.0814 74.7155 83.6645C77.8133 83.3933 80.6932 82.8531 81.1153 82.464ZM108.209 91.1618C105.02 90.3942 102.757 89.1153 97.6075 85.1706C88.9098 78.5075 84.6491 71.4408 84.6226 63.634C84.6027 58.0125 86.1764 54.5908 90.2896 51.3063C92.9909 49.1494 93.7811 48.9295 98.8332 48.9295C103.821 48.9295 104.869 49.2113 108.907 51.6383C114.44 54.9635 118.145 59.0891 121.07 65.1818C122.939 69.0741 123.299 70.802 123.3 75.8617C123.3 79.6201 122.877 82.7163 122.179 84.0664C120.694 86.9384 115.88 91.1082 114.05 91.1082C113.248 91.1082 112.128 91.2459 111.561 91.4144C110.994 91.5829 109.486 91.4693 108.209 91.1618ZM108.121 69.7763C108.843 67.8948 106.595 64.3417 104.004 63.2684C99.7927 61.524 93.8915 64.5259 93.8915 68.4124C93.8915 70.7111 95.0335 70.6914 97.8225 68.3446C100.379 66.1938 102.237 66.4016 104.795 69.1243C106.841 71.3019 107.487 71.4285 108.121 69.7763ZM33.5258 89.5774C32.036 88.7731 29.9464 86.8086 28.8823 85.212C27.2079 82.6998 26.9521 81.4687 26.9823 76.0672C27.025 68.4074 29.3309 62.7577 34.5409 57.5477C41.4572 50.6314 49.3855 47.5436 55.7958 49.2698C66.9645 52.2771 69.7489 65.3698 61.5426 76.2914C58.45 80.4073 49.4697 88.0047 45.4046 89.9445C42.1063 91.5183 36.8182 91.3549 33.5258 89.5774ZM45.9436 69.0092C47.8994 66.6525 49.6318 66.2274 52.0929 67.5C53.3737 68.1623 54.4216 69.0436 54.4216 69.4583C54.4216 69.873 54.944 70.2123 55.5825 70.2123C57.7095 70.2123 56.8965 66.6092 54.2709 64.3999C50.4976 61.2248 45.2018 62.4818 43.5006 66.9563C42.3631 69.9481 44.0134 71.3348 45.9436 69.0092ZM31.9881 36.749L37.6551 31.5768L35.5401 30.7727C29.9335 28.641 23.1666 30.7246 20.7937 35.3133C19.2662 38.2671 19.2786 40.7546 20.8402 44.6574L22.0851 47.7688L24.2032 44.845C25.3681 43.2369 28.8713 39.5937 31.9881 36.749ZM131.427 39.1513C131.427 34.8831 129.847 32.7441 125.138 30.6366C122.485 29.4488 121.505 29.3557 119.334 30.0847C117.897 30.567 116.098 31.5018 115.336 32.1619C114.004 33.3148 114.005 33.3947 115.368 34.1806C118.931 36.2354 121.882 39.0312 124.931 43.2395L128.233 47.7976L129.83 45.2758C130.853 43.6598 131.427 41.46 131.427 39.1513Z" fill="#212529"/>
+<path d="M242.547 134.233L242.557 144.234H252.548V134.233H242.547Z" fill="#0068A2"/>
+<path d="M226.456 134.233L226.466 144.234H236.457V134.233H226.456Z" fill="#0068A2"/>
+<path d="M258.628 134.233L258.638 144.234H268.639V134.233H258.628Z" fill="#0068A2"/>
+<path d="M210.365 134.233L210.375 144.234H220.376V134.233H210.365Z" fill="#0068A2"/>
+<path d="M204.285 134.233H194.294L194.284 124.222H204.285V134.233Z" fill="#0068A2"/>
+<path d="M162.112 124.222L162.122 134.223H172.113V124.222H162.112Z" fill="#0068A2"/>
+<path d="M188.204 134.233H178.203L178.193 124.222H188.204V134.233Z" fill="#0068A2"/>
+<path d="M408.938 102.897H408.698C407.738 104.657 406.138 106.017 404.058 107.137C401.898 108.257 399.498 108.737 396.778 108.737C395.178 108.737 393.578 108.577 391.898 108.177C390.218 107.777 388.698 107.137 387.258 106.177C385.818 105.217 384.698 104.017 383.738 102.497C382.778 100.977 382.378 99.0567 382.378 96.8167C382.378 93.9367 383.178 91.6967 384.778 89.9367C386.378 88.2567 388.538 86.9767 391.098 86.0167C393.658 85.1367 396.458 84.5767 399.578 84.2567C402.698 83.9367 405.738 83.7767 408.778 83.7767V82.8167C408.778 80.4167 407.898 78.6567 406.138 77.5367C404.378 76.4167 402.378 75.7767 399.978 75.7767C397.898 75.7767 395.978 76.2567 394.138 77.0567C392.218 77.9367 390.698 78.9767 389.498 80.1767L384.538 74.3367C386.698 72.3367 389.178 70.8167 392.058 69.7767C394.938 68.8167 397.818 68.2567 400.778 68.2567C404.138 68.2567 406.938 68.7367 409.178 69.6967C411.418 70.6567 413.178 71.9367 414.458 73.4567C415.738 75.0567 416.618 76.7367 417.098 78.6567C417.578 80.5767 417.898 82.4967 417.898 84.4167V107.777H408.938V102.897ZM408.778 90.2567H406.618C405.018 90.2567 403.418 90.3367 401.738 90.4967C399.978 90.6567 398.458 90.8967 397.018 91.3767C395.578 91.8567 394.378 92.4967 393.418 93.2967C392.458 94.0967 391.978 95.2167 391.978 96.6567C391.978 97.6167 392.138 98.3367 392.538 98.9767C392.938 99.6167 393.498 100.097 394.138 100.417C394.778 100.817 395.498 101.057 396.298 101.217C397.098 101.377 397.898 101.457 398.698 101.457C401.978 101.457 404.458 100.577 406.218 98.8167C407.898 97.0567 408.778 94.6567 408.778 91.6167V90.2567Z" fill="#212529"/>
+<path d="M377.434 107.777H368.314V102.017H368.154C366.794 104.257 364.954 106.017 362.554 107.137C360.154 108.337 357.674 108.897 354.954 108.897C351.994 108.897 349.354 108.417 347.034 107.297C344.714 106.177 342.714 104.737 341.114 102.897C339.514 101.057 338.234 98.8968 337.354 96.4168C336.474 93.9368 336.074 91.2968 336.074 88.4168C336.074 85.6168 336.474 82.9768 337.434 80.4968C338.314 78.0968 339.594 75.9368 341.274 74.0968C342.874 72.3368 344.874 70.8968 347.194 69.8568C349.434 68.8168 351.994 68.2568 354.714 68.2568C356.474 68.2568 357.994 68.4968 359.434 68.8968C360.794 69.2968 361.994 69.7768 363.034 70.3368C364.074 70.9768 364.954 71.6168 365.754 72.2568C366.474 72.9768 367.114 73.6168 367.594 74.2568H367.834V47.2968H377.434V107.777ZM345.834 88.4168C345.834 89.9368 345.994 91.4568 346.474 92.8968C346.954 94.4168 347.594 95.7768 348.554 96.8968C349.434 98.0968 350.554 99.0568 351.994 99.7768C353.354 100.577 354.954 100.897 356.874 100.897C358.634 100.897 360.154 100.577 361.594 99.8568C362.954 99.1368 364.154 98.1768 365.114 96.9768C366.074 95.8568 366.874 94.4968 367.354 93.0568C367.834 91.6168 368.154 90.0968 368.154 88.5768C368.154 87.1368 367.834 85.6168 367.354 84.0968C366.874 82.6568 366.074 81.2968 365.114 80.0968C364.154 78.9768 362.954 78.0168 361.594 77.2168C360.154 76.4968 358.634 76.0968 356.874 76.0968C354.954 76.0968 353.354 76.4968 351.994 77.2168C350.554 77.9368 349.434 78.8968 348.554 80.0168C347.594 81.2168 346.954 82.5768 346.474 84.0168C345.994 85.4568 345.834 86.9768 345.834 88.4168Z" fill="#212529"/>
+<path d="M330.731 107.777H321.611V102.017H321.451C320.091 104.257 318.251 106.017 315.851 107.137C313.451 108.337 310.971 108.897 308.251 108.897C305.291 108.897 302.651 108.417 300.331 107.297C298.011 106.177 296.011 104.737 294.411 102.897C292.811 101.057 291.531 98.8968 290.651 96.4168C289.771 93.9368 289.371 91.2968 289.371 88.4168C289.371 85.6168 289.771 82.9768 290.731 80.4968C291.611 78.0968 292.891 75.9368 294.571 74.0968C296.171 72.3368 298.171 70.8968 300.491 69.8568C302.731 68.8168 305.291 68.2568 308.011 68.2568C309.771 68.2568 311.291 68.4968 312.731 68.8968C314.091 69.2968 315.291 69.7768 316.331 70.3368C317.371 70.9768 318.251 71.6168 319.051 72.2568C319.771 72.9768 320.411 73.6168 320.891 74.2568H321.131V47.2968H330.731V107.777ZM299.131 88.4168C299.131 89.9368 299.291 91.4568 299.771 92.8968C300.251 94.4168 300.891 95.7768 301.851 96.8968C302.731 98.0968 303.851 99.0568 305.291 99.7768C306.651 100.577 308.251 100.897 310.171 100.897C311.931 100.897 313.451 100.577 314.891 99.8568C316.251 99.1368 317.451 98.1768 318.411 96.9768C319.371 95.8568 320.171 94.4968 320.651 93.0568C321.131 91.6168 321.451 90.0968 321.451 88.5768C321.451 87.1368 321.131 85.6168 320.651 84.0968C320.171 82.6568 319.371 81.2968 318.411 80.0968C317.451 78.9768 316.251 78.0168 314.891 77.2168C313.451 76.4968 311.931 76.0968 310.171 76.0968C308.251 76.0968 306.651 76.4968 305.291 77.2168C303.851 77.9368 302.731 78.8968 301.851 80.0168C300.891 81.2168 300.251 82.5768 299.771 84.0168C299.291 85.4568 299.131 86.9768 299.131 88.4168Z" fill="#212529"/>
+<path d="M249.129 69.3767H258.249V75.5367H258.409C259.209 73.6167 260.729 71.9367 262.809 70.4967C264.889 69.0567 267.449 68.2567 270.329 68.2567C272.809 68.2567 274.969 68.7367 276.729 69.6167C278.489 70.4967 280.009 71.6167 281.129 73.0567C282.249 74.4967 283.129 76.1767 283.689 78.0167C284.169 79.9367 284.489 81.8567 284.489 83.7767V107.777H274.889V86.4967C274.889 85.3767 274.809 84.2567 274.649 82.9767C274.489 81.7767 274.089 80.6567 273.609 79.6967C273.049 78.7367 272.329 77.8567 271.369 77.2167C270.409 76.5767 269.209 76.2567 267.689 76.2567C266.089 76.2567 264.809 76.5767 263.689 77.2167C262.569 77.8567 261.609 78.5767 260.889 79.5367C260.169 80.4967 259.609 81.6167 259.289 82.8967C258.889 84.1767 258.729 85.3767 258.729 86.6567V107.777H249.129V69.3767Z" fill="#212529"/>
+<path d="M232.984 102.897H232.744C231.784 104.657 230.184 106.017 228.104 107.137C225.944 108.257 223.544 108.737 220.824 108.737C219.224 108.737 217.624 108.577 215.944 108.177C214.264 107.777 212.744 107.137 211.304 106.177C209.864 105.217 208.744 104.017 207.784 102.497C206.824 100.977 206.424 99.0567 206.424 96.8167C206.424 93.9367 207.224 91.6967 208.824 89.9367C210.424 88.2567 212.584 86.9767 215.144 86.0167C217.704 85.1367 220.504 84.5767 223.624 84.2567C226.744 83.9367 229.784 83.7767 232.824 83.7767V82.8167C232.824 80.4167 231.944 78.6567 230.184 77.5367C228.424 76.4167 226.424 75.7767 224.024 75.7767C221.944 75.7767 220.024 76.2567 218.184 77.0567C216.264 77.9367 214.744 78.9767 213.544 80.1767L208.584 74.3367C210.744 72.3367 213.224 70.8167 216.104 69.7767C218.984 68.8167 221.864 68.2567 224.824 68.2567C228.184 68.2567 230.984 68.7367 233.224 69.6967C235.464 70.6567 237.224 71.9367 238.504 73.4567C239.784 75.0567 240.664 76.7367 241.144 78.6567C241.624 80.5767 241.944 82.4967 241.944 84.4167V107.777H232.984V102.897ZM232.824 90.2567H230.664C229.064 90.2567 227.464 90.3367 225.784 90.4967C224.024 90.6567 222.504 90.8967 221.064 91.3767C219.624 91.8567 218.424 92.4967 217.464 93.2967C216.504 94.0967 216.024 95.2167 216.024 96.6567C216.024 97.6167 216.184 98.3367 216.584 98.9767C216.984 99.6167 217.544 100.097 218.184 100.417C218.824 100.817 219.544 101.057 220.344 101.217C221.144 101.377 221.944 101.457 222.744 101.457C226.024 101.457 228.504 100.577 230.264 98.8167C231.944 97.0567 232.824 94.6567 232.824 91.6167V90.2567Z" fill="#212529"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M191.143 96.8731C192.034 95.718 192.713 94.3804 193.159 92.9112C193.605 91.4318 193.838 89.9321 193.858 88.4628C193.858 86.9935 193.625 85.5141 193.179 84.0651C192.734 82.6161 192.055 81.2988 191.163 80.1437C190.271 78.9885 189.126 78.0563 187.768 77.347C186.401 76.6377 184.779 76.283 182.945 76.283C181.223 76.283 179.652 76.658 178.294 77.3875C176.926 78.1171 175.741 79.0797 174.768 80.2349C173.795 81.39 173.055 82.7276 172.549 84.1969C172.052 85.6661 171.799 87.1557 171.799 88.6351C171.799 90.1145 172.052 91.5939 172.549 93.0328C173.045 94.4818 173.795 95.799 174.768 96.9542C175.731 98.1094 176.916 99.0517 178.284 99.761C179.642 100.47 181.202 100.825 182.935 100.825C184.769 100.825 186.39 100.45 187.748 99.7205C189.106 98.9808 190.251 98.0283 191.143 96.8731ZM192.734 69.6257C195.044 70.6694 197.06 72.1286 198.732 73.9626C200.394 75.7967 201.701 77.9752 202.613 80.4375C203.525 82.91 203.991 85.6053 203.991 88.4527C203.991 91.3 203.535 94.0055 202.654 96.5084C201.762 99.0112 200.485 101.22 198.844 103.074C197.202 104.929 195.186 106.439 192.845 107.533C190.494 108.637 187.809 109.195 184.85 109.195C182.104 109.195 179.551 108.627 177.261 107.492C175.072 106.418 173.339 104.939 172.103 103.115V118.183H162.102V69.1697H171.698V74.4895C172.174 73.7802 172.782 73.0506 173.522 72.3109C174.312 71.5307 175.285 70.8214 176.42 70.1932C177.544 69.5751 178.841 69.0583 180.27 68.653C181.699 68.2476 183.33 68.045 185.104 68.045C187.85 68.045 190.413 68.5719 192.734 69.6257Z" fill="#212529"/>
+<path d="M487.534 25.0894V20.9342H482.467V15.7656H477.399V20.9342H473.954V25.0894H477.399V34.3118C477.399 35.3253 477.501 36.2374 477.703 37.0482C477.906 37.8589 478.21 38.6697 478.717 39.3791C479.224 40.0885 479.933 40.5953 480.744 40.8993C481.555 41.3047 482.669 41.5074 483.987 41.5074C484.595 41.5074 485.102 41.406 485.71 41.406C486.318 41.3047 486.825 41.2033 487.331 41.0006H487.433L487.23 36.8455L487.129 36.9468C486.825 37.0482 486.521 37.1495 486.115 37.2508C485.71 37.3522 485.406 37.3522 485 37.3522C483.886 37.3522 483.277 37.0482 482.973 36.5414C482.669 35.9334 482.467 35.2239 482.467 34.4132V25.0894H487.534Z" fill="#212529"/>
+<path d="M394.093 28.9405C394.195 27.623 394.803 26.5082 395.816 25.5961C396.83 24.684 398.147 24.2786 399.566 24.2786C400.377 24.2786 401.086 24.3799 401.593 24.684C402.201 24.988 402.708 25.292 403.012 25.6974C403.417 26.1028 403.62 26.6095 403.822 27.2176C404.025 27.7243 404.127 28.3324 404.127 28.9405H394.093ZM406.559 23.0624C405.647 22.1503 404.633 21.4409 403.417 21.0355C402.201 20.5288 400.883 20.3261 399.566 20.3261C398.046 20.3261 396.627 20.6301 395.309 21.1369C393.992 21.6436 392.877 22.353 391.965 23.3665C391.053 24.2786 390.242 25.3934 389.735 26.8122C389.229 28.1297 388.925 29.6499 388.925 31.2714C388.925 32.893 389.229 34.4132 389.735 35.7307C390.242 37.0481 391.053 38.1629 391.965 39.0751C392.979 39.9872 394.093 40.6966 395.411 41.102C396.728 41.6087 398.147 41.8114 399.769 41.8114C403.518 41.8114 406.457 40.4939 408.383 37.7576L408.484 37.6562L405.039 34.9199L404.937 35.0212C404.431 35.832 403.721 36.4401 402.809 36.8455C401.998 37.2508 400.883 37.5549 399.667 37.5549C398.958 37.5549 398.248 37.4535 397.64 37.1495C397.032 36.9468 396.424 36.5414 395.918 36.136C395.411 35.7307 395.005 35.2239 394.701 34.6159C394.397 34.1091 394.195 33.3997 394.195 32.7916H409.397V32.6903C409.397 32.4876 409.397 32.2849 409.397 31.9809V31.2714C409.397 29.4472 409.194 27.8257 408.687 26.5082C408.079 25.1907 407.471 23.9746 406.559 23.0624Z" fill="#212529"/>
+<path d="M376.561 26.7109C376.966 26.1028 377.574 25.5961 378.283 25.2921C378.993 24.8867 379.804 24.7853 380.614 24.7853C381.425 24.7853 382.135 24.988 382.945 25.2921C383.655 25.6974 384.263 26.1028 384.668 26.6095L384.77 26.7109L388.215 23.6705L388.317 23.5692L388.215 23.4678C387.405 22.4544 386.29 21.7449 384.871 21.1369C383.452 20.6301 382.033 20.3261 380.614 20.3261C379.094 20.3261 377.777 20.5288 376.459 21.0355C375.142 21.5423 374.027 22.2517 373.013 23.1638C372 24.0759 371.291 25.1907 370.682 26.5082C370.074 27.8257 369.872 29.3459 369.872 30.8661C369.872 32.4876 370.176 34.0078 370.682 35.3253C371.291 36.6428 372 37.7576 373.013 38.6697C374.027 39.5818 375.142 40.2912 376.459 40.7979C377.777 41.3047 379.196 41.5074 380.716 41.5074C382.236 41.5074 383.655 41.3047 384.972 40.7979C386.29 40.2912 387.303 39.5818 388.215 38.6697L388.317 38.5683L385.175 35.3253L385.074 35.2239L384.972 35.3253C384.465 35.9333 383.857 36.3387 383.148 36.6428C382.439 36.9468 381.628 37.0481 380.817 37.0481C379.905 37.0481 379.094 36.8455 378.385 36.5414C377.675 36.136 377.067 35.7307 376.662 35.1226C376.155 34.5145 375.851 33.8051 375.648 33.0957C375.446 32.3862 375.344 31.5755 375.344 30.7647C375.344 29.9539 375.446 29.2445 375.648 28.4338C375.851 28.0284 376.155 27.319 376.561 26.7109Z" fill="#212529"/>
+<path d="M447.604 22.8598C446.996 22.1503 446.185 21.4409 445.273 21.0355C444.361 20.5288 443.145 20.3261 441.928 20.3261C440.408 20.3261 439.091 20.7315 437.976 21.4409C436.962 22.1503 436.152 22.9611 435.746 23.8732V20.8328H430.78V41.0006H435.949V30.0553C435.949 29.4472 436.05 28.7378 436.253 28.1297C436.456 27.5217 436.76 26.9136 437.064 26.4069C437.469 25.9001 437.875 25.4947 438.483 25.1907C439.091 24.8867 439.699 24.684 440.51 24.684C441.32 24.684 441.928 24.8867 442.435 25.1907C442.942 25.4947 443.246 25.9001 443.55 26.4069C443.854 26.9136 443.955 27.5217 444.057 28.1297C444.158 28.7378 444.158 29.3459 444.158 29.954V41.102H449.327V28.5351C449.327 27.5217 449.225 26.5082 448.921 25.4947C448.617 24.4813 448.212 23.6705 447.604 22.8598Z" fill="#212529"/>
+<path d="M418.112 24.7853C418.72 24.4813 419.531 24.2786 420.24 24.2786C421.153 24.2786 421.963 24.4813 422.774 24.8867C423.484 25.292 424.092 25.7988 424.598 26.4069L424.7 26.5082L428.044 23.4678L427.943 23.3665C427.132 22.353 426.017 21.5423 424.598 21.0355C423.18 20.5288 421.761 20.3261 420.342 20.3261C419.328 20.3261 418.315 20.4275 417.403 20.7315C416.491 20.9342 415.579 21.3396 414.869 21.8463C414.16 22.353 413.45 23.0624 413.045 23.8732C412.538 24.684 412.336 25.6974 412.336 26.8122C412.336 27.7243 412.538 28.5351 412.842 29.2445C413.146 29.8526 413.653 30.4607 414.16 30.8661C414.768 31.2714 415.376 31.6768 416.085 31.8795C416.795 32.1836 417.504 32.3862 418.315 32.4876C419.835 32.893 420.95 33.197 421.761 33.6024C422.47 33.9064 422.875 34.5145 422.875 35.3253C422.875 35.7307 422.774 36.136 422.571 36.4401C422.369 36.7441 422.166 36.9468 421.862 37.1495C421.558 37.3522 421.254 37.4535 420.849 37.5549C420.443 37.6562 420.139 37.6562 419.734 37.6562C418.72 37.6562 417.707 37.4535 416.795 36.9468C415.883 36.4401 415.173 35.9333 414.666 35.2239L414.565 35.1226L411.119 38.3656L411.221 38.467C412.234 39.4804 413.45 40.3926 414.869 40.8993C416.389 41.5074 417.91 41.71 419.43 41.71C420.545 41.71 421.558 41.6087 422.571 41.406C423.585 41.2033 424.497 40.7979 425.308 40.2912C426.119 39.7845 426.727 39.0751 427.132 38.163C427.639 37.3522 427.841 36.2374 427.841 35.0212C427.841 34.0078 427.639 33.197 427.233 32.4876C426.828 31.7782 426.321 31.1701 425.713 30.7647C425.105 30.258 424.396 29.9539 423.585 29.6499C422.774 29.3459 422.065 29.1432 421.355 28.9405C419.936 28.6365 418.923 28.3324 418.112 27.927C417.403 27.623 417.099 27.1163 417.099 26.4069C417.099 25.5961 417.403 25.0894 418.112 24.7853Z" fill="#212529"/>
+<path d="M457.333 28.9405C457.434 27.623 458.042 26.5082 459.056 25.5961C460.069 24.684 461.387 24.2786 462.806 24.2786C463.616 24.2786 464.326 24.3799 464.833 24.684C465.441 24.988 465.947 25.292 466.251 25.6974C466.657 26.1028 466.859 26.6095 467.062 27.2176C467.265 27.7243 467.366 28.3324 467.366 28.9405H457.333ZM469.799 23.0624C468.886 22.1503 467.873 21.4409 466.657 21.0355C465.441 20.5288 464.123 20.3261 462.806 20.3261C461.285 20.3261 459.867 20.6301 458.549 21.1369C457.232 21.6436 456.117 22.353 455.205 23.3665C454.293 24.2786 453.482 25.3934 452.975 26.8122C452.468 28.1297 452.164 29.6499 452.164 31.2714C452.164 32.893 452.468 34.4132 452.975 35.7307C453.482 37.0481 454.293 38.1629 455.205 39.0751C456.117 39.9872 457.333 40.6966 458.65 41.102C459.968 41.6087 461.387 41.8114 463.008 41.8114C466.758 41.8114 469.697 40.4939 471.623 37.7576L471.724 37.6562L468.278 34.9199L468.177 35.0212C467.67 35.832 466.961 36.4401 466.049 36.8455C465.238 37.2508 464.123 37.5549 462.907 37.5549C462.198 37.5549 461.488 37.4535 460.88 37.1495C460.272 36.9468 459.664 36.5414 459.157 36.136C458.65 35.7307 458.245 35.2239 457.941 34.6159C457.637 34.1091 457.434 33.3997 457.434 32.7916H472.636V32.6903C472.636 32.4876 472.636 32.2849 472.636 31.9809V31.2714C472.636 29.4472 472.433 27.8257 471.927 26.5082C471.319 25.1907 470.711 23.9746 469.799 23.0624Z" fill="#212529"/>
+</svg>
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo-white.svg
similarity index 100%
rename from frontend/src/assets/logo.svg
rename to frontend/src/assets/logo-white.svg
diff --git a/frontend/src/components/ActivityClassBadge.vue b/frontend/src/components/ActivityClassBadge.vue
index b9f0464..625f483 100644
--- a/frontend/src/components/ActivityClassBadge.vue
+++ b/frontend/src/components/ActivityClassBadge.vue
@@ -3,10 +3,12 @@ defineProps(['value'])
 </script>
 
 <template>
-  <span v-if="value == 'off'" class="badge bg-dark-subtle">
+  <span v-if="value == 'off'" class="badge bg-dark-subtle text-reset">
     <i class="fa fa-power-off me-2" aria-hidden="true"></i>Off
   </span>
-  <span v-else-if="value == 'idle'" class="badge bg-dark-subtle border border-white">Idle</span>
+  <span v-else-if="value == 'idle'" class="badge bg-dark-subtle border border-secondary text-reset"
+    >Idle</span
+  >
   <span v-else-if="value == 'light'" class="badge bg-info text-dark">Light</span>
   <span v-else-if="value == 'medium'" class="badge bg-warning text-dark">Medium</span>
   <span v-else-if="value == 'high'" class="badge bg-danger">High</span>
diff --git a/frontend/src/components/ActivityTimeline.vue b/frontend/src/components/ActivityTimeline.vue
index 64be34f..4b6944e 100644
--- a/frontend/src/components/ActivityTimeline.vue
+++ b/frontend/src/components/ActivityTimeline.vue
@@ -10,10 +10,13 @@ import {
   CHART_SCALE_X_OPTIONS,
   resampleTimedData,
   setChartDatetimeRange,
+  themeTextColor,
 } from '@/utils/commonCharts.js'
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
 
 ChartJS.register(...registerables, annotationPlugin)
-ChartJS.defaults.color = '#dee2e6'
 ChartJS.defaults.borderColor = '#495057'
 
 const props = defineProps({
@@ -44,12 +47,13 @@ const props = defineProps({
 })
 
 const CHART_UNITS = ['pkt', 'flw', 'B']
-const CHART_COLORS = ['#0DCAF0', '#198754', '#FFC107']
+const CHART_COLORS = ['#3498DB', '#198754', '#F39C12']
 
 const DIRECTION_PREFIX = props.incomingDirection ? 'in_' : 'out_'
 
 const chartOptions = computed(() => {
   let scaleXOptions = { ...CHART_SCALE_X_OPTIONS }
+  scaleXOptions.ticks.color = themeTextColor(themeStore.isDark)
 
   // Set the time range of the chart
   setChartDatetimeRange(scaleXOptions, props.timePickerState.from, props.timePickerState.to)
diff --git a/frontend/src/components/NavigationBar.vue b/frontend/src/components/NavigationBar.vue
index e299eaf..cca09c0 100644
--- a/frontend/src/components/NavigationBar.vue
+++ b/frontend/src/components/NavigationBar.vue
@@ -1,7 +1,11 @@
 <script setup>
 import { RouterLink, useRoute } from 'vue-router'
 
+import { useThemeStore } from '@/stores/theme'
+import ThemeToggle from '@/components/ThemeToggle.vue'
+
 const route = useRoute()
+const theme = useThemeStore()
 </script>
 
 <template>
@@ -9,7 +13,13 @@ const route = useRoute()
     <div class="container">
       <div class="navbar-brand">
         <RouterLink :to="{ name: 'home' }" class="navbar-brand">
-          <img src="@/assets/logo.svg" alt="PANDDA" class="logo" />
+          <img
+            v-if="theme.theme === 'dark'"
+            src="@/assets/logo-white.svg"
+            alt="PANDDA"
+            class="logo"
+          />
+          <img v-else src="@/assets/logo-black.svg" alt="PANDDA" class="logo" />
         </RouterLink>
       </div>
       <button
@@ -19,8 +29,8 @@ const route = useRoute()
       >
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="collapse navbar-collapse row" id="navbarSupportedContent">
-        <ul class="navbar-nav px-2">
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav px-2 me-auto">
           <li class="nav-item">
             <RouterLink
               :to="{ name: 'home' }"
@@ -42,6 +52,9 @@ const route = useRoute()
             </RouterLink>
           </li>
         </ul>
+        <div class="m-2">
+          <ThemeToggle />
+        </div>
       </div>
     </div>
   </nav>
diff --git a/frontend/src/components/ObservationsTimeline.vue b/frontend/src/components/ObservationsTimeline.vue
index ecc41f8..39e90f7 100644
--- a/frontend/src/components/ObservationsTimeline.vue
+++ b/frontend/src/components/ObservationsTimeline.vue
@@ -10,10 +10,13 @@ import {
   CHART_SCALE_X_OPTIONS,
   resampleTimedData,
   setChartDatetimeRange,
+  themeTextColor,
 } from '@/utils/commonCharts.js'
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
 
 ChartJS.register(...registerables, annotationPlugin)
-ChartJS.defaults.color = '#dee2e6'
 ChartJS.defaults.borderColor = '#495057'
 
 const props = defineProps({
@@ -55,6 +58,7 @@ const props = defineProps({
 
 const chartOptions = computed(() => {
   let scaleXOptions = { ...CHART_SCALE_X_OPTIONS }
+  scaleXOptions.ticks.color = themeTextColor(themeStore.isDark)
 
   // Set the time range of the chart
   setChartDatetimeRange(scaleXOptions, props.timePickerState.from, props.timePickerState.to)
@@ -69,6 +73,7 @@ const chartOptions = computed(() => {
         offset: true,
         ticks: {
           display: true,
+          color: themeTextColor(themeStore.isDark),
         },
         grid: {
           display: false,
diff --git a/frontend/src/components/ThemeToggle.vue b/frontend/src/components/ThemeToggle.vue
new file mode 100644
index 0000000..7b47d7b
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.vue
@@ -0,0 +1,20 @@
+<template>
+  <button
+    type="button"
+    class="btn btn-dark"
+    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    @click="theme.setTheme(isDark ? 'light' : 'dark')"
+  >
+    <span v-if="isDark" aria-hidden="true">☀️</span>
+    <span v-else aria-hidden="true">🌙</span>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+
+const theme = useThemeStore()
+const isDark = computed(() => theme.theme === 'dark')
+</script>
diff --git a/frontend/src/stores/theme.js b/frontend/src/stores/theme.js
new file mode 100644
index 0000000..844b8a5
--- /dev/null
+++ b/frontend/src/stores/theme.js
@@ -0,0 +1,33 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+/**
+ * Tracking of the current theme (dark or light).
+ */
+export const useThemeStore = defineStore('theme', () => {
+  const STORAGE_KEY = 'theme'
+  const theme = ref(initialTheme())
+
+  /**
+   * Determine the initial theme mode based on local storage or system preference.
+   */
+  function initialTheme() {
+    const saved = localStorage.getItem(STORAGE_KEY)
+    if (saved === 'dark' || saved === 'light') return saved
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  /**
+   * Sets the current theme.
+   */
+  function setTheme(newTheme) {
+    theme.value = newTheme === 'dark' ? 'dark' : 'light'
+    localStorage.setItem(STORAGE_KEY, theme.value)
+  }
+
+  return {
+    theme: computed(() => theme.value),
+    isDark: computed(() => theme.value === 'dark'),
+    setTheme,
+  }
+})
diff --git a/frontend/src/utils/commonCharts.js b/frontend/src/utils/commonCharts.js
index 2653585..1286609 100644
--- a/frontend/src/utils/commonCharts.js
+++ b/frontend/src/utils/commonCharts.js
@@ -35,6 +35,13 @@ export const CHART_COMMON_OPTIONS = {
   maintainAspectRatio: false,
 }
 
+/**
+ * Gets text color based on current theme
+ */
+export function themeTextColor(isDark) {
+  return isDark ? '#DEE2E6' : '#212529'
+}
+
 /**
  * Sets chart datetime range if both `dtFrom` and `dtTo` are provided
  * @param {Object} chartScaleXOptions Options for the X axis