Choose a preset theme or customize your own with the options above.
3 |You can use it for your repo banners too!
4 |
5 |
6 | 8 | Questions? Comments? Issues? I will be glad to hear you. 9 |
11 |
19 | 20 |
You can use it for your repo banners too!
26 |
5 |
6 | 
10 | 19 | 20 | For God so loved the world, that he gave his only Son, that whoever believes in him should not 21 | perish but have eternal life. 22 | 23 |24 |
5 |
6 | 8 | Many of the patterns are here thanks to 9 | Hero Patterns 10 | 11 | and 12 | 13 | SVGBackgrounds.com 14 | 15 |
17 | Code icons created by Freepik - Flaticon 19 |
13 | Dark
14 | 
17 | Random
18 | 
21 | Reset
22 | 
36 | Download
37 | 
11 | 
14 | 
Light`
133 | toogleRandomizeButton.innerHTML = `
Random`
134 | toogleResetButton.innerHTML = `
Reset`
135 | toogleDownloadButton.innerHTML = `Download`
136 | } else {
137 | toogleDarkModeButton.innerHTML = `Dark`
138 | toogleRandomizeButton.innerHTML = `Random`
139 | toogleResetButton.innerHTML = `Reset`
140 | toogleDownloadButton.innerHTML = `Download`
141 | }
142 | });
143 |
144 | // Randomize
145 | document.querySelector('.randomize-button')
146 | .addEventListener('click', (e) => {
147 | const theme = getRandomPreset();
148 | setPreset(theme);
149 | });
150 |
151 | document.querySelector('.reset-button')
152 | .addEventListener('click', (e) => {
153 | const darkMode = localStorage.getItem('darkMode');
154 | localStorage.clear();
155 | localStorage.setItem('darkMode', darkMode);
156 | setPreset(initialTheme);
157 | });
158 |
159 | /* ************** Tabs ************** */
160 |
161 | function openTab(e, name) {
162 | let i, tabcontent, tablinks;
163 |
164 | tabcontent = document.getElementsByClassName("tabcontent");
165 | for (i = 0; i < tabcontent.length; i++) {
166 | tabcontent[i].style.display = "none";
167 | }
168 |
169 | tablinks = document.getElementsByClassName("tablinks");
170 | for (i = 0; i < tablinks.length; i++) {
171 | tablinks[i].className = tablinks[i].className.replace(" active", "");
172 | }
173 |
174 | document.getElementById(name).style.display = "block";
175 | e.currentTarget.className += " active";
176 | }
177 |
178 | document.querySelectorAll('.tab .tablinks')
179 | .forEach(button => {
180 | button.addEventListener('click', (e) => {
181 | const name = e.target.getAttribute('data-name');
182 | localStorage.setItem('openTab', name)
183 | openTab(e, name);
184 | });
185 | })
186 |
187 | // Saved tab
188 | document.addEventListener("DOMContentLoaded", (event) => {
189 | const openTab = localStorage.getItem('openTab');
190 | if (openTab) {
191 | document.querySelector(`[data-name="${openTab}"]`).click();
192 | } else {
193 | document.getElementById("defaultOpenTag").click();
194 | }
195 | });
196 |
197 | /* ************** Dark Mode ************** */
198 |
199 | function setLightMode() {
200 | localStorage.setItem('darkMode', 0);
201 | document.documentElement.setAttribute("data-theme", "light");
202 | document.querySelector('#light-mode-btn').classList.add('selected');
203 | document.querySelector('#dark-mode-btn').classList.remove('selected');
204 | }
205 | function setDarkMode() {
206 | localStorage.setItem('darkMode', 1);
207 | document.documentElement.setAttribute("data-theme", "dark");
208 | document.querySelector('#light-mode-btn').classList.remove('selected');
209 | document.querySelector('#dark-mode-btn').classList.add('selected');
210 | }
211 |
212 | document.addEventListener("DOMContentLoaded", (event) => {
213 | const localDarkMode = localStorage.getItem('darkMode');
214 | if (localDarkMode && localDarkMode == 1){
215 | document.querySelector('#dark-mode-btn').classList.add('selected');
216 | } else {
217 | document.querySelector('#light-mode-btn').classList.add('selected');
218 | }
219 | document.querySelector('#light-mode-btn').onclick = setLightMode;
220 | document.querySelector('#dark-mode-btn').onclick = setDarkMode;
221 | });
222 |
223 | /* ************** ************** ************** */
224 |
--------------------------------------------------------------------------------