Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 394563e

Browse files
ShasikhanShasikhan
committed
added more color themes
1 parent 4ba52c9 commit 394563e

2 files changed

Lines changed: 126 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,54 @@ <h1>Loading Animations</h1>
412412
<span class="color-dot" style="background: #b967ff"></span>
413413
</div>
414414
</div>
415+
<div class="theme-option" data-theme="cyber-yellow">
416+
<span>Cyber Yellow</span>
417+
<div class="theme-color-preview">
418+
<span class="color-dot" style="background: #ffd700"></span>
419+
<span class="color-dot" style="background: #ff6b6b"></span>
420+
<span class="color-dot" style="background: #4a90e2"></span>
421+
</div>
422+
</div>
423+
<div class="theme-option" data-theme="quantum">
424+
<span>Quantum</span>
425+
<div class="theme-color-preview">
426+
<span class="color-dot" style="background: #0ff0fc"></span>
427+
<span class="color-dot" style="background: #ff3864"></span>
428+
<span class="color-dot" style="background: #8f00ff"></span>
429+
</div>
430+
</div>
431+
<div class="theme-option" data-theme="cyber-green">
432+
<span>Cyber Green</span>
433+
<div class="theme-color-preview">
434+
<span class="color-dot" style="background: #00ff9f"></span>
435+
<span class="color-dot" style="background: #00b8ff"></span>
436+
<span class="color-dot" style="background: #4deeea"></span>
437+
</div>
438+
</div>
439+
<div class="theme-option" data-theme="neon-night">
440+
<span>Neon Night</span>
441+
<div class="theme-color-preview">
442+
<span class="color-dot" style="background: #fe00fe"></span>
443+
<span class="color-dot" style="background: #00fefe"></span>
444+
<span class="color-dot" style="background: #fff600"></span>
445+
</div>
446+
</div>
447+
<div class="theme-option" data-theme="retro-cyber">
448+
<span>Retro Cyber</span>
449+
<div class="theme-color-preview">
450+
<span class="color-dot" style="background: #f0e68c"></span>
451+
<span class="color-dot" style="background: #ff1493"></span>
452+
<span class="color-dot" style="background: #00ffff"></span>
453+
</div>
454+
</div>
455+
<div class="theme-option" data-theme="plasma">
456+
<span>Plasma</span>
457+
<div class="theme-color-preview">
458+
<span class="color-dot" style="background: #ff3399"></span>
459+
<span class="color-dot" style="background: #00ff00"></span>
460+
<span class="color-dot" style="background: #ff6600"></span>
461+
</div>
462+
</div>
415463
</div>
416464
</div>
417465
</body>

‎styles.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,84 @@
6666
--gradient-end: var(--bg-color-2);
6767
}
6868

69+
[data-theme="cyber-yellow"] {
70+
--theme-name: 'Cyber Yellow';
71+
--neon-blue: #ffd700;
72+
--neon-pink: #ff6b6b;
73+
--neon-purple: #4a90e2;
74+
--bg-color-1: #1a1a1a;
75+
--bg-color-2: #2d2d2d;
76+
--bg-color: var(--bg-color-1);
77+
--card-bg: rgba(255, 255, 255, 0.03);
78+
--gradient-start: var(--bg-color-1);
79+
--gradient-end: var(--bg-color-2);
80+
}
81+
82+
[data-theme="quantum"] {
83+
--theme-name: 'Quantum';
84+
--neon-blue: #0ff0fc;
85+
--neon-pink: #ff3864;
86+
--neon-purple: #8f00ff;
87+
--bg-color-1: #0d0221;
88+
--bg-color-2: #190835;
89+
--bg-color: var(--bg-color-1);
90+
--card-bg: rgba(255, 255, 255, 0.03);
91+
--gradient-start: var(--bg-color-1);
92+
--gradient-end: var(--bg-color-2);
93+
}
94+
95+
[data-theme="cyber-green"] {
96+
--theme-name: 'Cyber Green';
97+
--neon-blue: #00ff9f;
98+
--neon-pink: #00b8ff;
99+
--neon-purple: #4deeea;
100+
--bg-color-1: #002626;
101+
--bg-color-2: #004040;
102+
--bg-color: var(--bg-color-1);
103+
--card-bg: rgba(255, 255, 255, 0.03);
104+
--gradient-start: var(--bg-color-1);
105+
--gradient-end: var(--bg-color-2);
106+
}
107+
108+
[data-theme="neon-night"] {
109+
--theme-name: 'Neon Night';
110+
--neon-blue: #fe00fe;
111+
--neon-pink: #00fefe;
112+
--neon-purple: #fff600;
113+
--bg-color-1: #000066;
114+
--bg-color-2: #200033;
115+
--bg-color: var(--bg-color-1);
116+
--card-bg: rgba(255, 255, 255, 0.03);
117+
--gradient-start: var(--bg-color-1);
118+
--gradient-end: var(--bg-color-2);
119+
}
120+
121+
[data-theme="retro-cyber"] {
122+
--theme-name: 'Retro Cyber';
123+
--neon-blue: #f0e68c;
124+
--neon-pink: #ff1493;
125+
--neon-purple: #00ffff;
126+
--bg-color-1: #191970;
127+
--bg-color-2: #4b0082;
128+
--bg-color: var(--bg-color-1);
129+
--card-bg: rgba(255, 255, 255, 0.03);
130+
--gradient-start: var(--bg-color-1);
131+
--gradient-end: var(--bg-color-2);
132+
}
133+
134+
[data-theme="plasma"] {
135+
--theme-name: 'Plasma';
136+
--neon-blue: #ff3399;
137+
--neon-pink: #00ff00;
138+
--neon-purple: #ff6600;
139+
--bg-color-1: #000000;
140+
--bg-color-2: #1a0f33;
141+
--bg-color: var(--bg-color-1);
142+
--card-bg: rgba(255, 255, 255, 0.03);
143+
--gradient-start: var(--bg-color-1);
144+
--gradient-end: var(--bg-color-2);
145+
}
146+
69147
* {
70148
margin: 0;
71149
padding: 0;

0 commit comments

Comments
 (0)