ohoapp.github.io/settings.js at main · ohoapp/ohoapp.github.io · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

    let fontSize = 18;
    let lineHeight = 1.6;
    const dropdown = document.getElementById('dropdown');
    const body = document.body;

    // Load settings from localStorage
    function setThemeColor(colorHex) {
    // Chrome, Firefox, Edge
    let themeColorMeta = document.querySelector('meta[name="theme-color"]');
    if (!themeColorMeta) {
      themeColorMeta = document.createElement('meta');
      themeColorMeta.name = "theme-color";
      document.head.appendChild(themeColorMeta);
    }
    themeColorMeta.setAttribute("content", colorHex);

    // Windows Phone
    let msNavColorMeta = document.querySelector('meta[name="msapplication-navbutton-color"]');
    if (!msNavColorMeta) {
      msNavColorMeta = document.createElement('meta');
      msNavColorMeta.name = "msapplication-navbutton-color";
      document.head.appendChild(msNavColorMeta);
    }
    msNavColorMeta.setAttribute("content", colorHex);

    // Optional: iOS Safari - limited JS support
    // This one does NOT update dynamically via JS — added here just for completeness.
    // iOS needs color to be handled via manifest/splash or native PWA install settings.
  }

    function loadSettings() {
    const settings = JSON.parse(localStorage.getItem('uiSettings') || '{}');
    fontSize = settings.fontSize || 20;
    lineHeight = settings.lineHeight || 1.6;
    const theme = settings.theme || '';
    const nightLight = settings.nightLight || false;
    const fontFamily = settings.fontFamily || "TiffinDevnagri";

    // Apply loaded settings
    document.documentElement.style.setProperty('--font-size', `${fontSize}px`);
    document.documentElement.style.setProperty('--line-height', lineHeight);
    document.documentElement.style.setProperty('--font-family', fontFamily);
    body.classList.remove('dark-mode');
    if(theme == ''){

    }else{
      body.classList.add(theme);

        //document.querySelector("meta[name='theme-color']").setAttribute("content", "#F0F5FF");
        setThemeColor("#060A14");
    }
    if (nightLight) {
    body.classList.add('night-light');
    dropdown.classList.add('night-light');
    }
    }

    // Save settings to localStorage
    function saveSettings() {
    const settings = {
    fontSize: fontSize,
    lineHeight: lineHeight,
    theme: body.classList.contains('dark-mode') ? 'dark-mode' : '',
    nightLight: body.classList.contains('night-light'),
    fontFamily: document.documentElement.style.getPropertyValue('--font-family') || "'Georgia', serif"
    };
    localStorage.setItem('uiSettings', JSON.stringify(settings));
    }

    // Initialize settings on page load
    loadSettings();

    function toggleDropdown() {
    dropdown.classList.toggle('show');

    }

    function adjustFontSize(change) {
    fontSize = Math.max(12, Math.min(24, fontSize + change));
    document.documentElement.style.setProperty('--font-size', `${fontSize}px`);
    saveSettings();
    }

    function adjustLineHeight(change) {
    lineHeight = Math.max(1.2, Math.min(2.0, lineHeight + change));
    document.documentElement.style.setProperty('--line-height', lineHeight);
    saveSettings();
    }

    function toggleTheme() {
    body.classList.toggle('dark-mode');
    if (body.classList.contains('dark-mode')) {
        setThemeColor("#060A14");

        }else{
                  setThemeColor("#F0F5FF");

        }
    saveSettings();
    }

    function toggleNightLight() {
    body.classList.toggle('night-light');
    dropdown.classList.toggle('night-light');
    saveSettings();
    }

    function changeFont(font) {
    document.documentElement.style.setProperty('--font-family', font);
    saveSettings();
    }