This repository has been archived by the owner on Nov 16, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
theme.txt
90 lines (73 loc) · 1.95 KB
/
theme.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
theme changer with daisyUI
<-----html------>
<html data-theme="dark"></html>
<select class="theme" data-choose-theme>
<option value="dark">Dark</option>
<option value="cyberpunk">Cyberpunk</option>
<option value="retro">Retro</option>
<option value="cupcake">Cupcake</option>
<option value="light">Light</option>
<option value="fantasy">Fantasy</option>
<option value="wireframe">Wireframe</option>
<option value="coffee">Coffee</option>
<option value="valentine">Valentine</option>
<option value="aqua">Aqua</option>
<option value="forest">Foerest</option>
<option value="halloween">Halloween</option>
<option value="lofi">Lofi</option>
<option value="lemonade">Lemonade</option>
</select>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>
<---------css-------->
:root {
--my-color: #fff;
/* or any other variables/style */
}
[data-theme='dark'] {
--my-color: #000;
}
[data-theme='retro'] {
--my-color: rgba(247, 249, 223, 0.998);
}
[data-theme='cyberpunk'] {
--my-color: #cadb12;
}
[data-theme='coffee'] {
--my-color: #2d2222;
}
[data-theme='halloween'] {
--my-color: #0f0e0ed1;
}
[data-theme='forest'] {
--my-color: #1c1515;
}
[data-theme='valentine'] {
--my-color: #deb9b9;
}
[data-theme='aqua'] {
--my-color: #236dc1;
}
/* daisyUI theme */
html {
background-color: var(--my-color);
}
.theme{
/* float: end; */
background-color: var(--my-color);
/* color: var(--my-color); */
border: none;
border-radius: 50%;
/* box-shadow: 12px 12px 24px #3ABFF8; */
transition: all 0.3s ease-in-out 0s;
cursor: pointer;
outline: outset;
position: absolute;
top: 0;
right: 0;
padding: 10px;
margin: 10px;
}
.theme opiton{
background-color: var(--my-color);
color: var(--my-color);
}