Implementing the Blog Layout

Continued working on the personal blog project today, focusing on the layout and design aspects.

What I Accomplished

• Created the main layout component with proper responsive styling
• Implemented dark mode switching functionality
• Designed the header and footer components
• Added the Tailwind Typography plugin for better content styling

Challenges Faced

I spent some time troubleshooting an issue with the dark mode toggle. The problem was that I was using class instead of selector for the darkMode setting in the Tailwind config. Once I updated that, it worked smoothly.

Code Snippet of the Day

Here’s a useful helper function I created for the theme toggling:

function applyTheme(isDarkMode) {
  if (isDarkMode) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
  localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
}

Next Steps

Tomorrow I’ll focus on creating the Daily Log section and building the content collection structure.