https://www.mod.gov.al/js/darkmode.js?v=1.2

1/**
2 * MOD Dark Mode
3 * Version 1.2
4 */
5
6(function () {
7    'use strict';
8
9    var STORAGE_KEY = 'mod-theme';
10    var root = document.documentElement;
11
12    function getSavedTheme() {
13        try {
14            return localStorage.getItem(STORAGE_KEY);
15        } catch (e) {
16            return null;
17        }
18    }
19
20    function saveTheme(theme) {
21        try {
22            localStorage.setItem(STORAGE_KEY, theme);
23        } catch (e) {
24            // localStorage mund të jetë i çaktivizuar.
25        }
26    }
27
28    function getSystemTheme() {
29        if (
30            window.matchMedia &&
31            window.matchMedia('(prefers-color-scheme: dark)').matches
32        ) {
33            return 'dark';
34        }
35
36        return 'light';
37    }
38
39    function syncIframeTheme(theme) {
40        var iframe = document.querySelector('.social-flockler-wall iframe');
41
42        if (!iframe) {
43            return;
44        }
45
46        try {
47            var iframeDocument =
48                iframe.contentDocument ||
49                iframe.contentWindow.document;
50
51            if (
52                iframeDocument &&
53                iframeDocument.documentElement
54            ) {
55                iframeDocument.documentElement.setAttribute(
56                    'data-theme',
57                    theme
58                );
59
60                iframeDocument.documentElement.style.colorScheme = theme;
61            }
62        } catch (e) {
63            /*
64             * Nëse iframe është cross-origin,
65             * browser-i nuk lejon aksesin te dokumenti i tij.
66             */
67        }
68    }
69
70    function updateSingleButton(button, theme) {
71        if (!button) {
72            return;
73        }
74
75        var iconDark = button.querySelector('.mod-theme-icon-dark');
76        var iconLight = button.querySelector('.mod-theme-icon-light');
77
78        if (theme === 'dark') {
79            button.setAttribute(
80                'aria-label',
81                'Aktivizo temën e çelët'
82            );
83
84            button.setAttribute(
85                'title',
86                'Light Mode'
87            );
88
89            if (iconDark) {
90                iconDark.style.display = 'none';
91            }
92
93            if (iconLight) {
94                iconLight.style.display = '';
95            }
96
97        } else {
98
99            button.setAttribute(
100                'aria-label',
101                'Aktivizo temën e errët'
102            );
103
104            button.setAttribute(
105                'title',
106                'Dark Mode'
107            );
108
109            if (iconDark) {
110                iconDark.style.display = '';
111            }
112
113            if (iconLight) {
114                iconLight.style.display = 'none';
115            }
116        }
117    }
118
119    function updateButtons(theme) {
120        var desktopButton =
121            document.getElementById('mod-theme-toggle');
122
123        var mobileButton =
124            document.getElementById('mod-theme-toggle-mobile');
125
126        updateSingleButton(desktopButton, theme);
127        updateSingleButton(mobileButton, theme);
128    }
129
130    function setTheme(theme, save) {
131        if (theme !== 'dark' && theme !== 'light') {
132            theme = 'light';
133        }
134
135        root.setAttribute('data-theme', theme);
136        root.style.colorScheme = theme;
137
138        /*
139         * Sinkronizojmë temën edhe me social stream iframe.
140         */
141        syncIframeTheme(theme);
142
143        if (save === true) {
144            saveTheme(theme);
145        }
146
147        /*
148         * Sinkronizojmë ikonat e desktop dhe mobile.
149         */
150        updateButtons(theme);
151    }
152
153    function toggleTheme() {
154        var current = root.getAttribute('data-theme');
155
156        if (current === 'dark') {
157            setTheme('light', true);
158        } else {
159            setTheme('dark', true);
160        }
161    }
162
163    function bindThemeButton(button) {
164        if (!button) {
165            return;
166        }
167
168        button.addEventListener('click', function (event) {
169            event.preventDefault();
170            toggleTheme();
171        });
172    }
173
174    function initSocialIframe() {
175        var iframe = document.querySelector(
176            '.social-flockler-wall iframe'
177        );
178
179        if (!iframe) {
180            return;
181        }
182
183        /*
184         * Kur iframe përfundon ngarkimin,
185         * i vendosim temën aktuale.
186         */
187        iframe.addEventListener('load', function () {
188            var currentTheme =
189                root.getAttribute('data-theme') || 'light';
190
191            syncIframeTheme(currentTheme);
192        });
193
194        /*
195         * Provojmë edhe menjëherë,
196         * në rast se iframe është ngarkuar tashmë.
197         */
198        syncIframeTheme(
199            root.getAttribute('data-theme') || 'light'
200        );
201    }
202

203    function init() {
204        var savedTheme = getSavedTheme();
205        var initialTheme = savedTheme || getSystemTheme();
206
207        setTheme(initialTheme, false);
208
209        /*
210         * Desktop theme button.
211         */
212        var desktopButton =
213            document.getElementById('mod-theme-toggle');
214
215        /*
216         * Mobile theme button.
217         */
218        var mobileButton =
219            document.getElementById('mod-theme-toggle-mobile');
220
221        bindThemeButton(desktopButton);
222        bindThemeButton(mobileButton);
223
224        initSocialIframe();
225    }
226
227    /*
228     * E vendosim temën sa më herët që të jetë e mundur.
229     */
230    var savedTheme = getSavedTheme();
231
232    if (savedTheme) {
233        setTheme(savedTheme, false);
234    } else {
235        setTheme(getSystemTheme(), false);
236    }
237
238    if (document.readyState === 'loading') {
239        document.addEventListener(
240            'DOMContentLoaded',
241            init
242        );
243    } else {
244        init();
245    }
246
247})();