To create a dark mode equivalent of the default GitHub Pages theme, you can use CSS custom properties (variables) and media queries to switch between light and dark styles based on the user's preference. The default GitHub Pages theme uses a CSS file with a specific structure, so we'll build upon that structure to implement dark mode.
Here's a step-by-step guide:
Step 1: Create a Dark Mode CSS File
Create a separate CSS file, let's call it dark-mode.css, that contains the dark mode styles. Make sure to include all the styles that need to be adjusted for the dark mode.
css/* dark-mode.css */
:root {
/* Dark mode color variables */
--color-background: #1a1b1f;
--color-text: #d1d5da;
--color-link: #58a6ff;
/* Add more custom properties as needed */
/* Override light mode colors with dark mode variables */
--color-primary: var(--color-background);
--color-secondary: var(--color-text);
--color-tertiary: var(--color-link);
/* Add more overrides as needed */
}
body {
/* Dark mode body styles */
background-color: var(--color-background);
color: var(--color-text);
}
/* Add more dark mode styles for other elements as needed */
Step 2: Add Media Query to Switch Between Light and Dark Mode
In the main CSS file (e.g., style.css) that is used for the default GitHub Pages theme, add a media query that will load the dark-mode.css file when the user's system preferences indicate a preference for dark mode.
css/* style.css */
/* Default GitHub Pages theme styles */
/* Add a media query for dark mode */
@media (prefers-color-scheme: dark) {
/* Load the dark-mode.css file */
@import url('dark-mode.css');
}
The @media (prefers-color-scheme: dark) media query will automatically switch to the dark mode styles when the user's system preference is set to dark mode.
Step 3: Load the CSS Files in Your HTML File
Make sure to load both CSS files in your HTML file. The style.css file should come first, followed by the dark-mode.css file.
html<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="dark-mode.css">
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Now, when the user's system preference is set to dark mode, the dark-mode.css file will be loaded, and the styles defined in that file will override the default light mode styles from style.css.
This approach allows your GitHub Pages site to have a dark mode equivalent that responds to the user's system preference. Additionally, you can customize the colors and styles in the dark-mode.css file to match the specific dark mode style you desire.