CustomNewTabDashboard/settings.js at main · VIKAS-REREAL/CustomNewTabDashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
const defaultSettings = {
    theme: 'auto',
    background: { type: 'color', value: 'default' },
    pinSize: 'medium'
};

// Exposed state for other scripts
window.SettingsState = { ...defaultSettings };

function applyTheme(theme) {
    if (theme === 'auto') {
        document.body.removeAttribute('data-theme');
    } else {
        document.body.setAttribute('data-theme', theme);
    }
}

function applyBackground(background, theme) {
    const bgEl = document.getElementById('dynamic-bg');
    const overlay = document.getElementById('dynamic-overlay');
    if (!bgEl || !overlay) return;

    // Reset styles
    bgEl.style = '';
    overlay.style = '';

    const isDark = theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);

    if (background.type === 'color') {
        // Relies on default CSS variables
    } else if (background.type === 'custom_color') {
        bgEl.style.backgroundColor = background.value || '#000000';
    } else if (background.type === 'gradient_preset' || background.type === 'gradient_custom') {
        bgEl.style.backgroundImage = background.value;
    } else if (background.type === 'image' && background.value) {
        bgEl.style.backgroundImage = `url(${background.value})`;
        bgEl.style.backgroundSize = 'cover';
        bgEl.style.backgroundPosition = 'center';

        // Overlay for readability
        overlay.style.backgroundColor = isDark ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.4)';
    }
}

function loadSettings(callback) {
    chrome.storage.local.get(['theme', 'background', 'pinSize'], (res) => {
        if (res.theme) window.SettingsState.theme = res.theme;
        if (res.background) window.SettingsState.background = res.background;
        if (res.pinSize) window.SettingsState.pinSize = res.pinSize;

        applyTheme(window.SettingsState.theme);
        applyBackground(window.SettingsState.background, window.SettingsState.theme);
        document.body.setAttribute('data-pin-size', window.SettingsState.pinSize);

        if (callback) callback();
    });
}

function updateSetting(key, value) {
    window.SettingsState[key] = value;
    chrome.storage.local.set({ [key]: value }, () => {
        if (key === 'theme' || key === 'background') {
            applyTheme(window.SettingsState.theme);
            applyBackground(window.SettingsState.background, window.SettingsState.theme);
        }
        if (key === 'pinSize') {
            document.body.setAttribute('data-pin-size', window.SettingsState.pinSize);
        }
    });
}

// Initial Sync
loadSettings();

// Listen for OS theme changes to update dynamic-overlay if theme is auto
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    if (window.SettingsState.theme === 'auto') {
        applyBackground(window.SettingsState.background, 'auto');
    }
});