Skip to content

feat: add dark mode to servo.org site #341

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
MunishMummadi wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: add dark mode to servo.org site #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db14cd4
feat: expand css assets for dark theme token and detec the saved theme
MunishMummadi Sep 2, 2026
8e20dc6
feat: updated header with toggle
MunishMummadi Sep 2, 2026
eebdc68
feat: dedicated theme tokens for rendering text & cleanup
MunishMummadi Sep 2, 2026
a9bd511
fix: sponsers on dark mode + trival things
MunishMummadi Sep 10, 2026
fd9f31b
clean up
MunishMummadi Sep 10, 2026
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
2 changes: 1 addition & 1 deletion _includes/downloads-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h2>{{ download.name }}</h2>

.download-item > a > i {
font-size: 2.5em;
color: black;
color: var(--text-primary);
}

.download-item > a > h2 {
Expand Down
7 changes: 6 additions & 1 deletion _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
<div class="container">
<div class="two-column inner-container">
<div class="column">
<div class="logo"><a href="https://linuxfoundation.eu"><img src="{{ site.logoLFEurope | url }}" alt="Linux Foundation Europe logo" width="250"></a></div>
<div class="logo">
<a href="https://linuxfoundation.eu">
<img class="footer-logo--light" src="{{ site.logoLFEurope | url }}" alt="Linux Foundation Europe logo" width="250">
<img class="footer-logo--dark" src="{{ '/img/lf-europe-white.svg' | url }}" alt="Linux Foundation Europe logo" width="250">
</a>
</div>
<p>&copy; {% currentYear %} {{ site.author }}</p>
<p>Copyright &copy; Servo is a project of <a class="footer-link" href="https://linuxfoundation.eu/">Linux Foundation Europe</a>.</p>
<p>For website terms of use, trademark policy and other project policies please see <a class="footer-link" href="https://lfprojects.org">https://lfprojects.org</a>.</p>
Expand Down
13 changes: 13 additions & 0 deletions _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Helps with theme detection from ls-->
<script>
(function () {
try {
var savedTheme = localStorage.getItem('theme');
var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var theme = savedTheme ? savedTheme : (systemPrefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
})()
</script>

{% if title == "Home" %}
<title>{{ site.tagline }}</title>
<meta property="og:title" content="{{ site.tagline }}">
Expand Down
21 changes: 17 additions & 4 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@
</a>
{% endif %}
{% endfor %}

<!-- Theme toggle btn -->
<button id="themeToggle" class="theme-toggle-btn" type="button" aria-label="Toggle theme" title="Toggle dark/light mode">
<i class="fas fa-moon" aria-hidden="true"></i>
<i class="fas fa-sun"></i>
</button>
{% include "social-buttons.html" %}
</div>
</div>
Expand All @@ -69,9 +75,16 @@
hamburger.setAttribute('aria-expanded', !isExpanded);
menu.classList.toggle('is-active', isExpanded);
};

// Toggle on click
hamburger.addEventListener('click', toggleMenu);


</script>
// Theme switch logic
const themeToggle = document.getElementById('themeToggle');
themeToggle?.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme') ||'light';
const nextTheme = currentTheme == 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', nextTheme);
try{
localStorage.setItem('theme', nextTheme)
} catch (e) {}
});
</script>
5 changes: 3 additions & 2 deletions _includes/hero.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<section class="section" id="homeHero" aria-label="What is Servo">
<div class="hero-body">
<div class="container">
<img class="hero-img" src="{{ site.logoPositive | url }}" alt="{{ title }}">
<img class="hero-img hero-img--light" src="{{ site.logoPositive | url }}" alt="{{ title }}">
<img class="hero-img hero-img--dark" src="{{ '/svg/servo-color-negative-no-container.svg' | url }}" alt="{{ title }}">
<h1 class="title center-text">
Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.
</h1>
Expand Down Expand Up @@ -101,4 +102,4 @@ <h2>Acknowledgements</h2>
}


</style>
</style>
11 changes: 11 additions & 0 deletions _includes/sponsorship.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,8 @@ <h3 class="center-text">Bronze Sponsors</h3>
}

.inner-container__logos {
background-color: #ffffff;
color: #2d3748;
border: 1px solid var(--midturquoise);
max-width: 800px;
margin-left: auto;
Expand All @@ -213,10 +215,19 @@ <h3 class="center-text">Bronze Sponsors</h3>
}

.inner-container__logos h3 {
color: #1a202c;
border-bottom: 1px solid var(--midturquoise);
padding-top: var(--12px);
padding-bottom: var(--12px);
font-size: var(--step-1);
}

.inner-container__logos a {
color: var(--midturquoise);
}

.inner-container__logos a:hover {
color: var(--darkturquoise);
}

</style>
Loading