Add dark mode by IDisposable · Pull Request #2239 · microsoft/language-server-protocol

IDisposable · 2026-03-12T00:50:20Z

Add page head theme-stored/preference-driven light/dark toggle
Add topnav button to toggle light/dark
Defaults to light mode if not set
Add dark-mode color overrides to main.css
Upgrade to jekyll 4.4
Upgrade to webrick 1.9 jekyll plugin
Upgrade to bootstrap 5.3.3
Remove popper.js (it's part of bootstrap now)
Remove jQuery and just use standard browser
Replace attributes data-toggle -> data-bs-toggle (for accordions/nav menu)
Replace attributes data-target -> data-bs-target (for nav menu)
Replace attributes data-parent -> data-bs-parent (for menus)
Replace attributes data-ride -> data-bs-ride (for carousel)
Replace attributes ml-auto -> ms-auto (for nav menu)
Use bootstrap color CSS variables
Add adjustments to main.scss for links and jumbotron to retain appearance
Add theme management to page.js and upgrade to remove jQuery
Eliminate incompatible github-pages plugin and use standard github workflow

- Add page head theme-stored/preference-driven light/dark toggle - Add topnav button to toggle light/dark - Defaults to light mode if not set - Add dark-mode color overrides to main.css - Upgrade to jekyll 4.4 - Upgrade to webrick 1.9 jekyll plugin - Upgrade to bootstrap 5.3.3 - Remove popper.js (it's part of bootstrap now) - Remove jQuery and just use standard browser - Replace attributes data-toggle -> data-bs-toggle (for accordions/nav menu) - Replace attributes data-target -> data-bs-target (for nav menu) - Replace attributes data-parent -> data-bs-parent (for menus) - Replace attributes data-ride -> data-bs-ride (for carousel) - Replace attributes ml-auto -> ms-auto (for nav menu) - Use bootstrap color CSS variables - Add adjustments to main.scss for links and jumbotron to retain appearance - Add theme management to page.js and upgrade to remove jQuery - Eliminate incompatible github-pages plugin and use standard github workflow

IDisposable · 2026-03-12T00:52:19Z

.github/workflows/jekyll.yml

@@ -0,0 +1,51 @@
+name: Deploy Jekyll site to Pages


I'm not sure this can be done like this, but the current versions of jekyll do NOT work with the github-pages Gem, so we have to remove that and use GitHub Actions workflow instead.

Obviously, I cannot tell if this will work because I don't have your tokens/secrets... so let me know if you need me to adjust.

IDisposable · 2026-03-12T00:53:38Z

_includes/head.html

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <script>


Prevents flash of light/dark on page load and respects local-store setting of theme. Falls back to browser preference using matchMedia

IDisposable · 2026-03-12T00:54:25Z

_includes/js_files.html

-  integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
-  integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"


Upgrade to bootstrap 5.3.3 for free dark/light mode support.

Popper is included in 5.x

IDisposable · 2026-03-12T00:55:11Z

_includes/topnav.html

        </a>

-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">


Bootstrap 5.x changed the data attributes to include the -bs- to avoid collisions, so we change those all over.

IDisposable · 2026-03-12T00:55:32Z

_includes/topnav.html

                <li {% if page.sectionid=='specification' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/specifications/specification-current" | prepend: site.baseurl }}'>Specification</a>
                </li>
+                <li class="nav-item">


This is the menu-line toggle (shows a sun or moon)

IDisposable · 2026-03-12T00:56:51Z

_layouts/default.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">


Ensure if there's no preference or mode previously selected, we fall back to light so it doesn't change appearance too much.

There is a lot of improvements in Bootstrap 5.x for fonts and sizing and such, so it's not an exact match, but it's better.

IDisposable · 2026-03-12T00:57:28Z

css/main.scss

 	letter-spacing: .25px;
 	text-rendering: optimizeLegibility;
-	color: #242628;
+	color: var(--bs-body-color, #242628);


Ensure we work with bootstrap theming and fall-back to our old colors all over.

IDisposable · 2026-03-12T00:58:25Z

css/main.scss

 	top: -60px;
 	left: 0;
 }
+


This section is to fix some differences in the way the sidebars rendered in 5.x (missing padding and colors) which resulted from CSS specificity issues.

IDisposable · 2026-03-12T00:59:13Z

css/main.scss

+	color: var(--bs-secondary-color, #707070);
+}
+
+div.page-content > div.wrapper > div.header-container.bg-primary.jumbotron {


This was added to fix the index page, which rendered with a white bar between the navigation/menu bar and the "jumbotron" header.

IDisposable · 2026-03-12T00:59:35Z

css/main.scss

+	margin-top: -1em;
+}
+
+// Theme toggle button


The rest of these changes are for dark-mode color overrides.

IDisposable · 2026-03-12T01:00:06Z

js/page.js

-function onConsentChanged() {
-  function gtag() {
-    window.dataLayer.push(arguments)
+document.addEventListener('DOMContentLoaded', function () {


Removed jQuery and use standard browser DOM stuff now.

IDisposable · 2026-03-12T01:00:16Z

js/page.js

+    });
+  }
+
+  // Theme toggle


Theme management

IDisposable · 2026-03-12T01:01:09Z

index.html

 layout: default
 ---

-<!-- Place this tag in your head or just before your close body tag. -->


This was complete duplicate since it was already rendered in the footer.

IDisposable commented Mar 12, 2026

View reviewed changes

css/main.scss

margin-top: -1em;

}

// Theme toggle button

Copy link

Author

IDisposable Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rest of these changes are for dark-mode color overrides.

IDisposable commented Mar 12, 2026

View reviewed changes

js/page.js

});

}

// Theme toggle

Copy link

Author

IDisposable Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Theme management

IDisposable commented Mar 12, 2026

View reviewed changes

IDisposable mentioned this pull request Mar 12, 2026

Add dark theme on https://microsoft.github.io/language-server-protocol/ #2204

Open

Conversation

IDisposable commented Mar 12, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant