Skip to content

Commit dfba272

Browse files
harys722harys722
authored
Update index.html
1 parent d483de1 commit dfba272

File tree

1 file changed

+141
-33
lines changed

1 file changed

+141
-33
lines changed

‎src/index.html‎

Lines changed: 141 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,59 +12,167 @@
1212
<!-- Google / Search Engine Tags -->
1313
<meta itemprop="name" content="GitHub Guides">
1414
<meta itemprop="description" content="Learn more about GitHub & GitHub pages as a developer.">
15-
<meta itemprop="image" content="https://harys722.github.io/github-guides/src/media/logo.png">
15+
<meta itemprop="image" content="https://harys722.github.io/github-guides/media/logo.png">
1616

1717
<!-- Facebook Meta Tags -->
1818
<meta property="og:url" content="https://harys722.github.io/github-guides/">
1919
<meta property="og:type" content="website">
2020
<meta property="og:title" content="GitHub Guides">
2121
<meta property="og:description" content="Learn more about GitHub & GitHub pages as a developer.">
22-
<meta property="og:image" content="https://harys722.github.io/github-guides/src/media/logo.png">
22+
<meta property="og:image" content="https://harys722.github.io/github-guides/media/logo.png">
2323

2424
<!-- Twitter Meta Tags -->
2525
<meta name="twitter:card" content="summary_large_image">
2626
<meta name="twitter:title" content="GitHub Guides">
2727
<meta name="twitter:description" content="Learn more about GitHub & GitHub pages as a developer.">
28-
<meta name="twitter:image" content="https://harys722.github.io/github-guides/src/media/logo.png">
29-
30-
<!-- Stylesheets -->
31-
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
32-
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css" title="docsify-darklight-theme" type="text/css">
28+
<meta property="twitter:image" content="https://harys722.github.io/github-guides/media/logo.png">
3329

3430
<!-- Favicon -->
3531
<link rel="shortcut icon" href="favicon.ico">
36-
</head>
3732

38-
<body>
39-
<noscript>This page requires JavaScript to work, please enable it or read <a href="https://github.com/harys722/github-guides">here</a>.</noscript>
33+
<!-- Theme Stylesheets - Default to light theme -->
34+
<link id="theme-light" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
35+
<link id="theme-dark" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css" disabled>
36+
37+
<!-- Custom styles for theme toggle -->
38+
<style>
39+
.theme-toggle {
40+
position: fixed;
41+
top: 80px;
42+
right: 20px;
43+
z-index: 1000;
44+
background: var(--theme-color, #42b983);
45+
border: none;
46+
border-radius: 25px;
47+
width: 60px;
48+
height: 30px;
49+
cursor: pointer;
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
font-size: 14px;
54+
color: white;
55+
transition: all 0.3s ease;
56+
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
57+
font-weight: 500;
58+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
59+
}
60+
61+
.theme-toggle:hover {
62+
transform: translateY(-2px);
63+
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
64+
}
65+
66+
.theme-toggle:active {
67+
transform: translateY(0);
68+
}
69+
70+
71+
.cover .theme-toggle {
72+
position: absolute;
73+
top: 80px;
74+
right: 20px;
75+
}
76+
77+
.github-corner {
78+
position: fixed !important;
79+
top: 0 !important;
80+
right: 0 !important;
81+
z-index: 999 !important;
82+
}
83+
84+
* {
85+
transition: background-color 0.3s ease, color 0.3s ease;
86+
}
87+
88+
@media (max-width: 768px) {
89+
.theme-toggle {
90+
top: 70px;
91+
right: 15px;
92+
width: 50px;
93+
height: 25px;
94+
font-size: 12px;
95+
}
96+
97+
.cover .theme-toggle {
98+
top: 70px;
99+
right: 15px;
100+
}
101+
}
102+
</style>
103+
</head>
104+
105+
<body>
106+
<noscript>This page requires JavaScript to work, please enable it or read the list <a href="https://github.com/wdhdev/free-for-life#readme">here</a>.</noscript>
107+
108+
<!-- Theme Toggle Button -->
109+
<button class="theme-toggle" id="themeToggle" title="Toggle theme">
110+
<span id="themeIcon">Dark</span>
111+
</button>
40112

41113
<div id="app">Loading...</div>
42114

43115
<script>
44-
window.$docsify = {
45-
name: "GitHub Guides",
46-
repo: "harys722/github-guides",
47-
search: ["/"],
48-
alias: {
49-
"/": "https://raw.githubusercontent.com/harys722/github-guides/main/README.md",
50-
},
51-
darklightTheme: {
52-
siteFont : "Source Sans Pro, Helvetica Neue",
53-
defaultTheme : "dark",
54-
codeFontFamily : "Roboto Mono, Monaco, courier, monospace",
55-
bodyFontSize: "15px"
116+
const themeToggle = document.getElementById('themeToggle');
117+
const themeIcon = document.getElementById('themeIcon');
118+
const lightTheme = document.getElementById('theme-light');
119+
const darkTheme = document.getElementById('theme-dark');
120+
121+
const currentTheme = localStorage.getItem('theme') || 'light';
122+
123+
if (currentTheme === 'dark') {
124+
enableDarkTheme();
125+
} else {
126+
enableLightTheme();
127+
}
128+
129+
themeToggle.addEventListener('click', () => {
130+
if (document.body.classList.contains('dark-theme')) {
131+
enableLightTheme();
132+
} else {
133+
enableDarkTheme();
134+
}
135+
});
136+
137+
function enableDarkTheme() {
138+
lightTheme.disabled = true;
139+
darkTheme.disabled = false;
140+
document.body.classList.add('dark-theme');
141+
themeIcon.textContent = '🌙';
142+
localStorage.setItem('theme', 'dark');
143+
}
144+
145+
function enableLightTheme() {
146+
lightTheme.disabled = false;
147+
darkTheme.disabled = true;
148+
document.body.classList.remove('dark-theme');
149+
themeIcon.textContent = '🔆';
150+
localStorage.setItem('theme', 'light');
56151
}
57-
}
58-
</script>
59152

60-
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
61-
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
62-
<script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js" type="text/javascript"></script>
153+
window.$docsify = {
154+
name: "GitHub Guides",
155+
repo: "harys722/github-guides",
156+
coverpage: true,
157+
search: ["/"],
158+
alias: {
159+
"/": "https://raw.githubusercontent.com/harys722/github-guides/main/README.md"
160+
},
161+
plugins: [
162+
function(hook, vm) {
163+
hook.doneEach(function() {
164+
const toggle = document.getElementById('themeToggle');
165+
if (toggle) {
166+
toggle.style.display = 'flex';
167+
}
168+
});
169+
}
170+
]
171+
}
172+
</script>
63173

64-
<style>
65-
blockquote:first-of-type {
66-
background-color: rgba(255, 215, 0, 0.2);
67-
}
68-
</style>
69-
</body>
174+
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
175+
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
176+
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
177+
</body>
70178
</html>

0 commit comments

Comments
 (0)