pwa guide: add dark theme; detect android device
Hunter
Thursday, July 31st, 2025 at 6:37 PM
23 margin-bottom: 30px;
24 }
25
26 + .subtitle {
27 + text-align: center;
28 + margin-bottom: 30px;
29 + }
30 +
31 h2 {
32 border-bottom: 1px solid #666;
33 padding-bottom: 5px;
52 }
53
54
- .toc a {
55 + a {
56 color: #0000EE;
57 text-decoration: underline;
58 }
59
- .toc a:visited {
- color: #551A8B;
60 + a:visited {
61 + color: #0000EE;
62 }
63
64 .auto-detected {
117 font-size: 0.9em;
118 color: #666;
119 }
120 +
121 + /* Dark mode styles */
122 + @media (prefers-color-scheme: dark) {
123 + body {
124 + background-color: #1a1a1a;
125 + color: #e0e0e0;
126 + }
127 +
128 + h1, h2 {
129 + color: #ffffff;
130 + border-color: #666;
131 + }
132 +
133 + .toc, .section {
134 + background-color: #2d2d2d;
135 + border: none;
136 + }
137 +
138 + .auto-detected {
139 + background-color: #2d4a2d;
140 + border: none;
141 + }
142 +
143 + a {
144 + color: #66b3ff;
145 + }
146 +
147 + a:visited {
148 + color: #66b3ff;
149 + }
150 +
151 + code {
152 + background-color: #3d3d3d;
153 + border-color: #555;
154 + color: #e0e0e0;
155 + }
156 +
157 + .note {
158 + color: #aaa;
159 + border-left-color: #666;
160 + }
161 +
162 + footer {
163 + border-top-color: #666;
164 + color: #aaa;
165 + }
166 + }
167 +
168 + /* Mobile responsive styles */
169 + @media (max-width: 768px) {
170 + body {
171 + padding: 0px;
172 + }
173 +
174 + h1 {
175 + margin-top: 10px;
176 + margin-bottom: 20px;
177 + font-size: 1.8em;
178 + }
179 +
180 + .subtitle {
181 + display: none;
182 + }
183 +
184 + .section, .toc, .auto-detected {
185 + margin: 20px 0;
186 + padding: 15px 10px;
187 + border-left: none;
188 + border-right: none;
189 + }
190 + }
191 </style>
192 </head>
193 <body>
194 <h1>Installing Progressive Web Apps</h1>
- <center><p><em>A comprehensive guide for installing PWAs across different operating systems and browsers</em></p></center>
195 + <p class="subtitle"><em>A comprehensive guide for installing PWAs across different operating systems and browsers</em></p>
196
197 <div id="auto-detected" class="auto-detected">
198 <p><span class="lightbulb">💡</span> Based on your system, you might want to jump directly to: <span id="detected-link"></span></p>
351 </div>
352
353 <footer>
- <p>This guide covers the most common browsers and platforms as of 2025. PWA support continues to evolve.</p>
354 + <p>This guide covers the most common browsers and platforms as of 2025.<br>PWA support continues to evolve.</p>
355 </footer>
356
357 <script>
364 let targetSection = '';
365
366 // Detect OS
- if (platform.includes('win')) {
367 + if (userAgent.includes('android')) {
368 + detectedOS = 'Android';
369 + } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
370 + detectedOS = 'iOS';
371 + } else if (platform.includes('win')) {
372 detectedOS = 'Windows';
373 } else if (platform.includes('mac')) {
374 detectedOS = 'macOS';
375 } else if (platform.includes('linux')) {
376 detectedOS = 'Linux';
- } else if (userAgent.includes('android')) {
- detectedOS = 'Android';
- } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
- detectedOS = 'iOS';
377 }
378
379 // Detect Browser