Colorful-window-theme/popup.html at main · DaveDuck321/Colorful-window-theme · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div class="popup-container">
        <div class="popup-header">
            <h3>Pick Window Color</h3>
            <label class="mode-toggle-row" for="mode-toggle">
                <span>Dark</span>
                <span class="switch">
                    <input id="mode-toggle" type="checkbox">
                    <span class="switch-slider"></span>
                </span>
            </label>
        </div>
        <div class="color-grid">
            <button class="color-button" data-color="#f2a3a3" style="background-color:#f2a3a3"></button>
            <button class="color-button" data-color="#f2bf8a" style="background-color:#f2bf8a"></button>
            <button class="color-button" data-color="#f2df8a" style="background-color:#f2df8a"></button>
            <button class="color-button" data-color="#d6e38f" style="background-color:#d6e38f"></button>
            <button class="color-button" data-color="#9fd9a3" style="background-color:#9fd9a3"></button>
            <button class="color-button" data-color="#8fd9c6" style="background-color:#8fd9c6"></button>
            <button class="color-button" data-color="#8fd9e2" style="background-color:#8fd9e2"></button>
            <button class="color-button" data-color="#9fc4e8" style="background-color:#9fc4e8"></button>
            <button class="color-button" data-color="#a7b0f0" style="background-color:#a7b0f0"></button>
            <button class="color-button" data-color="#c2a3e8" style="background-color:#c2a3e8"></button>
            <button class="color-button" data-color="#e3a3e8" style="background-color:#e3a3e8"></button>
            <button class="color-button" data-color="#e8a3c5" style="background-color:#e8a3c5"></button>
            <button class="color-button dark-swatch" data-color="#2a2a40" style="background-color:#2a2a40"></button>
            <button class="color-button dark-swatch" data-color="#3d2525" style="background-color:#3d2525"></button>
            <button class="color-button dark-swatch" data-color="#2a3d29" style="background-color:#2a3d29"></button>
            <button class="color-button dark-swatch" data-color="#1d443d" style="background-color:#1d443d"></button>
            <button class="color-button dark-swatch" data-color="#223f52" style="background-color:#223f52"></button>
            <button class="color-button dark-swatch" data-color="#24305b" style="background-color:#24305b"></button>
            <button class="color-button dark-swatch" data-color="#39286b" style="background-color:#39286b"></button>
            <button class="color-button dark-swatch" data-color="#502563" style="background-color:#502563"></button>
            <button class="color-button dark-swatch" data-color="#61274a" style="background-color:#61274a"></button>
            <button class="color-button dark-swatch" data-color="#612a2c" style="background-color:#612a2c"></button>
            <button class="color-button dark-swatch" data-color="#304522" style="background-color:#304522"></button>
            <button class="color-button dark-swatch" data-color="#1d1d1d" style="background-color:#1d1d1d"></button>
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>