Submit templates for here.

← Back to all posts
🌙 Dark Theme - Template
PYer (4012)

Here's a template I spent a lot of time on, for a great dark theme! It uses most semantic elements to structure the page, and also has a lot of built-in classes for styling, and a pre-made color scheme, based of the same shade of blue that uses (dodgerblue). It uses a neat, bold sans-serif font for the entire page, which gives your site a simplistic, yet cool look. The examples includes an simple structured site, as well as a list of elements to show how they are styled. I hope people find use for it, and maybe actually create something cool with the template! Here's a link for a new window Dark Theme Template. Keep coding, and stay stafe!

EXTRA FACT: This has 263 lines of css last I checked!

NEW: Added a bunch of classes for color, width, height and added styling for bolded, underlined, and strikethrough text! Also added the author class to right-align an author to an article!
New Classes: bgRed, bgBlue, bgGreen, buttonRed, buttonBlue, buttonGreen, thin, wide, short, tall, red, blue, green, glowRed, glowBlue, glowGreen, author
New Elements: b, u, del, button

NEW: Added styling for form elements, also for italics that was forgotten last update...
New Classes: None
New Elements: i, input, form, select, button

NEW: Checked the styling for a bunch of different types of input for forms. Also added a white background and a border to the canvas element. Increased border size of input elements to 2px and added a border radius of 2-4px.
New Classes: None
New Elements: canvas
New <input type>: button, color, date, email, file, image, month, number, radio, range, search, tel, time, url, week

NEW: Added a script tag in the <footer> for a copyright that updates yearly.

NEW: Added support for <figure> and <figcaption> as well as classes for floating! Creates a nice looking image with a grey caption describing it!
New Classes: imgleft, imgright
New Elements: figure, figcaption

NEW: Along with the three shades of red, green, and blue, I have now added two shades of grey (or gray). Also addes support for borders of different colors.
New Classes: grey, gray, bgGrey, bgGray, bgDarkGrey, bgDarkGray, glowGrey, glowGray, glowDarkGrey, glowDarkGray, borderBlue, borderRed, borderGreen, borderGrey, borderGray, borderDarkGrey, borderDarkGray,
New Elements: hr

IK it's kind of ugly, but it's hard to make it look nice while remaining flexible. You can edit the stylesheet yourself! It's a template!

sojs (341)

I apologize for my earlier comment

PYer (4012)

No problem. I did check out your post and liked it. I'll go upvote it. @sojs

Highwayman (1481)

Is Pyer satan?

Dark theme... 666... python... 🤷‍♂️ You tell me.

PYer (4012)

I don't know, some of my friends went overboard once and upvoted my stuff. I told them to stop and then they did. I told they could remove it once, but they didn't do anything. Same with mat1, if I remember correctley. @Highwayman

PYer (4012)

I noticed you didn't upvote my post... @Highwayman

Highwayman (1481)

1) oh. Aw. I it would have been cool if it was a coincidence oh well.
2) wait plz forgive me I shall do that now. XP

PYer (4012)

It may have been a coincidence, I have no idea exactly what they did... @Highwayman

PYer (4012)

Thanks for upvoting! @Highwayman Do you have any templates yourself?

PYer (4012)

Yes, i actually have! @Highwayman

Highwayman (1481)

@PYer oh, I didn’t see an upvote from you so I just kinda assumed you hadn’t.. why no upvote?

PYer (4012)

hmmmmmm... I thought I did. If you read my comments I said I was going to. I'll do it @Highwayman

DeaconBurgess (78)

did you just use css to make the theme

PYer (4012)

Yeah. I'm planning on adding more. @DeaconBurgess

PYer (4012)

I just added a footer that uses JS to update the copyright yearly... @DeaconBurgess

HrushalNikhare (2)

Hii you can use color.adobe for the color scheme or pallet too
And also for a random color

techgeek680 (73)

super easy on the eyes XD!
Edit: Hey, I can't upvote. It says, 'Validation Error'.

PYer (4012)

Don't know... Maybe the board is locked. Do you have a verified email? @techgeek680

kingretracted (30)

I dont want to sound salty or anything but how is this a template?

PYer (4012)

Hello! @kingretracted I've always thought of this as a template because there is a bunch of pre-made css. If somebody wants to use this template, they can just look at the example html to learn how to use it if they need to, and then delete it. Then, they don't have to type as much boilerplate css, as I have already done it for them. If you have any suggestions to make it easier to use, or on anything else, please tell me. Thanks!

DannyIsCoding (698)

𝑪𝒐𝒐𝒍 template!

PYer (4012)

Thanks @iterate! Have you made any templates yet?

BlueComet (116)

@PYer no I have not and I do not no how