Add Dark Mode Support by yihao03 · Pull Request #2856 · MarkBind/markbind

yihao03 · 2026-03-11T08:22:54Z

What is the purpose of this pull request?

Overview of changes:
This is (edit: started off as) a fully vibe coded PR with (edit: has been tweaked and optimized since) minimal manual tweak to showcase what dark mode on a markbind sites can look like. The changes made include:

Upgrading Bootstrap to 5.3 for dark theme support
Add css for Vue components to support dark mode
Add a dark mode flag in site.json. By default, the dark mode respect user's
system preference.
Add a toggle button in the navbar to allow users to switch between light
and dark mode
Refresh CLI functional outputs for dark mode
Add runtime page theme switching
Add dark mode toggle and component overrides
Update tests

Anything you'd like to highlight/discuss:
Screenshots to be added later

Testing instructions:
pull this branch, run npm run setup and serve a markbind site to see the
changes.

Proposed commit message: (wrap lines at 72 characters)
Add Dark Mode support

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

Reviewer checklist:

Indicate the SEMVER impact of the PR:

Major (when you make incompatible API changes)
Minor (when you add functionality in a backward compatible manner)
Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

what was the old feature that was made obsolete

any replacement feature (if any), and

how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

Move MarkBind onto Bootstrap 5.3.8 and the matching Bootswatch release so the site can use Bootstrap's native theme switching instead of custom one-off overrides. This establishes the asset baseline needed for runtime dark mode without changing page behavior yet.

Update the checked-in functional expectations after the Bootstrap upgrade and theme-aware page rendering changes. This records the new generated HTML and bundled assets so future CLI regressions are measured against the dark-mode-capable output.

Teach page generation to load both light and dark highlight themes, set the Bootstrap theme before styles paint, and apply dark-safe defaults to built-in templates. This keeps the initial render in sync with the chosen theme and avoids flashes of mismatched UI.

yihao03 · 2026-03-18T06:33:18Z

For dark mode support, the website looks cohesive and basic features are already present too. I guess a good step forward would be releasing this as an experimental feature and ask for bug reports for visual artifacts? Perhaps we can include a message along the lines of:

Hi! We have added dark mode to MarkBind sites. You can toggle it using the button in upper right corner. Please report any issues and submit feedbacks at [github issue link]

in the bottom banner of the page where we currently have "Website generated by MarkBind...`

what do yall think? @MarkBind/active-3281-members

damithc · 2026-03-18T08:07:47Z

For dark mode support, the website looks cohesive and basic features are already present too. I guess a good step forward would be releasing this as an experimental feature and ask for bug reports for visual artifacts? Perhaps we can include a message along the lines of:

Hi! We have added dark mode to MarkBind sites. You can toggle it using the button in upper right corner. Please report any issues and submit feedbacks at [github issue link]

in the bottom banner of the page where we currently have "Website generated by MarkBind...`

what do yall think? @MarkBind/active-3281-members

While getting end users to do the testing is the trend now 😆, we should do our own testing first.
You can deploy a few sample sites (e.g., CS2103 site, MarkBind site, se-edu/guides) in your own account and get others (e.g., other CS3281 students) to do a test-drive.

codecov · 2026-03-18T13:55:40Z

Codecov Report

❌ Patch coverage is 90.90909% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 71.35%. Comparing base (a81d8e3) to head (a5f8cd0).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
packages/vue-components/src/DarkModeToggle.vue	91.66%	2 Missing ⚠️
packages/vue-components/src/Searchbar.vue	0.00%	1 Missing ⚠️
packages/vue-components/src/panels/NestedPanel.vue	75.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2856      +/-   ##
==========================================
+ Coverage   71.28%   71.35%   +0.06%     
==========================================
  Files         132      133       +1     
  Lines        7203     7229      +26     
  Branches     1711     1611     -100     
==========================================
+ Hits         5135     5158      +23     
- Misses       1967     1970       +3     
  Partials      101      101

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

This PR introduces dark mode support across MarkBind-generated sites by switching to Bootstrap 5.3’s data-bs-theme mechanism, updating component/template styles to be theme-aware, and adjusting page generation + test fixtures to support runtime theme selection (including code highlighting theme assets).

Changes:

Add runtime theme resolution (system preference + localStorage) and set data-bs-theme during initial page load; load both light/dark highlight stylesheets and toggle them at runtime.
Update Vue component and core-web CSS to use Bootstrap CSS variables and add dark-mode-specific overrides.
Refresh CLI functional expected outputs and template assets to match the new generated HTML/CSS behavior.

Reviewed changes

Copilot reviewed 145 out of 203 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
packages/vue-components/src/Tabset.vue	Add dark-mode print border override for tabset rendering.
packages/vue-components/src/TabGroup.vue	Add dark-mode print border override for tab groups.
packages/vue-components/src/Tab.vue	Add dark-mode print border override for tab headers.
packages/vue-components/src/Submenu.vue	Switch submenu text color to Bootstrap theme variable.
packages/vue-components/src/SiteNavButton.vue	Switch hamburger bar color to Bootstrap theme variable.
packages/vue-components/src/SiteNav.vue	Replace hardcoded nav colors with Bootstrap theme variables.
packages/vue-components/src/Searchbar.vue	Add dark-mode background override for `.table-active` rows.
packages/vue-components/src/panels/NestedPanel.vue	Adjust default panel background behavior and add dark-mode bg-light overrides.
packages/vue-components/src/panels/MinimalPanel.vue	Replace hardcoded colors with Bootstrap theme variables for dark mode.
packages/vue-components/src/PageNavButton.vue	Switch button dot color to Bootstrap theme variable.
packages/vue-components/src/Overlay.vue	Add dark-mode background for open overlay menu.
packages/vue-components/src/index.js	Register the new `DarkModeToggle` component.
packages/vue-components/src/cardstack/CardStack.vue	Add dark-mode text color overrides for badges/results count.
packages/vue-components/src/Breadcrumb.vue	Add dark-mode text color override for breadcrumb “notlink” items.
packages/vue-components/src/Box.vue	Add dark-mode alert overrides and align divider colors with alert border variables.
packages/core/test/unit/utils/data.ts	Update mocked page template assets to include both highlight stylesheets.
packages/core/template/project/stylesheets/main.css	Remove inline `mark` styling and add dark-mode template overrides.
packages/core/template/portfolio/stylesheets/main.css	Remove inline `mark` styling and add dark-mode template overrides.
packages/core/template/default/stylesheets/main.css	Remove inline `mark` styling and add dark-mode template overrides.
packages/core/src/Site/SitePagesManager.ts	Generate both highlight asset paths (light/dark) in page config.
packages/core/src/Site/LazyLiveReloadLoadingSite.html	Make loading screen colors responsive to `prefers-color-scheme`.
packages/core/src/patches/htmlparser2.ts	Treat `<dark-mode-toggle>` as a special tag for parsing.
packages/core/src/Page/PageConfig.ts	Update `PageAssets` to expose `highlightLight`/`highlightDark`.
packages/core/src/Page/page.njk	Add runtime theme resolution + dual highlight stylesheet toggling + set `data-code-theme`.
packages/core/package.json	Update Bootswatch version to match Bootstrap 5.3 series.
packages/core-web/src/styles/page-nav.css	Replace hardcoded nav colors with Bootstrap theme variables.
packages/core-web/src/styles/markbind.css	Add theme-aware `mark` styling and dark-mode overrides; adjust blockquote styles.
packages/cli/test/functional/test_site/expected/testTree.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testTooltipSpacing.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testThumbnails.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testPopoverTrigger.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testPopovers.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testPanels.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testPageNav.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testOcticonInPage.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testModals.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testMermaid.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testMath.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testMaterialIconsInPage.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testLinks.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testLayoutsOverride.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testLayouts.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testImages.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testIconsInSiteLayout.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testHr.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testGlyphiconInPage.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testFontAwesomeInPage.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testExternalScripts.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testEmptyAltFrontMatter.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testDates.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testCodeBlocks.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/testBootstrapIconInPage.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/sub_site/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site/expected/bugs/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/UserGuide.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/QuickStart.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/Features.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/userGuide/FAQ.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/team/johndoe.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/team/AboutUs.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/stylesheets/main.css	Update expected template CSS for dark-mode overrides and remove inline `mark` styling.
packages/cli/test/functional/test_site_templates/test_project/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/TracingCode.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Testing.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/SettingUp.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Requirements.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Implementation.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Documentation.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/DevOps.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/DeveloperGuide.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Design.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_project/expected/developerGuide/Configuration.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_portfolio/expected/stylesheets/main.css	Update expected template CSS for dark-mode overrides and remove inline `mark` styling.
packages/cli/test/functional/test_site_templates/test_portfolio/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_minimal/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_default/expected/stylesheets/main.css	Update expected template CSS for dark-mode overrides and remove inline `mark` styling.
packages/cli/test/functional/test_site_templates/test_default/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3b.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3a.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic2.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic1.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_templates/test_default/expected/404.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_table_plugin/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_special_tags/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_3.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_2.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/test_folder/extra_1.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/README.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/Page-1.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/Home.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic3b.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic3a.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic2.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/contents/topic1.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/about.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_navigation_convert/expected/404.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/Page-1.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/index.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/Home.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic3b.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic3a.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic2.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/contents/topic1.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/about.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/404.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/_Sidebar.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
packages/cli/test/functional/test_site_convert/test_basic_convert/expected/_Footer.html	Update expected HTML to include theme scripts + dual highlight stylesheets + code-theme attribute script.
docs/njk/common.njk	Adjust docs navigation buttons styling for Bootstrap 5.3 theme compatibility.
docs/css/main.css	Remove inline `mark` styling (now handled centrally/theme-aware).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

packages/core-web/src/styles/markbind.css

packages/core/src/Page/page.njk

packages/vue-components/src/Searchbar.vue

packages/vue-components/src/cardstack/CardStack.vue

packages/vue-components/src/Tab.vue

packages/vue-components/src/Box.vue

darkmode is set to be opt in for now until mature However, if user's device is on dark mode, bootstrap will default to dark mode until javascript loads, then switch it to white mode

…t/dark-mode

gerteck · 2026-03-31T04:56:18Z

packages/core-web/asset/js/theme-manager.js

+(function () {
+  if (document.documentElement.getAttribute('data-dark-mode') !== 'true') return;
+
+  const STORAGE_KEY = 'markbind-theme';


using a hardcoded storage key has the issue of uniqueness across sites

Does this mean the if i toggle between light and dark mode between e.g. the markbind.org site, the preference will be saved and used in the cs2103t site?

Some alternatives to consider is

adding a user defineable key prefix in site.json file,

generating some unique key based on some hash etc etc.

wdyt?

ops good point i haven’t considered that.

after some research, I found out that localStorage between different domains are not shared (see MDN docs)

Conversely, would it be a feature for us to enabled saved preference across different markbind sites?

opps, my bad, was under the wrong impression, could have been because serving it from localhost... 😅 Maybe it can be a feature but I guess it would be a bit of a stretch

But what about that for example if u have deployments across the origin?

E.g. markbind.org

markbind.org/devdocs

etc.

hmmm good point. but what are the chances we want to use different settings for different sites?

But implementation wise i think we could just append the baseUrl to the storage key

Probably not that much, so I guess we can just leave it as it is? Appending baseUrl makes sense, up to you if you think it's important to do so!

i think that could be a separate issue! let's have abit more discussion on this some time

gerteck · 2026-03-31T13:44:43Z

Is the dark mode easily previewable? With the addition of darkModeToggle.vue, should we add the component in the documentation but mark it as a beta feature for now?

…t/dark-mode

gerteck

LGTM

Best thing since sliced bread, pagefind and the esm-migration ! 🎉 ~

Note:

Due to the nature of the PR, although we do not usually generate, update and commit frontend bundles markbind.min.js and markbind.min.css bundles as per devdocs

Full build verification allows us to test FOUC logic, as serve -d injects styles late via JS, we cannot verify the logic without building, and also it allows us to smoke test the minification with the changes in the css assets.

In future PRs, should still follow outside of this special case to only update frontend bundles during release!

gerteck · 2026-04-01T10:24:38Z

Work done resolves (kind of) #2757 , although for now it is a beta feature, need some more smoke testing.

Thanks @yihao03 for the PR! awesome work

gerteck · 2026-04-01T13:18:21Z

Resolves (Part of) #2359

gerteck · 2026-04-01T19:13:09Z

Btw noticed a hydration error from the DarkModeToggle

When running markbind serve -d it shows the hydration error logs.

Hydration error shows up when the darkMode is enabled, but does not when it is not opt in enabled.

yihao03 added 6 commits March 9, 2026 13:21

Add dark mode toggle and component overrides

a1f02db

Update tests

19d5368

Update hard coded mark and blockquote colors

78dcb37

yihao03 added 5 commits March 18, 2026 19:04

Merge branch 'master' into feat/dark-mode

aa1c98f

Run npm i

403247f

Update page nav to use bootstrap colours

ddb44d9

Use bootstrap adaptive colors instead of hard coded value for nav

e419ccb

Update previous_next colour

60d6df8

yihao03 force-pushed the feat/dark-mode branch 4 times, most recently from 7bfd786 to f4104c5 Compare March 19, 2026 06:32

yihao03 marked this pull request as ready for review March 19, 2026 06:40

yihao03 requested a review from Copilot March 19, 2026 06:40

Copilot AI reviewed Mar 19, 2026

View reviewed changes

yihao03 added 7 commits March 20, 2026 11:53

Add adaptive theme for hot reload loading page

81801be

Add adaptive theme for panels

c9ac37d

Explicitly specify border colors for boxes

24bb019

Define mark in markbind.css instead of main.css

317f499

Build web and update tests

bf22300

Respect site.json for darkmode config

cd774d6

darkmode is set to be opt in for now until mature However, if user's device is on dark mode, bootstrap will default to dark mode until javascript loads, then switch it to white mode

Update tests

7260cdb

yihao03 force-pushed the feat/dark-mode branch from f4104c5 to 7260cdb Compare March 20, 2026 06:25

Merge branch 'master' into feat/dark-mode

883b5ef

yihao03 and others added 9 commits March 28, 2026 13:54

Merge branch 'master' into feat/dark-mode

2d34770

Build web

2c73b5d

Merge branch 'feat/dark-mode' of github.com:yihao03/markbind into fea…

adf3f93

…t/dark-mode

Fix disappeared toggle

60352c3

Move darkmode config into style object

3a9134f

Add visual separator for navbar

14d0951

Build and update test

4d6f446

Update site/page-nav border color

22491ae

Use variables instead of override for Box

0978692

gerteck reviewed Mar 31, 2026

View reviewed changes

yihao03 added 12 commits March 31, 2026 22:05

Merge branch 'master' into feat/dark-mode

e53e693

Build and updatetest

32de6a1

Add comments in page.njk

39c1306

Merge branch 'master' into feat/dark-mode

05d686b

Update docs

bf34a5e

Update docs

dce7cb6

Update site nav color

4d31eb1

Update quizzes

bd89dd7

Remove hardcoded white background in docs

0860e61

Enable dark mode in dg

e022eb9

Merge branch 'feat/dark-mode' of github.com:yihao03/markbind into fea…

6a4dccc

…t/dark-mode

Build and update test

a5f8cd0

gerteck approved these changes Apr 1, 2026

View reviewed changes

gerteck merged commit 6ccfbe9 into MarkBind:master Apr 1, 2026
13 of 15 checks passed

github-actions bot added the r.Minor Version resolver: increment by 0.1.0 label Apr 1, 2026

gerteck mentioned this pull request Apr 1, 2026

Bootstrap migration tracker #2359

Open

3 tasks

Conversation

yihao03 commented Mar 11, 2026 • edited by gerteck Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yihao03 commented Mar 18, 2026

Uh oh!

damithc commented Mar 18, 2026

Uh oh!

codecov bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gerteck Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

yihao03 Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

gerteck Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gerteck Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yihao03 Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

gerteck Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

yihao03 Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

gerteck commented Mar 31, 2026

Uh oh!

gerteck left a comment

Choose a reason for hiding this comment

Uh oh!

gerteck commented Apr 1, 2026

Uh oh!

Uh oh!

gerteck commented Apr 1, 2026

Uh oh!

gerteck commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

yihao03 commented Mar 11, 2026 •

edited by gerteck

Loading

codecov bot commented Mar 18, 2026 •

edited

Loading

gerteck Mar 31, 2026 •

edited

Loading

gerteck Mar 31, 2026 •

edited

Loading