Skip to content

Commit 39ef583

Browse files
samllea1samllea1
committed
Small Update
- Added DarkMode
1 parent 13e5b32 commit 39ef583

File tree

2 files changed

+68
-17
lines changed

2 files changed

+68
-17
lines changed

‎Fonts/DIN Next LT Arabic Medium.ttf‎

135 KB
Binary file not shown.

‎index.html‎

Lines changed: 68 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,70 @@
1010
font-family: 'OpenSansSemiBold';
1111
src: url('Fonts/OpenSans-SemiBold.ttf') format('truetype');
1212
}
13+
:root {
14+
--background-color: #ffffff;
15+
--text-color: #000000;
16+
--highlight-color: #e0f7fa;
17+
--border-color: #cccccc;
18+
--code-background: #2d2d2d;
19+
}
20+
1321
body {
1422
font-family: 'OpenSansSemiBold', Arial, sans-serif;
1523
margin: 20px;
24+
background-color: var(--background-color);
25+
color: var(--text-color);
1626
scroll-behavior: smooth;
27+
transition: background-color 0.3s, color 0.3s;
28+
}
29+
30+
body.dark-mode {
31+
--background-color: #121212;
32+
--text-color: #ffffff;
33+
--highlight-color: #1e1e1e;
34+
--border-color: #333333;
35+
--code-background: #1e1e1e;
1736
}
18-
h1, h2 { color: #333; }
37+
38+
h1, h2 { color: var(--text-color); }
39+
1940
.function {
2041
margin-bottom: 40px;
2142
padding: 20px;
22-
border: 1px solid #ccc;
23-
background-color: #f9f9f9;
43+
border: 1px solid var(--border-color);
44+
background-color: var(--background-color);
2445
transition: background-color 0.3s ease, border 0.3s ease;
2546
position: relative;
26-
border-radius: 8px; /* Rounded corners for function outlines */
47+
border-radius: 8px;
2748
}
49+
2850
.function-name { font-weight: bold; color: #007BFF; }
2951
.function-description { margin-top: 10px; }
52+
3053
.code-block {
31-
background-color: #2d2d2d;
54+
background-color: var(--code-background);
3255
padding: 10px;
3356
border-radius: 5px;
3457
overflow-x: auto;
3558
}
59+
3660
.code-block pre {
3761
margin: 0;
38-
line-height: 1.4; /* Adjust line height to reduce spacing */
62+
line-height: 1.4;
3963
}
64+
4065
.toc { margin-bottom: 20px; }
4166
.toc ul { list-style-type: none; padding: 0; }
4267
.toc li { margin-bottom: 5px; }
4368
.toc a { text-decoration: none; color: #007BFF; cursor: pointer; }
4469
.toc a:hover { text-decoration: underline; }
70+
4571
.highlight {
46-
background-color: #e0f7fa;
72+
background-color: var(--highlight-color);
4773
border: 1px solid #007BFF;
48-
border-radius: 8px; /* Rounded corners for highlights */
74+
border-radius: 8px;
4975
}
50-
/* Fix for token spacing and outlines */
76+
5177
.token {
5278
background: none !important;
5379
box-shadow: none !important;
@@ -57,13 +83,27 @@
5783
margin: 0 !important;
5884
padding: 0 !important;
5985
}
86+
6087
code[class*="language-"] {
6188
border: none !important;
6289
outline: none !important;
6390
}
91+
92+
.dark-mode-toggle {
93+
position: fixed;
94+
top: 20px;
95+
right: 20px;
96+
background: none;
97+
border: none;
98+
font-size: 24px;
99+
cursor: pointer;
100+
color: var(--text-color);
101+
}
64102
</style>
65103
</head>
66104
<body>
105+
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
106+
67107
<h1>Schedule I Modding Documentation</h1>
68108
<p>Welcome to the modding documentation for Schedule I. Here you will find information on how to use various functions & components to modify the game.</p>
69109

@@ -99,7 +139,6 @@ <h3>Code Example:</h3>
99139
<pre><code class="language-csharp">
100140
using MelonLoader;
101141
using UnityEngine;
102-
103142
using Il2CppScheduleOne.Interaction; // Needed For Interactable Objects
104143

105144
public class MyClass : MelonMod
@@ -124,30 +163,42 @@ <h3>Code Example:</h3>
124163
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
125164
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-csharp.min.js"></script>
126165
<script>
166+
function toggleDarkMode() {
167+
document.body.classList.toggle('dark-mode');
168+
setDarkModeCookie(document.body.classList.contains('dark-mode'));
169+
}
170+
171+
function setDarkModeCookie(isDarkMode) {
172+
document.cookie = `darkMode=${isDarkMode}; path=/; max-age=${60 * 60 * 24 * 365}`;
173+
}
174+
175+
function getDarkModeCookie() {
176+
return document.cookie.split('; ').find(row => row.startsWith('darkMode='))?.split('=')[1] === 'true';
177+
}
178+
179+
document.addEventListener('DOMContentLoaded', () => {
180+
if (getDarkModeCookie()) {
181+
document.body.classList.add('dark-mode');
182+
}
183+
});
184+
127185
function scrollToSectionAndHighlight(sectionId) {
128-
// Remove highlight from all sections
129186
const sections = document.querySelectorAll('.function');
130187
sections.forEach(section => {
131188
section.classList.remove('highlight');
132189
});
133190

134-
// Get the section element
135191
const section = document.getElementById(sectionId);
136-
137-
// Calculate the position to scroll to
138192
const yOffset = -(window.innerHeight / 2) + (section.offsetHeight / 2);
139193
const y = section.getBoundingClientRect().top + window.pageYOffset + yOffset;
140194

141-
// Scroll to the section
142195
window.scrollTo({
143196
top: y,
144197
behavior: 'smooth'
145198
});
146199

147-
// Add highlight to the clicked section
148200
section.classList.add('highlight');
149201

150-
// Remove highlight after a short delay
151202
setTimeout(() => {
152203
section.classList.remove('highlight');
153204
}, 1000);

0 commit comments

Comments
 (0)