yearn.fi/theme-test.html at main · yearn/yearn.fi · 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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Test</title>
    <style>
        /* Light Theme */
        :root[data-theme='light'] {
            --color-app: hsl(0 0% 98%);
            --color-surface: hsl(0 0% 100%);
            --color-surface-secondary: hsl(0 0% 96%);
            --color-text-primary: hsl(0 0% 9%);
            --color-text-secondary: hsl(0 0% 32%);
            --color-border: hsl(0 0% 90%);
        }

        /* Soft Dark Theme */
        :root[data-theme='soft-dark'] {
            --color-app: hsl(0 0% 6%);
            --color-surface: hsl(0 0% 10%);
            --color-surface-secondary: hsl(0 0% 15%);
            --color-text-primary: hsl(0 0% 96%);
            --color-text-secondary: hsl(0 0% 64%);
            --color-border: hsl(0 0% 20%);
        }

        /* Blue Dark Theme */
        :root[data-theme='blue-dark'] {
            --color-app: hsl(231 100% 6%);
            --color-surface: hsl(231 100% 10%);
            --color-surface-secondary: hsl(231 75% 15%);
            --color-text-primary: hsl(210 40% 96%);
            --color-text-secondary: hsl(215 20% 70%);
            --color-border: hsl(231 45% 22%);
        }

        /* Midnight Theme */
        :root[data-theme='midnight'] {
            --color-app: hsl(0 0% 0%);
            --color-surface: hsl(0 0% 4%);
            --color-surface-secondary: hsl(0 0% 9%);
            --color-text-primary: hsl(0 0% 98%);
            --color-text-secondary: hsl(0 0% 64%);
            --color-border: hsl(0 0% 15%);
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, sans-serif;
            background: var(--color-app);
            color: var(--color-text-primary);
            padding: 2rem;
        }

        .card {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        .card-secondary {
            background: var(--color-surface-secondary);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
        }

        h1 {
            color: var(--color-text-primary);
            margin-top: 0;
        }

        p {
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        button {
            background: var(--color-text-primary);
            color: var(--color-surface);
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 0.5rem;
        }

        button:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <h1>Theme System Test</h1>

    <div style="margin-bottom: 2rem;">
        <button onclick="setTheme('light')">Light Theme</button>
        <button onclick="setTheme('soft-dark')">Soft-Dark Theme</button>
        <button onclick="setTheme('blue-dark')">Blue-Dark Theme</button>
        <button onclick="setTheme('midnight')">Midnight Theme</button>
    </div>

    <div class="card">
        <h2>Surface (bg-surface)</h2>
        <p>This card uses --color-surface for background</p>
        <p>Text uses --color-text-primary and --color-text-secondary</p>
        <p>Border uses --color-border</p>

        <div class="card-secondary">
            <strong>Secondary Surface (bg-surface-secondary)</strong>
            <p>This nested card uses --color-surface-secondary</p>
        </div>
    </div>

    <div class="card">
        <h2>Theme Colors Working</h2>
        <p>If you can switch between themes using the buttons above, the CSS variable system is working correctly!</p>
        <ul>
            <li>Light theme: White surfaces, dark text</li>
            <li>Soft-dark theme: Dark gray surfaces, light text</li>
            <li>Blue-dark theme: Deep navy surfaces, cool light text</li>
            <li>Midnight theme: True black surfaces, light text</li>
        </ul>
    </div>

    <script>
        function _setTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            console.log('Theme set to:', theme);
        }
    </script>
</body>
</html>