theme-builder/index.html at main · materialstyle/theme-builder · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Customize Material Style themes effortlessly with our Theme Builder tool. Select theme colors, border settings, and preview changes in real-time.">
    <meta name="keywords" content="Material Style, Theme Builder, CSS variables, SASS customization, web development, theming">

    <meta property="og:title" content="Material Style Theme Builder">
    <meta property="og:description" content="Customize Material Style themes effortlessly with our Theme Builder tool. Select theme colors, border settings, and preview changes in real-time.">
    <meta property="og:image" content="https://materialstyle.github.io/assets/images/MSIconNewGreyBg.jpg">
    <meta property="og:url" content="https://materialstyle.github.io/theme-builder">

    <link rel="canonical" href="https://materialstyle.github.io/theme-builder">

    <title>Material Style theme builder</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <!-- Material Style CSS -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@materialstyle/[email protected]/dist/css/materialstyle.min.css"
          integrity="sha384-TveZ4SBMG9Zwu44Pq5aK2bgL+4CaFRTtx6pSSsxmQKWhIRKoONDSRW+k+NA9A0Gk"
          crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container mb-4 rounded-bottom-4 shadow-sm" style="color: var(--bs-primary-emphasis); background-color: var(--bs-primary-subtle);" data-bs-theme="dark">
    <div class="d-flex justify-content-center justify-content-md-between align-items-center flex-wrap gap-3 py-2">
        <div class="d-flex justify-content-center justify-content-md-start align-items-center flex-wrap gap-1">
            <img src="https://materialstyle.github.io/assets/images/MSIconNewColorV2.svg" alt="Material Style Logo"
                 style="width:40px; height:40px;">
            <h1 class="fs-5 m-0 text-center" id="site-name">Material Style theme builder</h1>
            <span class="text-center mx-1">
                <span class="badge rounded-pill text-bg-warning">v1.0.0-alpha1</span>
                <span class="badge rounded-pill text-bg-info">For Material Style v3.1</span>
            </span>
        </div>

        <div class="d-flex justify-content-center justify-content-md-start align-items-center flex-wrap gap-3">
            <a href="https://materialstyle.github.io/" class="nav-link link-offset-2">MATERIAL STYLE</a>
            <a href="https://github.com/materialstyle/materialstyle" class="nav-link link-offset-2">GITHUB</a>
        </div>
    </div>
</div>

<div class="container">
    <h2 class="mt-3 fs-3">Personalize Material Style to reflect your product's brand identity</h2>
    <p>Utilize this tool to effortlessly modify theme colors, border radius, and border widths, as it automatically generates the necessary CSS and SASS variables for you.</p>
    <ol>
        <li>Choose the theme (primary, secondary, ...) you'd like to update.</li>
        <li>
            Select a color for the theme.<br>Note: The selected color serves as the base color for the theme in
            light mode and is used to generate different variants of the theme (hover, active, emphasis, ...)
            for both light and dark modes. Ensure it maintains an appropriate contrast ratio against a light
            background (e.g., white).
        </li>
        <li>Adjust the border radius.</li>
        <li>Set the border width.</li>
        <li>Preview components in Light/Dark mode.</li>
        <li>Copy the generated CSS/SASS into your codebase.</li>
    </ol>
    <p>
        For more information on theming and how to leverage CSS and SASS to personalize Material Style,
        <a href="https://materialstyle.github.io/materialstyle/3.1/customize/theming/" class="nav-link link-offset-2 d-inline">click here.</a>
    </p>
</div>

<div class="container shadow-sm rounded-4">
    <div class="row">
        <div class="col-md-12 bg-white text-body d-flex align-items-stretch flex-wrap py-3 gap-2 rounded-top-4"
             data-bs-theme="light"
             style="--bs-border-width: 1px; --bs-border-radius: 1rem;">
            <div class="d-flex align-items-center flex-wrap gap-1">
                <div class="form-floating form-floating-outlined" style="width: 200px;">
                    <select id="theme" class="form-select">
                        <option value="primary" data-color="#0d6efd">Primary</option>
                        <option value="secondary" data-color="#71767b">Secondary</option>
                        <option value="tertiary" data-color="#d63384">Tertiary</option>
                        <option value="success" data-color="#198754">Success</option>
                        <option value="info" data-color="#0dcaf0">Info</option>
                        <option value="warning" data-color="#ffc107">Warning</option>
                        <option value="danger" data-color="#dc3545">Danger</option>
                    </select>
                    <label for="theme">Theme</label>
                </div>
            </div>
            <div class="d-flex align-items-center flex-wrap gap-1 rounded border p-2">
                <label for="color-picker" class="form-label mb-0">Color</label>
                <input type="color" class="form-control form-control-color p-1" id="color-picker" value="#0d6efd" title="Choose your color">
                <span id="color-picker-value">#6f42c1</span>
            </div>
        </div>

        <div class="col-md-12 bg-white text-body d-flex align-items-center flex-wrap pb-3 gap-2 border-bottom border-primary"
             data-bs-theme="light"
             style="--bs-border-width: 1px; --bs-border-radius: 1rem;">
            <div class="d-flex align-items-center flex-wrap gap-1 rounded border p-2">
                <label for="border-radius" class="form-label mb-0">Border radius</label>
                <input type="range" class="form-range" id="border-radius" min="0" max="2" step="0.005" value="0.375" style="width: 200px;">
                <span id="border-radius-value">0.375rem</span>
            </div>
            <div class="d-flex align-items-center flex-wrap gap-1 rounded border p-2">
                <label for="border-width" class="form-label mb-0">Border width</label>
                <input type="range" class="form-range" id="border-width" min="1" max="5" step="1" value="1" style="width: 200px;">
                <span id="border-width-value">1px</span>
            </div>
            <div class="d-flex align-items-center flex-wrap gap-1 rounded border p-2">
                <label for="color-mode-switch">Dark Mode</label>
                <div class="form-check form-switch m-0">
                    <input class="form-check-input" type="checkbox" id="color-mode-switch">
                    <label class="form-check-label" for="color-mode-switch">OFF</label>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div id="components" class="col-md-12 bg-body text-body rounded-bottom-4" data-bs-theme="light">
            <div class="d-flex justify-content-center align-items-start flex-wrap flex-md-nowrap py-3 gap-2">
                <div>
                    <div class="card bg-primary bg-opacity-10" style="max-width: 335px;">
                        <img class="card-img-top" src="https://materialstyle.github.io/materialstyle/assets/images/suv.jpg" alt="Card image">
                        <div class="card-body">
                            <h4 class="card-title">SUV</h4>
                            <p class="card-text">
                                An SUV is a powerful vehicle with four-wheel drive that can be
                                driven over rough ground. SUV is an abbreviation for 'sport utility
                                vehicle'.
                            </p>
                        </div>
                        <div class="d-flex justify-content-between align-items-center flex-wrap p-2">
                            <div>
                                <button type="button" class="btn btn-outline-primary border-0">Read</button>
                                <button type="button" class="btn btn-outline-primary border-0">Bookmark</button>
                            </div>
                            <div>
                                <button type="button" class="btn btn-fab mini-fab btn-outline-dark border-0 m-1" aria-label="like">
                                    <i class="bi bi-heart-fill"></i>
                                </button>
                                <button type="button" class="btn btn-fab mini-fab btn-outline-dark border-0 m-1" aria-label="share">
                                    <i class="bi bi-share-fill"></i>
                                </button>
                                <button type="button" class="btn btn-fab mini-fab btn-outline-dark border-0 m-1" aria-label="menu">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex flex-column justify-content-center flex-wrap gap-2">
                    <div class="d-flex align-items-center flex-wrap gap-3">
                        <div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="checkbox1">
                                <label class="form-check-label" for="checkbox1">Checkbox</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="checkbox2" checked>
                                <label class="form-check-label" for="checkbox2">Checkbox</label>
                            </div>
                        </div>

                        <div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="radioSet1" id="radio1">
                                <label class="form-check-label" for="radio1">Radio</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="radioSet1" id="radio2" checked>
                                <label class="form-check-label" for="radio2">Radio</label>
                            </div>
                        </div>

                        <div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="switch1">
                                <label class="form-check-label" for="switch1">Switch</label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="switch2" checked>
                                <label class="form-check-label" for="switch2">Switch</label>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <button type="button" class="btn btn-primary">
                            Button
                        </button>
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                Dropdown
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="alert alert-primary m-0" role="alert"  style="width:200px;">
                            Alert
                        </div>

                        <div class="progress" style="height: 5px; width: 200px;">
                            <div class="progress-bar progress-bar-indeterminate"></div>
                        </div>
                    </div>

                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="form-floating" style="width:200px;">
                            <input type="text" class="form-control" id="textField"
                                   placeholder="firstname" autocomplete="off">
                            <label for="textField">Text field</label>
                        </div>

                        <div class="form-floating form-floating-outlined" style="width:200px;">
                            <input type="text" class="form-control" id="textFieldOutlined"
                                   placeholder="firstname" autocomplete="off">
                            <label for="textFieldOutlined">Text field</label>
                        </div>

                        <div class="form-floating" style="width:200px;">
                            <select class="form-select" id="select">
                                <option value="" label="blank option"></option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                                <option value="4">Option 4</option>
                            </select>
                            <label for="select">Select</label>
                        </div>

                        <div class="form-floating form-floating-outlined" style="width:200px;">
                            <select class="form-select" id="selectOutlined">
                                <option value="" label="blank option"></option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                                <option value="4">Option 4</option>
                            </select>
                            <label for="selectOutlined">Select</label>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="container p-0">
    <a href="https://materialstyle.github.io/materialstyle/3.1/customize/theming/"
       class="text-decoration-none">
        <div class="mt-4 alert alert-primary d-flex align-items-center gap-3 rounded-4 shadow-sm border-0" role="alert" data-bs-theme="dark">
            <i class="bi bi-box-arrow-up-right fs-2"></i>
            <span>For more information on theming and how to leverage CSS and SASS to personalize Material Style, click here.</span>
        </div>
    </a>
</div>

<div class="container mt-4">
    <h2>CSS</h2>
</div>

<div class="container shadow-sm rounded-4 overflow-hidden">
    <div class="row">
        <div class="col-md-6 bg-body text-body" data-bs-theme="light">
            <div class="py-4">
                <div>
                    :root, [data-bs-theme="light"] {
                    <div id="light">

                    </div>
                    }
                </div>
            </div>
        </div>

        <div class="col-md-6 bg-body text-body" data-bs-theme="dark">
            <div class="py-4">
                <div>
                    [data-bs-theme="dark"] {
                    <div id="dark">

                    </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mt-4">
    <h2>SASS</h2>
</div>

<div class="container shadow-sm rounded-4 overflow-hidden">
    <div class="row">
        <div class="col-md-12 bg-body text-body" data-bs-theme="light">
            <div id="sass" class="py-4">

            </div>
        </div>
    </div>
</div>

<br>
<br>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>

<!-- Material Style JS -->
<script src="https://cdn.jsdelivr.net/npm/@materialstyle/[email protected]/dist/js/materialstyle.min.js"
        integrity="sha384-rqhP61M9WSmzd7+ssgyoWP2I+R68vVHx7o+UmmIs6/Nxe8Lt1DoF6+0CKptZIXC0"
        crossorigin="anonymous"></script>

<script src="index.js"></script>
</body>
</html>