DarkPixlz's Modern Theme

:warning: Read: DarkPixlz's Modern Theme - #110 by darkpixlz


darkpixlz’s Modern Theme

This is a theme with rounded corners, a lot of blur, a consistent look, and it’s very custom to fit with your forum.

!!WARNING: Some screenshots may be out of date, if they are, then this post is a wiki, feel free to edit!

This theme is made for dark schemes. It supports light ones, but some things may be broken.
Screenshots:



There’s also a tile version, but I couldn’t find a good use of it for this post.




image
I’m editing this topic but I have to reply and Discourse wont let me save the draft - this will be edited with more screenshots soon.

This theme supports most major plugins.

It also will not come with a different color pallet for now, look out for that in the future.

Have any ideas? Let me know on here!

Settings

Is Cursor Active: Allows the cursor to change states.
Example:
Disabled (default):
image
Enabled:
image

Background Image: Changes the background image.

Examples



Is Background Blurred: Enables the background blur.

Example

Enabled:


Disabled:

Background Type: Toggle between a tile background and a scale background.

Example

Crop:

Tile:
image

Tile Size: Changes the tile size, to apply to tile backgrounds.
Staff Tag: Enables a “STAFF” tag next to admin and moderator’s names. Enabled by default

:warning: Plugins + components known to cause issues

  • Full Width Component
  • (possibly) All Ad Plugins

:warning: Other notices

  • I don’t recommend adding custom backgrounds to things that aren’t settings (like tags), as it will cause incompatibilities or bugs.
  • Chrome and iOS are known to have issues with background blur in some places
  • “Latest” and “Top” pages have known issues on mobile
  • Theme Creator Preview does not work correctly due to colors
  • While light schemes are possible, it might break some things and make them hard to read.

Install this theme

:spiral_notepad: Release Notes
DarkPixlz's Modern Theme - #65 by darkpixlz

29 Likes

Reminds me a lot of Fluent (Windows 10), I love it :purple_heart:

5 Likes

Hello everybody!

I noticed that there were some missing corners that were promised, I committed those just now :slight_smile:
Enjoy!


5 Likes

Hey everyone!

Another update today, I changed the way that things blur, and added support for Discourse Chat.
Enjoy :slight_smile:
image
image
image
image

I wasn’t so sure on the flag one - any feedback is welcome!

7 Likes

Hey
I’m new here, and I was wondering can I use this theme in my discourse?

4 Likes

All of the themes here in #theme are usable for everyone (and the components in #theme-component too). :+1: This particular one is a community contribution by @darkpixlz, but there are also some #official ones as well - all open-source and free to use.

6 Likes

Yes, as @JammyDodger said you can use any theme in #theme, just click Customize, then Add theme, then From a git repository, then the repository link and it will add. Thanks :slight_smile:

4 Likes

awesome! works great
Can you help me with one thing?
How can I change the header? the gradient color to my colors… I can’t find it

attache a photo:

1 Like

I dont understand fully.

I will write you a custom theme that’s the exact theme but is missing the gradient though. Give me 10 minutes and delete that theme from your site.

1 Like

Hey! Sorry for the delay, here is the repository:

3 Likes

Oh thank you very much, sorry my question was not clear
is how you can change the color - instead of green to light blue - for example, pink to dark blue
Asset 1-100

1 Like

Ohhh, I get it now.

Sure, I can change that for you. It’s an image lol, should probably make it a real gradient.

3 Likes

hoo amazing… i thought it’s in the code or something… if it’s an image where is it so i can replace it on my version?

3 Likes

Also, since you are so nice!!!
where can i add the image in the background like you have here? the icons

1 Like

Ok, SO

Delete that theme and then get the default repository again.
Update it

Make a new component, and make the CSS this:

.d-header {
  background-image: url("https://cdn.discordapp.com/attachments/597146309908103178/1001925437632565308/Untitled2.jpg?size=4096") !important;
  background-repeat: no-repeat;
  border-radius: 0px 0px 8px 8px;
}

Then save it, and apply it to my theme, Should work. :slight_smile:
The icons are fixed in the latest update, just click “Update to latest”
Latest version:

4 Likes

Thanks so much!
really nice of you to help so much!!!

I hope i understand everything :laughing:

2 Likes

Hey everybody!

I forgot to mention earlier but thanks to @Don, the theme now fully supports firefox and mobile browsers!

I also have some pretty exciting plans and changed stored for the future, look our for a large commit in the future!

Speaking of that would you like cards like this?
image

I would like it, but I Would not like to figure out the SCSS

Actually, I was able to half get it!

Again, let me know if it’s something worth keeping

2 Likes

I’m in the picture! :slight_smile:

2 Likes

It’s giving Windows 11 & MacOS mashup with a sprinkle of Material Design here and there, love it :heart_eyes:

3 Likes

Are you trying transforming topic list items into these cards? It looks beautiful, I like those round corners :laughing:. And I think that the blank space below tags is reserved for topic excerpts, isn’t it? This is an interesting idea. I would say please keep going.

But what those figures (like 120, 83, 16) stand for is not very clear, at least to me, maybe you could make some improvements on it.

2 Likes