Skip to content
Sign upLog in
← Back to Community
πŸŒ™ Dark Theme - Template
Profile icon
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
Profile icon
igii
Profile icon
hauntd
Profile icon
flamingarrow62
Profile icon
XavierDD
Profile icon
Ashleen12
Profile icon
buggingTheCode
Profile icon
katyasorok
Profile icon
ImnotFullyHere
Profile icon
SiddhantManze
Profile icon
AdmiralHTML
Comments
hotnewtop
Profile icon
sojs

I apologize for my earlier comment

Profile icon
PYer

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

@sojs

Profile icon
sojs

@PYer
Thanks

Profile icon
Highwayman

Is Pyer satan?
50C91B1C-0068-4318-8E9E-064393EC2417
Dark theme... 666... python... πŸ€·β€β™‚οΈ You tell me.

Profile icon
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

Profile icon
PYer

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

@Highwayman

Profile icon
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
Profile icon
PYer

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

@Highwayman

Profile icon
PYer

Thanks for upvoting!

@Highwayman
Do you have any templates yourself?

Profile icon
Highwayman
Profile icon
PYer

Yes, i actually have!

@Highwayman

Profile icon
Highwayman

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

Profile icon
PYer

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

@Highwayman

Profile icon
Highwayman

@PYer
lol me

Profile icon
DeaconBurgess

did you just use css to make the theme

Profile icon
PYer

Yeah. I'm planning on adding more.

@DeaconBurgess

Profile icon
PYer

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

@DeaconBurgess

Profile icon
flamingarrow62

How do I install this...

Profile icon
PYer

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

@flamingarrow62

Profile icon
flamingarrow62

Thank you

@PYer

Profile icon
AdmiralHTML

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

Profile icon
[deleted]

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

Profile icon
[deleted]

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

Profile icon
HrushalNikhare

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

Profile icon
Code1Tech

nice!

Profile icon
PYer
Profile icon
techgeek680

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

Profile icon
PYer

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

@techgeek680

Profile icon
techgeek680

yeah.

@PYer

Profile icon
kingretracted

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

Profile icon
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!

Profile icon
smuppana060

π•Žπ• π•¨!

Profile icon
PYer
Profile icon
CodingGoose

π‘ͺ𝒐𝒐𝒍 template!

Profile icon
PYer
Profile icon
AdLiang1

noice template!

Profile icon
PYer

Thanks!

@AdLiang1

Profile icon
TheForArkLD

π‘ͺ𝒐𝒐𝒍

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

Profile icon
TheForArkLD
Profile icon
TheForArkLD
Profile icon
BlueComet

Nice job

Profile icon
PYer

Thanks

@iterate
! Have you made any templates yet?

Profile icon
BlueComet

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