(docs/ui): Add custom themes and CSS fixes

The book now has two custom themes. We also fixed
how some elements are positioned/displayed to improve
the UI.

Author: vitorfloriano

docs/book/book.toml

@@ -5,6 +5,8 @@ src = "src"
 title = "The Kubebuilder Book"
 
 [output.html]
+default-theme = "light"
+preferred-dark-theme = "navy"
 smart-punctuation = true
 additional-css = ["theme/css/markers.css", "theme/css/custom.css", "theme/css/version-dropdown.css"]
 git-repository-url = "https://github.com/kubernetes-sigs/kubebuilder"
@@ -21,4 +23,3 @@ command = "./markerdocs.sh"
 
 [context.deploy-preview.environment]
   environment = { GO_VERSION = "1.23" }
-

docs/book/src/logos/favicon.png

@@ -1,7 +1,46 @@
-.menu-title img {
-    vertical-align: bottom;
+/* Adds a thin border to the sidebar (aesthetics) */
+#sidebar {
+    border-right: 1px solid var(--theme-popup-border);
 }
 
-#sidebar-toggle-anchor:checked .page-wrapper {
-    margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
+/* Sets the size of the logo on the menu bar */
+.large-logo-img {
+    height: 50px;
+}
+
+/* Centers the logo on the menu bar */
+.menu-title {
+    display: flex;
+    align-items: center; /* vertical centering */
+    justify-content: center; /* horizontal centering */
+}
+
+/* Fixes first header sliding under the menu bar when selected */
+.content {
+    overflow-y: clip;
+}
+
+/* Fixes contrast in codeblocks */
+pre > .hljs {
+    border: 1px solid var(--theme-popup-border);
+    border-radius: 6px;
+}
+
+/* Fixes scrollbar background color */
+html {
+    scrollbar-color: var(--scrollbar) transparent;
+}
+
+/* Fixes links formatting */
+.content a {
+    text-decoration: solid underline var(--links);
+}
+
+/* custom light theme */
+.light {
+    --sidebar-bg: #eef5ff;
+    --sidebar-fg: #334155;
+    --sidebar-non-existant: #7b8da8;
+    --sidebar-active: #466bb3;
+    --sidebar-spacer: #c9d3e0;
 }

docs/book/src/logos/kb-icon.svg

@@ -21,7 +21,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="theme-color" content="#ffffff" />
 
-        <link rel="shortcut icon" href="{{ path_to_root }}/logos/favicon.png">
+        <link rel="shortcut icon" href="{{ path_to_root }}/logos/kb-icon.svg">
         <link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
         <link rel="stylesheet" href="{{ path_to_root }}css/general.css">
         <link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
@@ -119,10 +119,7 @@
                         </button>
                         <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                             <li role="none"><button role="menuitem" class="theme" id="light">{{ theme_option "Light" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="rust">{{ theme_option "Rust" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="coal">{{ theme_option "Coal" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Navy" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="ayu">{{ theme_option "Ayu" }}</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Dark" }}</button></li>
                         </ul>
                         {{#if search_enabled}}
                         <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
@@ -140,10 +137,10 @@
                                 <a href="https://book-v2.book.kubebuilder.io/"target="_blank" rel="noopener noreferrer">v2-book</a>
                                 <a href="https://book-v1.book.kubebuilder.io/"target="_blank" rel="noopener noreferrer">v1-book</a>
                             </div>
-                        </div>     
+                        </div>
                     </div>
 
-                    <h1 class="menu-title"><img alt="{{ book_title }}" src="{{ path_to_root }}/logos/logo-single-line.png"></h1>
+                    <h1 class="menu-title"><img alt="{{ book_title }}" class="large-logo-img" src="{{ path_to_root }}/logos/kb-logo-one-line.svg"></h1>
 
                     <div class="right-buttons">
                         <a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">