Spectre là một framework CSS nhẹ, hiện đại và responsive, cung cấp nền tảng thiết kế trực quan cho các ứng dụng web. Chế độ tối không chỉ giúp giảm mỏi mắt mà còn cải thiện trải nghiệm người dùng trong môi trường ánh sáng yếu. Bài viết này hướng dẫn cách tích hợp chế độ tối vào dự án sử dụng Spectre qua ba bước đơn giản.

1. Khám phá hệ thống màu sắc của Spectre

Spectre được xây dựng với hệ thống biến SCSS linh hoạt, định nghĩa trong src/_variables.scss. Các biến liên quan đến giao diện tối đã được chuẩn bị sẵn:

$dark-color: #303742 !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$gray-color-dark: darken($gray-color, 30%) !default;

Hệ thống này tận dụng các hàm như darken() để tạo bảng màu đồng nhất, làm nền tảng cho việc chuyển đổi sang chế độ tối.

2. Ghi đè biến cho chế độ tối

Tạo file src/_dark-theme.scss và định nghĩa lại các biến chính theo tông màu tối:

$body-bg: $dark-color;
$body-font-color: $light-color;
$bg-color: darken($dark-color, 5%);
$border-color: darken($dark-color, 15%);
$link-color: lighten($primary-color, 10%);

Cách tiếp cận này tận dụng cơ chế override biến của Sass, đảm bảo toàn bộ giao diện phản hồi theo bảng màu mới mà không cần sửa đổi mã nguồn gốc.

3. Thêm chức năng chuyển đổi động

Kết hợp JavaScript để lưu và áp dụng tùy chọn người dùng:

const toggleTheme = () => {
  const root = document.documentElement;
  const isDark = root.classList.toggle('theme-dark');
  localStorage.setItem('prefers-theme', isDark ? 'dark' : 'light');
};

// Khôi phục tùy chọn khi tải trang
if (localStorage.getItem('prefers-theme') === 'dark') {
  document.documentElement.classList.add('theme-dark');
}

Trong file SCSS chính, import cấu hình chế độ tối có điều kiện:

@import "spectre";

.theme-dark {
  @import "dark-theme";
  // Các quy tắc CSS cụ thể cho chế độ tối
}

Lưu ý khi triển khai

• Độ tương phản: Đảm bảo tỷ lệ tương phản văn bản ≥ 4.5:1 theo tiêu chuẩn WCAG
• Hình ảnh: Sử dụng CSS filter hoặc media query để điều chỉnh ảnh phù hợp nền tối
• Hiệu năng: Ưu tiên CSS variables thay vì thay đổi class nếu cần chuyển đổi thời gian thực