Submit templates for repl.it/templates here.

← Back to all posts
🌙 Dark Theme - Template
PYer

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 repl.it 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!

Voters
flamingarrow62
XavierDD
LuxAsani
Ashleen12
buggingTheCode
katyasorok
ImnotFullyHere
SiddhantManze
AdmiralHTML
PyCoder01
Comments
hotnewtop
sojs

I apologize for my earlier comment

PYer

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

sojs

@PYer Thanks

Highwayman

Is Pyer satan?

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

PYer

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 repl.it they could remove it once, but they didn't do anything. Same with mat1, if I remember correctley. @Highwayman

PYer

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

Highwayman

@PYer
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

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

PYer

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

Highwayman
PYer

Yes, i actually have! @Highwayman

Highwayman

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

PYer

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

Highwayman

@PYer lol me

DeaconBurgess

did you just use css to make the theme

PYer

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

PYer

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

flamingarrow62

How do I install this...

PYer

Just start editing the repl. It'll fork it automatically for you. @flamingarrow62

flamingarrow62

Thank you @PYer

AdmiralHTML

This is nice but there already is a dark theme but this is actual code.

[deleted]

replit simply allows u to go to account and switch to dark theme lol

[deleted]

replit simply allows u to go to account and switch to dark theme lol

HrushalNikhare

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

Code1Tech

nice!

PYer

Thanks! @Code1Tech

techgeek680

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

PYer

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

techgeek680

yeah. @PYer

kingretracted

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

PYer

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!

smuppana060

𝕎𝕠𝕨!

PYer

Thanks @smuppana060!

CodingGoose

𝑪𝒐𝒐𝒍 template!

PYer
AdLiang1

noice template!

PYer

Thanks! @AdLiang1

TheForArkLD

𝑪𝒐𝒐𝒍

But i can’t upvote.
why?i have 2 templates for {{template_jam}}

TheForArkLD
TheForArkLD
BlueComet

Nice job

PYer

Thanks @iterate! Have you made any templates yet?

BlueComet

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