-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathexample.html
61 lines (54 loc) · 2.59 KB
/
example.html
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
<!DOCTYPE html>
<html>
<head>
<title>SVG Dark Theme Switcher · Example</title>
<link rel="stylesheet" type="text/css" media="all" href="style/default.css" />
<!-- The script for the switches -->
<script type="text/javascript">
// Function to check if the theme is the same as in cookies
function getCookie(keks) {
/* Same as in switch.svg - needs improvement */
var keks = `; ${document.cookie}`.match(`;\\s*${keks}=([^;]+)`);
return keks ? keks[1] : '';
}
// Set theme to light
themeStyle = 'light';
// Function to set the theme
function setTheme() {
// Variables necessary for the identification of the dark theme
var darkThemeId = 'dark-theme-css';
var darkThemeFile = 'style/dark.css';
// If the result of the GetCookie Function is dark change the theme to dark
if (getCookie('themeStyle') == 'dark' && themeStyle != 'dark') {
// Set theme to dark
themeStyle = 'dark';
var style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('type', 'text/css');
style.setAttribute('media', 'all');
style.setAttribute('href', darkThemeFile);
style.setAttribute('id', darkThemeId);
document.head.appendChild(style);
} else if (getCookie('themeStyle') != 'dark' && themeStyle == 'dark') {
// If result of getCookie is not dark set theme to light
themeStyle = 'light';
document.getElementById(darkThemeId).remove();
}
}
// Call the Function SetTheme with a interval of 100ms
setInterval(setTheme, 100);
</script>
</head>
<!-- All of the switches in different sizes -->
<body>
<div class="content">
<div class="switcher">
<embed src="switch.svg" width="100" type="image/svg+xml" />
<embed src="switch.svg" width="200" type="image/svg+xml" />
<embed src="switch.svg" width="300" type="image/svg+xml" />
<embed src="switch.svg" width="400" type="image/svg+xml" />
<embed src="switch.svg" width="500" type="image/svg+xml" />
</div>
</div>
</body>
</html>