Pyx’s Modern Theme is the successor to my old theme, darkpixlz’s Modern Theme, which was a fork of the Air theme. It was roughly 2500 lines and had many issues, so I have rewritten it!
Screenshots
Features
Supports the full admin interface and review panel
Supports almost every modern core feature (new topic map, new upgrade page, chat, …) and some plugins
Customizable background image
Adds a --user-bg-url property for your plugins to read a users background image on profiles
Compared to my old theme, way less LOC overall and easier for devices to render
Known issues
Nothing at the moment!
All contributions on the repository are more than welcome and will (probably) be reviewed same-day. Comments or ideas? Drop a reply here. Issues? Make a github issue please.
Please note that I test all of my styles for Firefox and Firefox only; if Chromium is acting up, please don't hesitate to file a report. I do not test nor verify mobile view at the moment, but support is planned.
Well, there seems to be a problem with not having any components installed, and then it seems to change the CSS of the images, causing a lot of them to become rectangles.
I wonder if it’s possible to add an adaptive scale? I’d like to have a sidebar component on the right side.
CSS
/* Get the user's avatar width and set the maximum width of the ad container */
/* Ad container styles */
#list-area {
display: flex; /* Arrange ads using flexbox */
flex-direction: column; /* Display ads vertically */
gap: 0; /* Remove spacing between ad images */
padding: 0; /* Remove container padding */
margin: 0; /* Ensure no extra margin around the ad container */
max-width: 812px; /* Limit the ad container width to a maximum of 812px (avatar width: 48px) */
}
/* Ad link styles */
.banner-ad {
display: block; /* Make the ad container a block element */
width: 100%; /* Ensure the ad container occupies 100% width */
max-width: 100%; /* Prevent exceeding the maximum width */
margin: 0; /* Remove spacing between ad containers */
}
/* Responsive ad image styles */
.ad-image {
width: 100%; /* Ensure the image occupies the full width of its parent */
height: auto; /* Maintain the original aspect ratio of the image */
max-width: 100%; /* Prevent the image from exceeding its container's max width */
display: block; /* Fix the empty space issue at the bottom of images */
margin: 0; /* Remove any additional space around the image */
}
/* Responsive Design: Adjust ad display for large and small screens */
/* Adjust ad display on devices with a width less than 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Ensure no extra padding on mobile devices */
}
.banner-ad {
width: 100%; /* Ensure the ad occupies the full width on small screens */
}
.ad-image {
width: 100%; /* Ensure the image adapts to the container width */
height: auto; /* Maintain the image's aspect ratio */
}
}
/* Further adjust ad images on very small devices (e.g., phones in portrait mode) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Ensure images adapt to the phone's screen width */
max-width: 100%; /* Set the maximum width to 100% to avoid oversizing */
height: auto; /* Maintain the image's aspect ratio */
}
}
I’ll check on the side component thing tomorrow. No promises on advertising because I cannot test that but for general scaling I should be able to fix that.
Sorry, I was sick a lot of this week, have also had other things to be doing. Just polished the post stream up, fixed many bugs, and made the composer float!
Also, I noticed that the theme page got reverted to the old version which has summoned a lot of issues. I’m not going to make an effort to fix anything there because I feel like it will be re-added and it will look like intended.
Unfortunately that’s a little out of scope for this theme because it’s intentionally unibody so I would not adopt a layout where the sidebar is detached. If you’re looking for a design like that I’d recommend these two amazing themes:
However if the header banner is something you’d like to see supported feel free to give me a site URL and I’ll check out the possibility of supporting it.
tl;dr: The theme is now out of the “preview” stage! I’m confident enough it’ll work for most everybody’s sites and be styled ok. With this new stage, I am no longer looking for bug reports here, please file GitHub issues going forward.
Please keep the feedback coming - any and all is welcome. Thank you for your continued support even if I may be slow :3
More good news! I just ended up rewriting the theme again so it is no longer one massive common.scss file. It shouldn’t look any different besides some minor fixes I made. Enjoy :3
Really liked the theme, but there’s some “artifacts” that unfortunately prevents me from using it
The “Profile” page has little button behind the header that says “skip to content”
When I try to select a different color palette (as user, on my profile) the dropdown selection shows close to the “skip to content” button i mentioned above (that’s how I realized it was there)
Yes, people (myself included) often use tab for easily navigating pages for either convenience or accessibility reasons. For example, if you’re in a form with a lot of inputs, often instead of moving your mouse over to the next box you can press tab and it’ll go to the next one.
Hello, I am using desktop (Windows 11 24H2). I saw earlier posts showing that the theme select works so I don’t know why this occurs over here. I can download Firefox and test that, however.
You can try using your phone and making sure Discourse is fully up to date (the theme is always tested against latest tests-passed commit), otherwise I’m not sure what your issue could be, sorry!
i just check a quick preview of the theme on my phone and wondering if there is any way to make the popup screen blurry like the one from the “search bar “ for the profil, like in the picture, it’s hard to read as you can see, the search bar background is perfectly blur and nice
would be awesome to have the same for on profile, be much easier to read notifications
Historically I haven’t tested against mobile, thanks for letting me know about the issues. I’ll look into fixing the user menu, I guess it’s just broken on anything non-Gecko based.
Hello all! Just another routine cleaning up of the theme and fixing some existing issues and breakage caused by newer Discourse.
Changelog:
Fixed the body being ~5px offcenter
Fixed the user menu and many dropdowns
Corrected composer warnings for new minified core style
Added table builder support
Numerous post stream improvements [quotes, onebox, nav buttons, codeboxes]
Admin and group page fixes
User card improvemenets
That’s about it for this update, as per usual let me know if you have questions/comments/concerns!! I’m also working on getting GitHub Sponsors up so you can support the theme if you like it, no news on that for the time being due to Stripe but it’s coming.
Hi, I did briefly look at the theme on my iPhone 15 Plus with 26.3 beta something on it. It looks fine and is functional but there is definitely some changes I can make, which I might get around to tonight or sometime this week.
Hi everybody! Back with some more minor changes but the review queue has been fixed and I changed some other minor things.
I also updated the photos in the OP because they were a year old at this point. There’s still more I want to do in the near future (like a mobile layout) so stay tuned for that. I’m also still working on GitHub sposors.
I’m confident enough it’ll work for most everybody’s sites and be styled ok. With this new stage, I am no longer looking for bug reports here, please 
, it has been fixed now. Everything should be normal again.
