33{% include head.html %}
44
55< body >
6+ <!-- Theme Toggle Button -->
7+ < div id ="theme-toggle ">
8+ < button class ="toggle-theme ">
9+ < span class ="icon "> 🌙</ span >
10+ </ button >
11+ </ div >
12+
613 < div class ="container content ">
714 < header class ="masthead ">
815 < h3 class ="masthead-title ">
@@ -53,6 +60,54 @@ <h3 class="masthead-title">
5360 ga ( "send" , "pageview" ) ;
5461 </ script >
5562 {% endif %}
63+
64+ <!-- Theme Toggle Script -->
65+ < script >
66+ document . addEventListener ( "DOMContentLoaded" , ( ) => {
67+ const toggleButton = document . querySelector ( ".toggle-theme" ) ;
68+ const icon = toggleButton . querySelector ( ".icon" ) ;
69+
70+ // Check for saved user preference
71+ const savedTheme = localStorage . getItem ( "theme" ) ;
72+ if ( savedTheme ) {
73+ document . documentElement . setAttribute ( "data-theme" , savedTheme ) ;
74+ icon . textContent = savedTheme === "light-poole" ? "🌞" : "🌙" ;
75+ } else {
76+ document . documentElement . setAttribute ( "data-theme" , "dark-poole" ) ; // Default to dark
77+ }
78+
79+ // Toggle theme on click
80+ toggleButton . addEventListener ( "click" , ( ) => {
81+ const currentTheme = document . documentElement . getAttribute ( "data-theme" ) ;
82+ const newTheme = currentTheme === "dark-poole" ? "light-poole" : "dark-poole" ;
83+ document . documentElement . setAttribute ( "data-theme" , newTheme ) ;
84+ localStorage . setItem ( "theme" , newTheme ) ;
85+ icon . textContent = newTheme === "light-poole" ? "🌞" : "🌙" ;
86+ } ) ;
87+ } ) ;
88+ </ script >
89+
90+ < style >
91+ /* Theme Toggle Button Styling */
92+ # theme-toggle {
93+ position : fixed;
94+ top : 1rem ;
95+ right : 1rem ;
96+ z-index : 1000 ;
97+ }
98+
99+ .toggle-theme {
100+ background : none;
101+ border : none;
102+ color : inherit;
103+ font-size : 1.5rem ;
104+ cursor : pointer;
105+ }
106+
107+ .toggle-theme .icon {
108+ transition : color 0.3s ease;
109+ }
110+ </ style >
56111</ body >
57112
58113</ html >
0 commit comments