Empowering User Experience: Dynamic Theming and UI Refinements in Artesanos-ar

IntroductionOur team has been hard at work enhancing the user experience on the Artesanos-ar platform. This recent update focuses on delivering a more personalized and intuitive interface, particularly through the introduction of a dynamic dark/light mode and critical UI refinements to improve accessibility and interaction logic.

The ChallengePreviously, the Artesanos-ar platform presented a static visual experience, lacking the modern flexibility many users expect. Our UI didn't adapt to user preferences for light or dark modes, which could lead to discomfort in varying lighting conditions. Additionally, some UI elements, like social media links, were text-based, detracting from a polished aesthetic, and a critical "Share Catalog" button appeared in a confusing context, suggesting users could share someone else's catalog as their own.

The SolutionWe tackled these challenges with a multi-pronged approach, integrating modern CSS capabilities with React's component-based architecture.

Dynamic Dark/Light Mode

We introduced a robust dark/light mode system. This begins with CSS custom properties (variables) defined at the :root level, allowing for easy theme switching by toggling a data-theme attribute:

:root {
  --color-text: #1a1a1a;
  --color-background: #fdfaf6;
  --color-accent: #8b5cf6;
}

:root[data-theme="dark"] {
  --color-text: #e0e0e0;
  --color-background: #2a2a2a;
  --color-accent: #a78bfa;
}

To manage the theme logic, a useTheme React hook was implemented. This hook intelligently detects the user's prefers-color-scheme at initial load, stores explicit user choices in localStorage, and provides a seamless toggle mechanism. A ThemeToggle component, featuring a sun/moon icon, was then strategically placed across key navigation areas to provide accessible control over the theme.

import { useState, useEffect } from 'react';

const useTheme = () => {
  const [theme, setTheme] = useState(() => {
    const storedTheme = localStorage.getItem('app-theme');
    if (storedTheme) return storedTheme;
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  });

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('app-theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return [theme, toggleTheme];
};

export default useTheme;

This useTheme hook handles initial theme detection, persistence, and provides a toggle function.

Enhanced Social Media Icons

For a cleaner and more professional look, we replaced plain text labels for Instagram and WhatsApp in the artisan header with square buttons featuring inline SVG icons. These elements were also equipped with descriptive aria-label and title attributes, significantly boosting accessibility.

Refined "Share Catalog" Logic

To prevent user confusion, the "Share Catalog" button is now conditionally rendered. It only appears when a user is viewing their own catalog (user?.slug === slug). This change was accompanied by an update to the share text, now reading "Look at my catalog" to align with the corrected interaction logic.

Key Decisions

1. CSS Variables for Theming: Utilizing CSS custom properties (--color-*) provided a clean, maintainable, and highly performant way to manage color palettes across different themes.
2. React Hook for Theme Management: Centralizing theme logic in a useTheme hook ensured reusability, consistency, and proper state management, respecting both system preferences and explicit user choices.
3. Accessibility First: Implementing SVG icons with proper aria-label and title attributes underscored our commitment to an inclusive user interface.
4. Contextual UI Elements: Correcting the "Share Catalog" button's visibility based on user ownership eliminated potential confusion and improved the overall user journey.

ResultsThe implementation of these features has led to a noticeably more modern and user-friendly platform. Users can now personalize their viewing experience with the dynamic dark/light mode, enhancing comfort and accessibility. The updated social media icons contribute to a cleaner visual aesthetic, and the corrected "Share Catalog" logic ensures a more intuitive and error-free interaction pattern.

Lessons LearnedThis initiative reinforced the importance of considering user preferences and contextual relevance in UI/UX design. By combining modern CSS features with React's component model, we achieved significant improvements in both aesthetics and functionality. Prioritizing accessibility and ensuring clear interaction logic are crucial for building truly intuitive and engaging web applications.

Generated with Gitvlg.com