Skip to content

feat(theme): add dark mode support #703

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alifazl3 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(theme): add dark mode support #703

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion themes/conventional-commits/layouts/partials/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,23 @@

gtag('config', 'UA-2173276-5');
</script>


<!-- Dark mode: apply the saved/system theme before CSS is parsed to avoid a flash -->
<script>
(function () {
try {
var stored = localStorage.getItem('theme');
var dark = stored ? stored === 'dark'
: window.matchMedia('(prefers-color-scheme: dark)').matches;
if (dark) document.documentElement.classList.add('dark');
} catch (e) {}
window.toggleTheme = function () {
var isDark = document.documentElement.classList.toggle('dark');
try { localStorage.setItem('theme', isDark ? 'dark' : 'light'); } catch (e) {}
};
})();
</script>

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">

<title>{{ .Param "Title" }}</title>
Expand Down
6 changes: 6 additions & 0 deletions themes/conventional-commits/layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
<a href="/en/about" class="no-style-a">About</a>
</button>
</li>
<li class="header__menu-item">
<button class="theme-toggle" type="button" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle dark mode">
<span class="theme-toggle__moon" aria-hidden="true">&#9789;</span>
<span class="theme-toggle__sun" aria-hidden="true">&#9788;</span>
</button>
</li>
</ul>
</div>
</header>
1 change: 1 addition & 0 deletions themes/conventional-commits/static/css/scss/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@
@import "themes/markdown";
@import "themes/conventional-commits";
@import "vendors/github-markdown-css";
@import "themes/dark";
153 changes: 153 additions & 0 deletions themes/conventional-commits/static/css/scss/themes/_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
@import "./../abstracts/index";

// Dark mode overrides. Activated by adding the `dark` class to <html>
// (see the inline script in partials/head.html). The pink welcome gradient
// and brand colors are intentionally kept; only the white surfaces, the
// article (markdown) body and the dropdowns are re-themed.

$dark-bg: #0d1117;
$dark-surface: #161b22;
$dark-surface-2: #1c2330;
$dark-border: #30363d;
$dark-text: #c9d1d9;
$dark-muted: #8b949e;

html.dark {
body {
background-color: $dark-bg;
color: $dark-text;
}

main {
background-color: $dark-bg;
}

// --- Hero / welcome: keep a hint of the brand, but dark ---
.welcome {
background: $dark-bg;
background: linear-gradient(45deg, #14181f 0%, #3a1e2b 60%, #4a2230 100%);
}

article {
background-color: $dark-surface;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .35), 0 2px 20px 10px rgba(0, 0, 0, .25);
}

// --- Article (github-markdown-css) body ---
.markdown-body {
color: $dark-text;

h1, h2 {
border-bottom-color: $dark-border;
}

hr {
background-color: $dark-border;
border-bottom-color: $dark-border;
}

blockquote {
color: $dark-muted;
border-left-color: $dark-border;
}

code {
background-color: rgba(110, 118, 129, .35);
}

pre {
background-color: $dark-surface-2;
}

pre > code,
pre code {
background-color: transparent;
}

kbd {
color: $dark-text;
background-color: $dark-surface-2;
border-color: $dark-border;
box-shadow: inset 0 -1px 0 $dark-border;
}

table {
th, td {
border-color: $dark-border;
}

tr {
background-color: $dark-surface;
border-top-color: $dark-border;
}

tr:nth-child(2n) {
background-color: $dark-surface-2;
}
}
}

// --- Footer: the GitHub SVG defaults to black, invisible on a dark footer ---
.footer__logo .github {
fill: $dark-text;
transition: fill .3s ease;

&:hover {
fill: $color-neutral-light;
}
}

// --- Dropdowns (Versions / Languages) ---
.dropdown__options {
background-color: $dark-surface;

&:before {
border-color: transparent transparent $dark-surface transparent;
}
}

.dropdown__option a {
color: rgba($dark-text, .75);
border-bottom-color: rgba(255, 255, 255, .06);

&:hover,
&:focus {
color: $color-primary;
background-color: rgba(255, 255, 255, .05);
}
}
}

// --- Theme toggle button (lives in the header, sits on the pink gradient) ---
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
color: $color-neutral-light;
padding: $dropdown-label-padding;
font-size: 1.15em;
line-height: 1;

.theme-toggle__moon {
display: inline;
}

.theme-toggle__sun {
display: none;
}
}

html.dark .theme-toggle {
.theme-toggle__moon {
display: none;
}

.theme-toggle__sun {
display: inline;
}
}