Skip to content

Commit 455ff27

Browse files
Sadrita404Sadrita404
authored
Add dark mode toggle functionality and styles
1 parent 24c03ac commit 455ff27

1 file changed

Lines changed: 114 additions & 7 deletions

File tree

‎packages/modelviewer.dev/index.html‎

Lines changed: 114 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,112 @@
4444
</script>
4545
<script async src='https://www.google-analytics.com/analytics.js'></script>
4646
<style>
47+
/* Scope the background change strictly to the demo component container */
4748
.demo model-viewer {
48-
background-color: #fff;
49+
background-color: #ffffff;
50+
transition: background-color 0.4s ease;
51+
width: 100%;
52+
height: 100%;
53+
display: block;
54+
}
55+
56+
/* Target container positioning context for the toggle placement */
57+
#demo-container {
58+
position: relative;
59+
}
60+
61+
/* Night mode state for the model viewer background */
62+
#demo-container.night-mode model-viewer {
63+
background-color: #1a1a1a;
64+
}
65+
66+
/* Style for the visual SVG icon toggle switch button */
67+
.theme-toggle-btn {
68+
position: absolute;
69+
top: 20px;
70+
right: 20px;
71+
width: 48px;
72+
height: 48px;
73+
border-radius: 50%;
74+
background-color: #ffffff;
75+
border: 2px solid #e0e0e0;
76+
cursor: pointer;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
z-index: 10;
81+
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
82+
transition: background-color 0.3s standard, border-color 0.3s ease, transform 0.2s ease;
83+
padding: 0;
84+
}
85+
86+
.theme-toggle-btn:hover {
87+
transform: scale(1.05);
88+
}
89+
90+
.theme-toggle-btn:active {
91+
transform: scale(0.95);
92+
}
93+
94+
/* Control internal SVG icon rendering and transitions */
95+
.theme-toggle-btn svg {
96+
width: 24px;
97+
height: 24px;
98+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
99+
}
100+
101+
.theme-toggle-btn .sun-icon {
102+
fill: #000000;
103+
display: block;
104+
}
105+
106+
.theme-toggle-btn .moon-icon {
107+
fill: #ffffff;
108+
display: none;
109+
}
110+
111+
/* Dark mode toggle aesthetics */
112+
#demo-container.night-mode .theme-toggle-btn {
113+
background-color: #000000;
114+
border-color: #333333;
115+
box-shadow: 0 4px 10px rgba(255,255,255,0.05);
116+
}
117+
118+
#demo-container.night-mode .theme-toggle-btn svg {
119+
transform: rotate(360deg);
120+
}
121+
122+
#demo-container.night-mode .theme-toggle-btn .sun-icon {
123+
display: none;
124+
}
125+
126+
#demo-container.night-mode .theme-toggle-btn .moon-icon {
127+
display: block;
49128
}
50129
</style>
51130
</head>
52131
<body>
53132

54133
<div class="sample">
55-
<div id="demo-container" class="demo"></div>
134+
<div id="demo-container" class="demo">
135+
<button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle Dark Mode">
136+
<svg class="sun-icon" viewBox="0 0 24 24">
137+
<circle cx="12" cy="12" r="5" />
138+
<line x1="12" y1="1" x2="12" y2="3" stroke="#000" stroke-width="2" stroke-linecap="round" />
139+
<line x1="12" y1="21" x2="12" y2="23" stroke="#000" stroke-width="2" stroke-linecap="round" />
140+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="#000" stroke-width="2" stroke-linecap="round" />
141+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="#000" stroke-width="2" stroke-linecap="round" />
142+
<line x1="1" y1="12" x2="3" y2="12" stroke="#000" stroke-width="2" stroke-linecap="round" />
143+
<line x1="21" y1="12" x2="23" y2="12" stroke="#000" stroke-width="2" stroke-linecap="round" />
144+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="#000" stroke-width="2" stroke-linecap="round" />
145+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="#000" stroke-width="2" stroke-linecap="round" />
146+
</svg>
147+
<svg class="moon-icon" viewBox="0 0 24 24">
148+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
149+
</svg>
150+
</button>
151+
</div>
152+
56153
<div class="content">
57154
<div class="wrapper">
58155
<div class="heading">
@@ -65,10 +162,8 @@ <h3 class="grouping-title grouping-title-new quick-start">Quick Start</h3>
65162
<div class="quick-start-example">
66163
<example-snippet inert-script stamp-to="demo-container" highlight-as="html">
67164
<template>
68-
<!-- Import the component -->
69165
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/{{MODELVIEWER_VERSION}}/model-viewer.min.js"></script>
70166

71-
<!-- Use it like any other HTML element -->
72167
<model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
73168
</template>
74169
</example-snippet>
@@ -228,15 +323,27 @@ <h3 class="grouping-title grouping-title-new border-bottom">Browser Support</h3>
228323
(() => { initFooterLinks();})();
229324
</script>
230325

231-
232-
<!-- Documentation-specific dependencies: -->
233326
<script type="module"
234327
src="examples/built/dependencies.js">
235328
</script>
236329

237-
<!-- Loads <model-viewer> on modern browsers: -->
238330
<script type="module"
239331
src="../../node_modules/@google/model-viewer/dist/model-viewer.js">
240332
</script>
333+
334+
<script>
335+
document.addEventListener('DOMContentLoaded', () => {
336+
const toggleBtn = document.getElementById('theme-toggle');
337+
const container = document.getElementById('demo-container');
338+
339+
if (toggleBtn && container) {
340+
toggleBtn.addEventListener('click', (e) => {
341+
// Explicitly prevent any parent element event triggers
342+
e.stopPropagation();
343+
container.classList.toggle('night-mode');
344+
});
345+
}
346+
});
347+
</script>
241348
</body>
242349
</html>

0 commit comments

Comments
 (0)