Ask coding questions

← Back to all posts
Repl.it Darkmode, and check mark
RYANTADIPARTHI (6010)

Hi,

i just needed help with the repl.it dark mode, and the check mark in the ask section.

So if someone could help me out with the repl.it dark mode color, and system. And if someone could give me the check mark symbol(exact symbol, with hover, and all), It would be much appreciated.

thanks!

Answered by Coder100 (17109) [earned 5 cycles]
View Answer
Comments
hotnewtop
SixBeeps (5067)

Looks like they use an SVG and switch the RGB values for interaction. If you want the SVG code, here it is:

<svg fill="rgb(217, 217, 217)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"></path></svg>
RYANTADIPARTHI (6010)

@SixBeeps thanks! it kind of works. But one thing is, it's too large. And another is, when i hover over it, it's not a type of green like the repl.it check mark. Could you do that?

And if you could, do you know the repl.it dark mode system?

Thanks!

SixBeeps (5067)

@RYANTADIPARTHI Just set the width of the element in CSS. It looks to be 30x30 when used on RT.

The hover thing is a CSS thing as well. Looks like normally the check is --color-control-1 and it turns into --color-positive-1 on hover. This should be mapped to the fill property on the checkmark.

Can't say I know much about how the dark theme works on here, sorry.

RYANTADIPARTHI (6010)

@SixBeeps i'm not exactly good with css, so i don't understand that part. Could you show me in code? It's ok about the dark mode though.

SixBeeps (5067)

@RYANTADIPARTHI

.checkmark {
  width: 30px;
  height: 30px;
  fill: var(--color-control-1);
}

.checkmark:hover {
  fill: var(--color-positive-1);
}

This should work in theory, though I haven't tested it.
Also, I believe the two color variables change based on the theme.

Coder100 (17109)

psst define the variables remember @SixBeeps

RYANTADIPARTHI (6010)

@SixBeeps thanks, this kind of works. But few things. One is, the color is black. but the repl.it check mark is kind of transparent. And when i hover over the checkmark you gave me, it's not changing any color. Just black.

Could you fix those?

Thanks!

RYANTADIPARTHI (6010)

@Coder100 do you know how to do the repl.it dark mode?

SixBeeps (5067)

@RYANTADIPARTHI Oh I thought you were working with Repl.it's stylesheet already. In dark mode, --color-positive-1 is #20ab46 and --color-control-1 is #313646

RYANTADIPARTHI (6010)

@SixBeeps it almost works. Only, the solid color of it is grey now. But when i check repl.it checkmark, it's kind of transparent. Could you do that?

SixBeeps (5067)

@RYANTADIPARTHI Huh, that I'm not sure about. I'd have to see the code.

RYANTADIPARTHI (6010)

@SixBeeps ok. And you don't know the dark mode right? Well, I'll just wait for a bit, and if no answers or anything, I'll select your answer.

Coder100 (17109)

the svg is already transparent so it works in dark mode @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 no, i'm talking about the dark mode system for repl.it. Do you know how to get the button for it. And when i click the button, the page should be dark. And it should stay dark, until user clicks button again.

RYANTADIPARTHI (6010)

@Coder100 do you at least know that answered symbol on a post. Like if a question has been answered, when you scroll through posts, it has the green answered sign. could you give that?

Coder100 (17109)

it's not a symbol, its an svg
@RYANTADIPARTHI

Coder100 (17109)
<svg fill="rgb(217, 217, 217)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"></path></svg>

@RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 no, i meant the green answered sign. When you scroll through posts? The square box that just simply says answered. That.

Coder100 (17109)

you do that using the color property @RYANTADIPARTHI

Coder100 (17109)

see this: fill="rgb(217, 217, 217)"
you edit that to change the color lol @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 you're misunderstanding me. I mean this.

can you give this?

Coder100 (17109)

that's literally the svg next to a span tag with text answered @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 you are just giving the check mark. I'm asking the entire box. With the checkmark in it.

that?

Coder100 (17109)

uh

<div>
  <svg>... snip ...</svg>
  <span>answered</span>
</div>

then some css and it will be all done
@RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 thanks, but can you show me that css? I don't know much css.

I will mark your answer if you get this.

Coder100 (17109)

btw do you need the exact colors or no @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 uh yeah i need exact colors. Thanks!

Coder100 (17109)

unfortunately this isn't the exact output you will see, I am yet to find the font:
https://replit.com/@Coder100/StrongOvalAutoresponder-eouoeu-oeu#style.css
@RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 ok. thanks. Also, one more question. Do you know how to do the repl.it dark mode system?

Coder100 (17109)

@RYANTADIPARTHI yeahh
that's purely css, using something called css variables

RYANTADIPARTHI (6010)

@Coder100 could you show me how? thanks!

RYANTADIPARTHI (6010)

@Coder100 ok, thanks. But the thing i wanted was the switch. You know when you clicka button, it switches to light mode, and stays there, until clicked again to dark mode. could you do that? thanks!

Coder100 (17109)

oh sorry didn't see that
yeah sure @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 ok thanks! let me know when you are done

RYANTADIPARTHI (6010)

@Coder100 uh, so are you done, or kind of done?

RYANTADIPARTHI (6010)

@Coder100 oh. ok thanks. This is good. But my last requirement for this is, it doesn't save. Meaning like, when i click for light mode, and refresh, it doesn't stay light, it goes to dark.

so if you could, could you make it so it saves whatever theme the user wants until the user changes it?

Thanks!

sorry for all the requirements.

Coder100 (17109)

oh yeah
you can use localstorage for that just a sec @RYANTADIPARTHI

SixBeeps (5067)

@RYANTADIPARTHI @Coder100 thank you both for the mass ping spam btw :p

RYANTADIPARTHI (6010)

@Coder100 one more thing. Do you think you could do the dark theme stuff in just index.html. Instead of so many files? Thanks!

Coder100 (17109)

no
remember the css files need to be in their own separate files or else the js won't work
the js can be embedded:

<script>
... copy and paste that code here ...
</script>

but that's not super fast for the client, its best to split it up so they can be cached.
@RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 well it doesn't exactly work for me. in my repl. But I've seen other people do it in one file. And it works.

Coder100 (17109)

@RYANTADIPARTHI yeah, ofc there is the other way, but the other way imo does more bad than good

basically it goes like this:

body.dark ... element {

}

body.light ... element ... {

}

do you really want to maintain that monstrosity?

RYANTADIPARTHI (6010)

@Coder100 well idk. I need a system that works in one file.

Coder100 (17109)

ok then use that method i gave u @RYANTADIPARTHI

Coder100 (17109)

y do u need it in one file anyways? @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 nice, but when i refresh. It goes to white mode for 1 second, then appears dark. Could you remove that? Thanks!

Coder100 (17109)

oh yeah
sorry but that's the page load i can't change that @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 but it worked for the multi file thing though. Could you do something?

Coder100 (17109)

sorry
that was the magic of caching which we lost @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 so if it's one file, there is no caching?

RYANTADIPARTHI (6010)

@Coder100 also, could you do it with an onclick? Like the button should be with an onclick.

could you do that? Thanks!

Coder100 (17109)

that's already what it does, addeventlistener. @RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 yeah, but i have the button, and the script i in different files. So could you do the onclick thing?

Coder100 (17109)
<button onclick="func()"></button>

and in ur js:

function func() { ... }

replace ... with the code i gave you.
@RYANTADIPARTHI

RYANTADIPARTHI (6010)

@Coder100 it kind of works. But some of it doesn't. like when i click it the first time, it changes to black, but when i click again, it just stays black. Doesn't change. Another problem is, when i refresh, it goes back to white.

RYANTADIPARTHI (6010)

@Coder100 so could you help with that?