A high-fidelity, responsive QR code component featuring System-Aware Dark Mode integration. This project demonstrates a "clean-code" approach to UI elements, utilising TypeScript for theme logic and SCSS for modular styling.
- Theming Engine: Custom TypeScript implementation to detect and toggle system/user theme preferences.
- Markup Architecture: Pure HTML5 using semantic elements for optimal document structure.
- Styling Architecture: Modular SCSS following the BEM (Block Element Modifier) methodology.
- Modern CSS: Utilises CSS Custom Properties (Variables) and the light-dark() strategy for seamless theme transitions.
- Responsive Design: Mobile-first workflow using relative units (rem) to maintain visual balance.
To go beyond static HTML/CSS, I implemented a logical layer to handle user preferences:
- Preference Detection: Uses TypeScript to interface with the window.matchMedia('(prefers-color-scheme: dark)') API, ensuring the UI respects the user's OS settings on load.
- State Persistence: (Optional/If applicable) The engine synchronises the theme state across the DOM, applying a data-attribute or class to the root element for consistent styling.
- Type Safety: Leverages TypeScript's strict typing to ensure theme tokens are managed without runtime errors.
The visual architecture is built for maintainability:
- Thematic Variables: Defined a robust set of CSS Custom Properties that swap dynamically based on the theme state, eliminating the need for redundant CSS blocks.
- BEM Methodology: Ensures that classes remain unique and protected from global style leakage.
- Performance: High-performance theme switching with zero layout shift (CLS).
- Flexbox Alignment: Utilised a dual-axis centring strategy to ensure the card remains perfectly anchored.
- Typography System: Implemented a hierarchical font system with specific attention to letter-spacing and contrast ratios (WCAG compliant) in both Light and Dark modes.
-
Live Site: https://qr-code-component.seanbuckle.com
-
Source Code: https://github.com/seanbuckle/qr-code-component
To run this project locally:
- Clone the repository:
git clone https://github.com/seanbuckle/qr-code-component.git
- Navigate to the directory:
cd qr-code-component - Open the project: Simply open
index.htmlin your preferred browser.
Sean Buckle
This project is licensed under the MIT License - see the LICENSE file for details.
Note: This project was built as a solution to a Frontend Mentor challenge.