diff --git a/build/templates/header.template b/build/templates/header.template
index 51ce8d08d..9f973701e 100644
--- a/build/templates/header.template
+++ b/build/templates/header.template
@@ -2,6 +2,7 @@
   <div>
     {{{include "build/templates/languages.template"}}}
     <a href="#toc">{{langInfo.toc}}</a>
+    <input type="search" placeholder="?" id="search">
   </div>
 </div>
 <div class="webgl_header">
diff --git a/webgl/lessons/resources/lesson.css b/webgl/lessons/resources/lesson.css
index 990d2391c..f6d8127b7 100644
--- a/webgl/lessons/resources/lesson.css
+++ b/webgl/lessons/resources/lesson.css
@@ -132,6 +132,7 @@ a>img {
 .webgl_navbar {
     background: black;
     color: white;
+    color-scheme: dark;
 }
 .webgl_navbar a {
     color: white;
@@ -506,6 +507,9 @@ pre.prettyprint, code.prettyprint {
     li {
       margin-left: 5px;
     }
+    #search {
+      display: none;
+    }
 }
 
 @media (max-width: 720px) {
diff --git a/webgl/lessons/resources/lesson.js b/webgl/lessons/resources/lesson.js
index 8775e033e..e2250956f 100644
--- a/webgl/lessons/resources/lesson.js
+++ b/webgl/lessons/resources/lesson.js
@@ -84,6 +84,17 @@ $(document).ready(function($) {
     window.location.href = this.dataset.href;
   });
 
+  $('#search').on('keyup', function(e) {
+    if (e.key !== 'Enter') {
+      return;
+    }
+    const a = document.createElement('a');
+    a.target = '_blank';
+    const u = new URL('https://google.com/search');
+    u.searchParams.set('q', `site:webgl2fundamentals.org ${this.value}`);
+    a.href = u.toString();
+    a.click();
+  });
 });
 }(jQuery));