Size
8.4 KB
Version
1.1.2
Created
Mar 6, 2026
Updated
about 1 month ago
1// ==UserScript==
2// @name Canva Hacker Dark Mode
3// @description Dark theme with neon accents for a cyberpunk hacker aesthetic
4// @version 1.1.2
5// @match https://*.canva.com/*
6// @icon https://static.canva.com/static/images/favicons/favicon_web_presentations.ico
7// ==/UserScript==
8(function() {
9 'use strict';
10
11 console.log('🔥 Hacker Dark Mode initializing...');
12
13 // Inject hacker-style dark theme with neon accents
14 const hackerStyles = `
15 /* Main dark background */
16 body, #root, [class*="App"], [class*="app"], [class*="canvas"] {
17 background: #0a0e27 !important;
18 color: #00ff41 !important;
19 }
20
21 /* Panels and sidebars - dark with subtle neon glow */
22 [class*="panel"], [class*="sidebar"], [class*="menu"], [class*="toolbar"],
23 [class*="Panel"], [class*="Sidebar"], [class*="Menu"], [class*="Toolbar"] {
24 background: #0f1419 !important;
25 border-color: #00ff41 !important;
26 box-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
27 }
28
29 /* Buttons - neon style */
30 button, [role="button"], a[class*="button"], [class*="Button"] {
31 background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
32 color: #00ff41 !important;
33 border: 1px solid #00ff41 !important;
34 box-shadow: 0 0 15px rgba(0, 255, 65, 0.4) !important;
35 transition: all 0.3s ease !important;
36 }
37
38 button:hover, [role="button"]:hover {
39 background: linear-gradient(135deg, #00ff41 0%, #00d4ff 100%) !important;
40 color: #0a0e27 !important;
41 box-shadow: 0 0 25px rgba(0, 255, 65, 0.8), 0 0 50px rgba(0, 212, 255, 0.5) !important;
42 transform: translateY(-2px) !important;
43 }
44
45 /* Primary/accent buttons - cyan neon */
46 button[class*="primary"], button[class*="Primary"],
47 [class*="primaryButton"], [class*="PrimaryButton"] {
48 background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%) !important;
49 color: #0a0e27 !important;
50 border: 1px solid #00d4ff !important;
51 box-shadow: 0 0 20px rgba(0, 212, 255, 0.6) !important;
52 font-weight: bold !important;
53 }
54
55 button[class*="primary"]:hover, button[class*="Primary"]:hover {
56 box-shadow: 0 0 30px rgba(0, 212, 255, 1), 0 0 60px rgba(0, 255, 65, 0.5) !important;
57 }
58
59 /* Input fields - hacker terminal style */
60 input, textarea, select, [contenteditable="true"] {
61 background: #0f1419 !important;
62 color: #00ff41 !important;
63 border: 1px solid #00ff41 !important;
64 box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.2) !important;
65 caret-color: #00ff41 !important;
66 }
67
68 input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus {
69 border-color: #00d4ff !important;
70 box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
71 outline: none !important;
72 }
73
74 input::placeholder, textarea::placeholder {
75 color: #00ff4180 !important;
76 }
77
78 /* Text elements */
79 p, span, div, label, h1, h2, h3, h4, h5, h6 {
80 color: #00ff41 !important;
81 }
82
83 /* Links - cyan neon */
84 a {
85 color: #00d4ff !important;
86 text-shadow: 0 0 5px rgba(0, 212, 255, 0.5) !important;
87 }
88
89 a:hover {
90 color: #00ff41 !important;
91 text-shadow: 0 0 10px rgba(0, 255, 65, 0.8) !important;
92 }
93
94 /* Cards and containers */
95 [class*="card"], [class*="Card"], [class*="container"], [class*="Container"] {
96 background: #16213e !important;
97 border: 1px solid #00ff4150 !important;
98 box-shadow: 0 0 15px rgba(0, 255, 65, 0.2) !important;
99 }
100
101 /* Scrollbars - neon style */
102 ::-webkit-scrollbar {
103 width: 12px;
104 height: 12px;
105 }
106
107 ::-webkit-scrollbar-track {
108 background: #0a0e27 !important;
109 border: 1px solid #00ff4130 !important;
110 }
111
112 ::-webkit-scrollbar-thumb {
113 background: linear-gradient(180deg, #00ff41 0%, #00d4ff 100%) !important;
114 border-radius: 6px !important;
115 box-shadow: 0 0 10px rgba(0, 255, 65, 0.5) !important;
116 }
117
118 ::-webkit-scrollbar-thumb:hover {
119 background: linear-gradient(180deg, #00d4ff 0%, #00ff41 100%) !important;
120 box-shadow: 0 0 15px rgba(0, 212, 255, 0.8) !important;
121 }
122
123 /* Modals and overlays */
124 [class*="modal"], [class*="Modal"], [class*="overlay"], [class*="Overlay"],
125 [class*="dialog"], [class*="Dialog"] {
126 background: #0a0e27 !important;
127 border: 2px solid #00ff41 !important;
128 box-shadow: 0 0 30px rgba(0, 255, 65, 0.5), 0 0 60px rgba(0, 212, 255, 0.3) !important;
129 }
130
131 /* Dropdown menus */
132 [class*="dropdown"], [class*="Dropdown"], [class*="menu"], [class*="Menu"] {
133 background: #0f1419 !important;
134 border: 1px solid #00ff41 !important;
135 box-shadow: 0 0 20px rgba(0, 255, 65, 0.4) !important;
136 }
137
138 /* Icons - neon glow */
139 svg, [class*="icon"], [class*="Icon"] {
140 filter: drop-shadow(0 0 3px rgba(0, 255, 65, 0.6)) !important;
141 }
142
143 /* Selection highlight */
144 ::selection {
145 background: #00ff41 !important;
146 color: #0a0e27 !important;
147 }
148
149 /* Canvas editor area - keep it visible but dark */
150 [class*="canvas"][class*="editor"], [class*="Canvas"][class*="Editor"],
151 [class*="artboard"], [class*="Artboard"] {
152 background: #1a1a2e !important;
153 border: 1px solid #00ff4130 !important;
154 }
155
156 /* Top navigation bar */
157 header, nav, [class*="header"], [class*="Header"], [class*="nav"], [class*="Nav"] {
158 background: #0f1419 !important;
159 border-bottom: 2px solid #00ff41 !important;
160 box-shadow: 0 0 20px rgba(0, 255, 65, 0.3) !important;
161 }
162
163 /* Tooltips */
164 [class*="tooltip"], [class*="Tooltip"] {
165 background: #0f1419 !important;
166 color: #00ff41 !important;
167 border: 1px solid #00d4ff !important;
168 box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
169 }
170
171 /* Loading indicators */
172 [class*="spinner"], [class*="Spinner"], [class*="loader"], [class*="Loader"] {
173 border-color: #00ff41 transparent #00d4ff transparent !important;
174 filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.8)) !important;
175 }
176
177 /* Badges and tags */
178 [class*="badge"], [class*="Badge"], [class*="tag"], [class*="Tag"] {
179 background: #00ff41 !important;
180 color: #0a0e27 !important;
181 box-shadow: 0 0 10px rgba(0, 255, 65, 0.6) !important;
182 font-weight: bold !important;
183 }
184
185 /* Dividers */
186 hr, [class*="divider"], [class*="Divider"] {
187 border-color: #00ff41 !important;
188 box-shadow: 0 0 5px rgba(0, 255, 65, 0.5) !important;
189 }
190
191 /* Add scanline effect for extra hacker vibe */
192 body::before {
193 content: "";
194 position: fixed;
195 top: 0;
196 left: 0;
197 width: 100%;
198 height: 100%;
199 background: repeating-linear-gradient(
200 0deg,
201 rgba(0, 255, 65, 0.03) 0px,
202 rgba(0, 255, 65, 0.03) 1px,
203 transparent 1px,
204 transparent 2px
205 );
206 pointer-events: none;
207 z-index: 999999;
208 }
209
210 /* Glowing cursor effect */
211 * {
212 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="none" stroke="%2300ff41" stroke-width="2"/><circle cx="10" cy="10" r="2" fill="%2300ff41"/></svg>') 10 10, auto !important;
213 }
214 `;
215
216 // Add the styles to the page
217 TM_addStyle(hackerStyles);
218
219 // Add a cool startup message in console
220 console.log('%c🔥 HACKER MODE ACTIVATED 🔥', 'color: #00ff41; font-size: 20px; font-weight: bold; text-shadow: 0 0 10px #00ff41;');
221 console.log('%c[SYSTEM] Dark theme with neon accents loaded', 'color: #00d4ff; font-size: 14px;');
222 console.log('%c[STATUS] All systems operational', 'color: #00ff41; font-size: 14px;');
223
224})();