Size
8.4 KB
Version
1.1.5
Created
Nov 29, 2025
Updated
17 days ago
1// ==UserScript==
2// @name Extension for robomonkey.io
3// @description Toggle between dark and light themes on Robomonkey website
4// @version 1.1.5
5// @match https://*.robomonkey.io/*
6// @icon https://robomonkey.io/favicon.ico
7// ==/UserScript==
8(function() {
9 'use strict';
10
11 console.log('Robomonkey Dark Theme: Initializing...');
12
13 // Check saved theme preference
14 async function getThemePreference() {
15 const savedTheme = await GM.getValue('robomonkey_theme', 'dark');
16 return savedTheme;
17 }
18
19 async function setThemePreference(theme) {
20 await GM.setValue('robomonkey_theme', theme);
21 }
22
23 function applyDarkTheme() {
24 const darkThemeCSS = `
25 /* Base dark theme */
26 body {
27 background-color: #0f0f0f !important;
28 color: #e0e0e0 !important;
29 }
30
31 /* Header/Navigation */
32 nav {
33 background-color: #1a1a1a !important;
34 border-bottom: 1px solid #2a2a2a !important;
35 }
36
37 nav h1 {
38 color: #ffffff !important;
39 }
40
41 /* Main content sections */
42 section {
43 background-color: #0f0f0f !important;
44 }
45
46 /* Headings */
47 h1, h2, h3, h4, h5, h6 {
48 color: #ffffff !important;
49 }
50
51 /* Paragraphs and text */
52 p, span, div {
53 color: #d0d0d0 !important;
54 }
55
56 /* Solution cards */
57 .bg-white, .dark\\:bg-dark-2 {
58 background-color: #1a1a1a !important;
59 border: 1px solid #2a2a2a !important;
60 }
61
62 a.group {
63 background-color: #1a1a1a !important;
64 transition: all 0.3s ease !important;
65 }
66
67 a.group:hover {
68 background-color: #252525 !important;
69 border-color: #3a3a3a !important;
70 }
71
72 /* FAQ section */
73 .bg-white\\/50 {
74 background-color: rgba(26, 26, 26, 0.8) !important;
75 backdrop-filter: blur(10px) !important;
76 }
77
78 /* Buttons - keep them visible with contrast */
79 button:not(#theme-toggle-btn), a[class*="rounded-full"], a[class*="rounded-lg"] {
80 background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
81 color: #ffffff !important;
82 border: none !important;
83 }
84
85 button:not(#theme-toggle-btn):hover, a[class*="rounded-full"]:hover {
86 background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
87 transform: scale(1.05) !important;
88 }
89
90 /* Input fields */
91 input[type="email"], input {
92 background-color: #2a2a2a !important;
93 color: #ffffff !important;
94 border: 1px solid #3a3a3a !important;
95 }
96
97 input::placeholder {
98 color: #808080 !important;
99 }
100
101 /* Video/demo container */
102 .bg-gray-900 {
103 background-color: #0a0a0a !important;
104 }
105
106 .bg-gray-800 {
107 background-color: #1a1a1a !important;
108 }
109
110 .text-gray-400 {
111 color: #a0a0a0 !important;
112 }
113
114 /* Gradient backgrounds for hero section */
115 .from-\\[\\#b8a9cc\\].to-\\[\\#9b8fc4\\] {
116 background: linear-gradient(135deg, #4a3f5c 0%, #3d3450 100%) !important;
117 }
118
119 /* Links */
120 a {
121 color: #a78bfa !important;
122 }
123
124 a:hover {
125 color: #c4b5fd !important;
126 }
127
128 /* Footer */
129 footer {
130 background-color: #1a1a1a !important;
131 border-top: 1px solid #2a2a2a !important;
132 }
133
134 /* Shadows - adjust for dark theme */
135 .shadow-lg, .shadow-xl, .shadow-2xl {
136 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
137 }
138
139 /* Special text highlights */
140 .font-semibold, .font-bold {
141 color: #ffffff !important;
142 }
143
144 /* Ensure readability */
145 * {
146 border-color: #2a2a2a !important;
147 }
148 `;
149
150 // Remove existing theme style if present
151 const existingStyle = document.getElementById('robomonkey-theme-style');
152 if (existingStyle) {
153 existingStyle.remove();
154 }
155
156 // Add dark theme
157 const styleElement = document.createElement('style');
158 styleElement.id = 'robomonkey-theme-style';
159 styleElement.textContent = darkThemeCSS;
160 document.head.appendChild(styleElement);
161
162 console.log('Robomonkey Dark Theme: Applied successfully');
163 }
164
165 function removeDarkTheme() {
166 const existingStyle = document.getElementById('robomonkey-theme-style');
167 if (existingStyle) {
168 existingStyle.remove();
169 }
170 console.log('Robomonkey Dark Theme: Removed, light mode active');
171 }
172
173 function createToggleButton() {
174 // Add toggle button styles
175 const toggleStyles = `
176 #theme-toggle-btn {
177 position: fixed;
178 bottom: 30px;
179 right: 30px;
180 width: 60px;
181 height: 60px;
182 border-radius: 50%;
183 background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
184 border: none;
185 cursor: pointer;
186 box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
187 z-index: 10000;
188 display: flex;
189 align-items: center;
190 justify-content: center;
191 font-size: 28px;
192 transition: all 0.3s ease;
193 }
194
195 #theme-toggle-btn:hover {
196 transform: scale(1.1);
197 box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
198 }
199
200 #theme-toggle-btn:active {
201 transform: scale(0.95);
202 }
203 `;
204
205 TM_addStyle(toggleStyles);
206
207 // Create the button
208 const toggleBtn = document.createElement('button');
209 toggleBtn.id = 'theme-toggle-btn';
210 toggleBtn.setAttribute('aria-label', 'Toggle theme');
211 toggleBtn.title = 'Toggle light/dark mode';
212
213 // Add button to page
214 document.body.appendChild(toggleBtn);
215
216 return toggleBtn;
217 }
218
219 async function updateButtonIcon(theme, button) {
220 if (theme === 'dark') {
221 button.innerHTML = '🌙';
222 } else {
223 button.innerHTML = '☀️';
224 }
225 }
226
227 async function toggleTheme() {
228 const currentTheme = await getThemePreference();
229 const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
230
231 await setThemePreference(newTheme);
232
233 if (newTheme === 'dark') {
234 applyDarkTheme();
235 } else {
236 removeDarkTheme();
237 }
238
239 const button = document.getElementById('theme-toggle-btn');
240 if (button) {
241 await updateButtonIcon(newTheme, button);
242 }
243
244 console.log(`Theme switched to: ${newTheme}`);
245 }
246
247 async function init() {
248 // Get saved theme preference
249 const savedTheme = await getThemePreference();
250
251 // Apply theme based on preference
252 if (savedTheme === 'dark') {
253 applyDarkTheme();
254 }
255
256 // Create toggle button
257 const toggleBtn = createToggleButton();
258 await updateButtonIcon(savedTheme, toggleBtn);
259
260 // Add click event listener
261 toggleBtn.addEventListener('click', toggleTheme);
262
263 console.log('Robomonkey Theme Toggle: Initialized with theme:', savedTheme);
264 }
265
266 // Initialize when DOM is ready
267 if (document.readyState === 'loading') {
268 document.addEventListener('DOMContentLoaded', init);
269 } else {
270 init();
271 }
272
273})();