fix : add background styling for dark logos in branding documentation by Ekagrashharma · Pull Request #247 · webpack/webpack-doc-kit

Ekagrashharma · 2026-08-15T17:15:11Z

Summary

This pull request updates the pages/about/branding.md file to improve the presentation of the webpack logos on dark backgrounds. The main change is the addition of a dark background behind the logo images to ensure better visibility and consistency.

Added a dark background (#0d121c) behind the horizontal and stacked logo images for dark backgrounds using a styled, making the logos more visible and visually consistent.

fixes : #243

Dark theme

Light theme

Summary by CodeRabbit

Style
- Improved dark-background logo previews in the branding documentation by adding consistent background styling and padding.
- Preserved existing links to the downloadable logo assets.

…mentation

…umentation

vercel · 2026-08-15T17:15:16Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webpack-doc-kit	Ready	Preview	Aug 17, 2026 6:25pm

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

coderabbitai · 2026-08-15T17:17:36Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4e5adce8-8fb3-4990-b808-0e852623ae3f

📥 Commits

Reviewing files that changed from the base of the PR and between 2966726 and 5b56d7b.

📒 Files selected for processing (1)

pages/about/branding.md

Walkthrough

The branding page now wraps horizontal and stacked dark-background logo images in styled spans. The spans use #0d121c as the background and 20px of padding. The existing dark-background asset links remain unchanged.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: adding background styling for dark logos in the branding documentation.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

_{Comment @coderabbitai help to get the list of available commands.}

avivkeller · 2026-08-15T17:34:08Z

-| [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) |
+|                                                                                                          Light backgrounds                                                                                                           |                                                                                                                              Dark backgrounds                                                                                                                              |
+| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                ![webpack horizontal logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png)                                 | <span style="background-color: #0d121c; padding: 20px; display: inline-block;">![webpack horizontal logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png)</span> |


Can we use a -- variable, we have several theme variables defined

Okay, I understand. Should I use one of the existing theme variables for this, or would you prefer me to define a new variable for the color?

Hi @Ekagrashharma! I encourage you to read webpack's AI policy.

Sure, I’ll go through the AI policy and make sure I’m aligned with that .
Just wanted to be transparent with you—I’m not too much confident with my English, so I sometimes use AI to help me phrase my messages better. :)

Hey, @avivkeller, can you help me with what to do next

Hey, @TusharThakur04

I tried to add the variable instead of the hex code, but Tailwind is not loading in the MDX file. I read the CSS and style loader file, but I am unclear on how to tackle this.

Can you give me some references where I can look into this ?

@avivkeller does mdx parser at doc-kit take care of variable names?

The variable name is plain CSS, so it's not parsed/tailwind-ed, and is handled by the browser's CSS loading directly

@Ekagrashharma If you push your changes that aren't working, I'm sure I can help identify a root cause :-)

@Ekagrashharma If you push your changes that aren't working, I'm sure I can help identify a root cause :-)

OK, I'll do that, and I also added 2 test divs so you can see that Tailwind is not loading, but the inline CSS is working.

the theme.css is declaring the @theme variables

socket-security · 2026-08-17T15:21:22Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	css-loader@7.1.4
	style-loader@4.0.0

View full report

Co-authored-by: Aviv Keller <me@aviv.sh>

Ekagrashharma added 2 commits August 15, 2026 15:11

fix(branding): add background styling for dark logos in branding docu…

227755e

…mentation

fix(branding): update background color for dark logos in branding doc…

5b56d7b

…umentation

Copilot AI lite review requested due to automatic review settings August 15, 2026 17:15

Copilot AI reviewed Aug 15, 2026

github-actions Bot added the documentation Improvements or additions to documentation label Aug 15, 2026

vercel Bot deployed to Preview August 15, 2026 17:16 View deployment

Merge branch 'main' into fix/icon-bg

d95f0cd

vercel Bot deployed to Preview August 15, 2026 17:17 View deployment

Ekagrashharma changed the title ~~fix(branding): add background styling for dark logos in branding documents~~ fix : add background styling for dark logos in branding documentation Aug 15, 2026

avivkeller approved these changes Aug 15, 2026

View reviewed changes

avivkeller reviewed Aug 15, 2026

View reviewed changes

test(mdx): add two test divs

825a03d

github-actions Bot added the dependencies Pull requests that update a dependency file label Aug 17, 2026

vercel Bot had a problem deploying to Preview August 17, 2026 16:17 Failure

TusharThakur04 reviewed Aug 17, 2026

View reviewed changes

Comment thread package.json Outdated

TusharThakur04 reviewed Aug 17, 2026

View reviewed changes

Comment thread package.json Outdated

avivkeller reviewed Aug 17, 2026

View reviewed changes

Comment thread pages/about/branding.md Outdated

Update pages/about/branding.md

5ff454d

Co-authored-by: Aviv Keller <me@aviv.sh>

vercel Bot deployed to Preview August 17, 2026 17:13 View deployment

fix: add darkBg class for logo styling

483e8a5

github-actions Bot added the theme label Aug 17, 2026

vercel Bot deployed to Preview August 17, 2026 18:25 View deployment

TusharThakur04 approved these changes Aug 17, 2026

View reviewed changes

Uh oh!

Conversation

Ekagrashharma commented Aug 15, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel Bot commented Aug 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented Aug 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Ekagrashharma Aug 15, 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!

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!

socket-security Bot commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Ekagrashharma commented Aug 15, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Aug 15, 2026 •

edited

Loading

coderabbitai Bot commented Aug 15, 2026 •

edited

Loading

Ekagrashharma Aug 15, 2026 •

edited

Loading

socket-security Bot commented Aug 17, 2026 •

edited

Loading