Skip to content

fix(github): dark theme header #1922

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

fix(github): dark theme header #1922

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6bceb6
fix(github): dark theme header
LastElaphine Sep 20, 2025
5482e16
fix(github): Logged out HeaderMenu bar & prefs button
LastElaphine Sep 20, 2025
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: 5 additions & 13 deletions styles/github/catppuccin.user.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ regexp(
}
&[data-dark-theme="dark"] {
#catppuccin(@darkFlavor);
header[data-color-mode] {
#catppuccin(@darkFlavor);
}
}
}
}
Expand Down Expand Up @@ -318,7 +321,7 @@ regexp(
--fgColor-default: @text;
--fgColor-muted: @subtext1;
--fgColor-onEmphasis: @base;
--fgColor-white: if(@flavor = latte, @crust, @text);
Copy link
Author

Choose a reason for hiding this comment

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

I didn't notice any difference changing this logged in or out on a few different pages, so I'm not sure if it's still relevant to have it set to @crust on latte.

Copy link
Member

Choose a reason for hiding this comment

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

Did it break something?

Copy link
Author

Choose a reason for hiding this comment

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

I found one issue this was causing, currently the "Appearance Settings" icon in the top right in Latte is not visible:
Screenshot 2025-10-11 at 14-51-43 fix(github) dark theme header by LastElaphine · Pull Request #1922 · catppuccin_userstyles · GitHub

But removing the if condition fixes it to look like this:
Screenshot 2025-10-11 at 14-52-16 fix(github) dark theme header by LastElaphine · Pull Request #1922 · catppuccin_userstyles · GitHub

With the removal of the header overrides in this PR the text is not visible in Latte when the if condition is set:
Screenshot 2025-10-11 at 14-50-24 fix(github) dark theme header by LastElaphine · Pull Request #1922 · catppuccin_userstyles · GitHub

Will all the changes in the PR it also looks correct on Latte:
Screenshot 2025-10-11 at 14-56-01 fix(github) dark theme header by LastElaphine · Pull Request #1922 · catppuccin_userstyles · GitHub

--fgColor-white: @text;
--fgColor-disabled: @surface2;
--fgColor-link: @accent;
--fgColor-neutral: @subtext1;
Expand Down Expand Up @@ -517,24 +520,13 @@ regexp(
}

/* Header when logged out */
.HeaderMenu-link {
color: @text;

&:hover {
color: @text;
}
}
.header-search-button {
&.placeholder {
color: @subtext0;
}

svg {
fill: @text !important;
}
}
.HeaderMenu-toggle-bar {
background-color: @text;
border-color: @text;
}
.notification-indicator .mail-status {
background-image: linear-gradient(
Expand Down