Proje dosyaları eklendi

assets/js/app.js

@@ -0,0 +1,41 @@
+(function (window, document) {
+    'use strict';
+
+    var labels = { light: 'Açık', dark: 'Karanlık', system: 'Sistem' };
+    var icons = { light: '☀', dark: '☾', system: '◐' };
+
+    function updateThemeControls(event) {
+        var state = event && event.detail ? event.detail : {
+            preference: window.ThemeManager.getPreference(),
+            resolved: window.ThemeManager.getResolvedTheme()
+        };
+
+        document.querySelectorAll('[data-theme-value]').forEach(function (button) {
+            var active = button.dataset.themeValue === state.preference;
+            button.classList.toggle('active', active);
+            button.setAttribute('aria-pressed', String(active));
+        });
+        document.querySelectorAll('[data-theme-current-label]').forEach(function (node) {
+            node.textContent = labels[state.preference];
+        });
+        document.querySelectorAll('[data-theme-current-icon]').forEach(function (node) {
+            node.textContent = icons[state.preference];
+        });
+        document.querySelectorAll('[data-theme-preference]').forEach(function (node) {
+            node.textContent = labels[state.preference];
+        });
+        document.querySelectorAll('[data-theme-resolved]').forEach(function (node) {
+            node.textContent = labels[state.resolved];
+        });
+    }
+
+    document.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-theme-value]');
+        if (button) {
+            window.ThemeManager.setPreference(button.dataset.themeValue);
+        }
+    });
+
+    window.addEventListener('trafficpumper:theme-change', updateThemeControls);
+    updateThemeControls();
+}(window, document));

assets/js/theme-manager.js

@@ -0,0 +1,76 @@
+(function (window, document) {
+    'use strict';
+
+    var STORAGE_KEY = 'trafficpumper.theme';
+    var DEFAULT_PREFERENCE = 'system';
+    var VALID_PREFERENCES = ['light', 'dark', 'system'];
+    var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    var preference = readPreference();
+
+    function isValid(value) {
+        return VALID_PREFERENCES.indexOf(value) !== -1;
+    }
+
+    function readPreference() {
+        try {
+            var stored = window.localStorage.getItem(STORAGE_KEY);
+            return isValid(stored) ? stored : DEFAULT_PREFERENCE;
+        } catch (error) {
+            return DEFAULT_PREFERENCE;
+        }
+    }
+
+    function resolve(value) {
+        return value === 'system' ? (mediaQuery.matches ? 'dark' : 'light') : value;
+    }
+
+    function apply() {
+        var resolved = resolve(preference);
+        document.documentElement.setAttribute('data-bs-theme', resolved);
+        document.documentElement.style.colorScheme = resolved;
+
+        window.dispatchEvent(new window.CustomEvent('trafficpumper:theme-change', {
+            detail: { preference: preference, resolved: resolved }
+        }));
+
+        return resolved;
+    }
+
+    function setPreference(value) {
+        if (!isValid(value)) {
+            return false;
+        }
+
+        preference = value;
+        try {
+            window.localStorage.setItem(STORAGE_KEY, value);
+        } catch (error) {
+            // Depolama kapalıysa tema oturum boyunca yine çalışır.
+        }
+        apply();
+        return true;
+    }
+
+    function onSystemThemeChange() {
+        if (preference === 'system') {
+            apply();
+        }
+    }
+
+    if (typeof mediaQuery.addEventListener === 'function') {
+        mediaQuery.addEventListener('change', onSystemThemeChange);
+    } else if (typeof mediaQuery.addListener === 'function') {
+        mediaQuery.addListener(onSystemThemeChange);
+    }
+
+    window.ThemeManager = Object.freeze({
+        storageKey: STORAGE_KEY,
+        getPreference: function () { return preference; },
+        getResolvedTheme: function () { return resolve(preference); },
+        setPreference: setPreference,
+        apply: apply
+    });
+
+    // Bu dosya <head> içinde senkron çalıştığı için ilk boyadan önce uygulanır.
+    apply();
+}(window, document));