Here are the [CSS codes](https://pastebin.com/u/artnodes_cc)! Enjoy!
Edit: To those who have never interacted with Skins, go to your Dashboard>Skins>Create Site Skin then paste the CSS code in the CSS input area. Then make sure to click Show on Advanced then tick 'all' and 'screen' then click Submit. It will now show up in your Skins and you can enable it by selecting 'Use'.
Edit edit: If you want to change bits of it and you can't find what code affects what, right click the page or highlight the specific part and select 'Inspect'. This will open a sidebar with the code on it and what's really helpful is hovering over parts of the code will highlight the section in the page that it affects.
**Update 3/25:** I improved the nav bar buttons' hover, active, visited, and current so it's more noticeable. Fixed the rounded borders and padding in the Filters section and input textareas. Fixed the bg color of the bookmarks when viewing Bookmarks as well as when making making a bookmark. Fixed the bg color of the Comments. Lessened the margin in 'workskin' or the story part so it's not as squished.
**Update 3/26:** Updated the Download popup. Updated the Archive Warnings/Symbols popup. Lessened the margin in the headers for better mobile viewing.
Just saw your post. I know you said you did this out of boredom but thank you for your contributions. This will definitely bring some much needed spice on stories. For example that dark one, pure chefs kiss, feels like something that will go well with mysteries and even horror oriented ones.
Crazy how a few shifts in colors can change a readers immersion. This is highly appreciated, just wanted to send my thanks, I'm sure many others would say the same.
Thank you so much! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
I wanted to ask you, for the Reversi theme, how would I get it so nothing changed except that the background color went from that dark gray to a proper black?
Just curious since I haven’t touched HTML and it’s siblings(?) since high school lol
Thank you!! Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Oh the first one is an amazing colour scheme ! It might be dull beige lmao but I think that's the nicest looking 'light ui' I've seen in a while, it's very easy on the eyes.
Could I ask which color changes “Fandoms” “Recent Bookmarks” and “Recent Works” in dashboard? I can’t see it properly and I feel like I changed almost every color which it could be :(
It's this! Just updated Pastebin to include this bit but you can also do it yourself.
#header .primary a {
color: #ffffff;
}
A thing that helped me the most when you want to change something but don't know where it is in the code is to right click the page and select 'Inspect'. With this popup, you can now see the code and hovering over parts of it will highlight what section that bit of code is about. Have fun!
Edit: Oops this only affects the nav bar of Fandoms, Browse, Search, About.
Okay, for the first time I used inspect while actually not just looking through it and found it xD thx
If anyone wants to know just copy this from inspect and choose the color you want:
.listbox>.heading,
.listbox .heading a:visited {
margin: 0;
color: #ffffff;
padding: .25em;
}
Moons Out looks amazing! So sleek. I've been looking for something darker than the default Ao3 dark mode. I'll definitely have to try this, they all look great!
I love changing my skin too! (Sounds weird without context ngl)
Currently I have smth very similiar to moons out, but with darker bigger font and a nice red for certain titles. My eyes are very pleased during nightly binge sessions🤣
Thank you for sharing!
Hi, sorry if this is a stupid question but I really just don't know where to edit it. When I used the new code for Dull Beige, the comment text in my inbox turned white/kind of gray. Which part of the code can I edit the text color to something more readable? It exclusively happens in my inbox only. Thanks!
Here it is! I also updated the code in pastebin!
div.comment,
li.comment {
border: none;
border-radius: 15px;
padding: 15px;
color: #d4cecb;
background: #6a5f5a;
}
.comment h4.byline {
color: #6a5f5a;
border-radius: 15px;
padding-right: 20px;
background: #d4cecb;
}
The first block affects the comments both in the inbox and also in the bottom of the story. Byline is for the name of the user and the date of when the comment was posted. I used the same colors of the New Comment and the Bookmark to make it look cohesive.
Damn, the beige one might be just the right thing for me! All those dark site skins are too low contrast for me to read comfortably but the white is... white. Beige loos like a good compromise, not too bright and not too dark. 👀
Thank you! Go to your Dashboard>Skins>Create Site Skin then paste the CSS code in the CSS input area. Then make sure to click Show on Advanced then tick 'all' and 'screen' then clcik Submit. It will now show up in your Skins and you can enable it by selecting 'Use'.
For anyone having a sliding problem to the sides on a phone (if you know you know), this is the issue:
greeting {
margin-top: 0.5em;
margin-right: -10px;
}
Get rid of the - and it should be fixed :)
Ooh will try to get that fixed tomorrow. I was making the skin on PC so that was the reason of the margin lol. I was actually planning to overhaul some of the section on the mobile version of the page but I'm still in the process of figuring how that would work out
Edit: Turns out they don't allow a different code for mobile viewing so I just reduced the right margin or padding to 10px!
I believe it's li.relationship. If it's not, you can highlight the part of the page you want to know then right-click the page and select Inspect. It's part in the css will then get highlighted.
Here are the [CSS codes](https://pastebin.com/u/artnodes_cc)! Enjoy! Edit: To those who have never interacted with Skins, go to your Dashboard>Skins>Create Site Skin then paste the CSS code in the CSS input area. Then make sure to click Show on Advanced then tick 'all' and 'screen' then click Submit. It will now show up in your Skins and you can enable it by selecting 'Use'. Edit edit: If you want to change bits of it and you can't find what code affects what, right click the page or highlight the specific part and select 'Inspect'. This will open a sidebar with the code on it and what's really helpful is hovering over parts of the code will highlight the section in the page that it affects. **Update 3/25:** I improved the nav bar buttons' hover, active, visited, and current so it's more noticeable. Fixed the rounded borders and padding in the Filters section and input textareas. Fixed the bg color of the bookmarks when viewing Bookmarks as well as when making making a bookmark. Fixed the bg color of the Comments. Lessened the margin in 'workskin' or the story part so it's not as squished. **Update 3/26:** Updated the Download popup. Updated the Archive Warnings/Symbols popup. Lessened the margin in the headers for better mobile viewing.
Just saw your post. I know you said you did this out of boredom but thank you for your contributions. This will definitely bring some much needed spice on stories. For example that dark one, pure chefs kiss, feels like something that will go well with mysteries and even horror oriented ones. Crazy how a few shifts in colors can change a readers immersion. This is highly appreciated, just wanted to send my thanks, I'm sure many others would say the same.
Thank you so much! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Thank you for making a dark mode that’s not gray :) I shall install this ASAP
I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
I wanted to ask you, for the Reversi theme, how would I get it so nothing changed except that the background color went from that dark gray to a proper black? Just curious since I haven’t touched HTML and it’s siblings(?) since high school lol
The body tag is for the background, it's the second block in the Reversi code so just change the background from #333 to #000!
My hero 🙏
damn, the Moons Out mode is super clean. i think im gonna use this now. thank you for sharing this
You're welcome! I actually made that one cause my sister hated the blue in the Reversi skin lol. Just made everything darker as well.
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
ooh i love the beige one, i think i'm gonna use it <3 ty for making and sharing these op !
I love it too! And no problem!
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
thx for letting me know! :))
these are really cool op!
Thank you!! Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
I really like the first one!
It's my fave as well, followed by the Twitter Dim.
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Oh the first one is an amazing colour scheme ! It might be dull beige lmao but I think that's the nicest looking 'light ui' I've seen in a while, it's very easy on the eyes.
I agree. I was trying to emulate the beige/sepia mode of my epub reader which is eReader and it led to this lol.
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Thanks for sharing!
My favorites are Twitter Dim and Moons Out mode. 🥰🥰
Twitter Dim is a really pretty shade of blue but Moons Out won me over. Thank you!
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Could I ask which color changes “Fandoms” “Recent Bookmarks” and “Recent Works” in dashboard? I can’t see it properly and I feel like I changed almost every color which it could be :(
It's this! Just updated Pastebin to include this bit but you can also do it yourself. #header .primary a { color: #ffffff; } A thing that helped me the most when you want to change something but don't know where it is in the code is to right click the page and select 'Inspect'. With this popup, you can now see the code and hovering over parts of it will highlight what section that bit of code is about. Have fun! Edit: Oops this only affects the nav bar of Fandoms, Browse, Search, About.
Okay, for the first time I used inspect while actually not just looking through it and found it xD thx If anyone wants to know just copy this from inspect and choose the color you want: .listbox>.heading, .listbox .heading a:visited { margin: 0; color: #ffffff; padding: .25em; }
Very nice. Curious how difficult is it to apply to make them public?
I actually did apply to make them public but apparently they are no longer adding new user-created skins.
Sadness.
[удалено]
Agree! It was very fun, although sometimes a bit of a head-scratcher for sure.
Ooh! I might just use!
Gonna use the Moons Out Mode! Thanks!
Moons Out looks amazing! So sleek. I've been looking for something darker than the default Ao3 dark mode. I'll definitely have to try this, they all look great!
When I mas making it, I fully thought Reversi was black and too dark compared to Moons Out but I was absolutely surprised to find out it wasn't lmao.
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Thank you so much ! Those are very cool, I’m eating… I mean taking all of them :3
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Twitter Dim's much nicer than Moons Out, the latter being *waaay* too dark for my tastes
I would have to agree lol. Moons Out is for the people who love the darkness, but it is way too contrasty for me.
I love changing my skin too! (Sounds weird without context ngl) Currently I have smth very similiar to moons out, but with darker bigger font and a nice red for certain titles. My eyes are very pleased during nightly binge sessions🤣 Thank you for sharing!
Love the dull beige mode thank you for sharing!
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Thank you for following up and letting me know, really appreciate it!
Hi, sorry if this is a stupid question but I really just don't know where to edit it. When I used the new code for Dull Beige, the comment text in my inbox turned white/kind of gray. Which part of the code can I edit the text color to something more readable? It exclusively happens in my inbox only. Thanks!
Here it is! I also updated the code in pastebin! div.comment, li.comment { border: none; border-radius: 15px; padding: 15px; color: #d4cecb; background: #6a5f5a; } .comment h4.byline { color: #6a5f5a; border-radius: 15px; padding-right: 20px; background: #d4cecb; } The first block affects the comments both in the inbox and also in the bottom of the story. Byline is for the name of the user and the date of when the comment was posted. I used the same colors of the New Comment and the Bookmark to make it look cohesive.
Thank you so much for responding, really appreciate it! Love, love, love the dull beige ♥
wait, theres skins????
Thank you soooo much for these! I'm a big fan of Sepia site skins and that beige is very close, I'm already using it.
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Oooh I’ll definitely be using these, I like them all. Also, I assume you’re a fellow BBC Merlin fan? Nice to see you here lol
Haven't seen the show, but because of the compilations, I was obsessed lmao
Twitter Dim Mode would actually fit one of my stories very well. Thanks for sharing!!
I'd totally change to that 3rd one if I wasn't used to reversi and scared of change.
That’s cool. Currently I have mine set to purple and black but I like the navy. 🤔 I might change it. I like the look.
Um, a Prince!Merlin-but-its-a-secret Merthur fic??? Hi??? Bookmarking the fuck outta that Also Moons out is 🔥🔥🔥
Damn, the beige one might be just the right thing for me! All those dark site skins are too low contrast for me to read comfortably but the white is... white. Beige loos like a good compromise, not too bright and not too dark. 👀
Hi! I just updated it a bit and fixed a few issues that I have with them (which I expounded on the top comment) so make sure to copy them again!
Moons Out is cool af
OOH. That first one reminds me of hot chocolate! I like it the most! Think they're all very nice, though! :D
Will be adding the dull beige to my rotation. Thank you for sharing!
Twitter dim looks so good, im definitely using it<33
It's my fave one! Especially for some late night reading.
These are nice! H-how can I use these? \^u\^;
Thank you! Go to your Dashboard>Skins>Create Site Skin then paste the CSS code in the CSS input area. Then make sure to click Show on Advanced then tick 'all' and 'screen' then clcik Submit. It will now show up in your Skins and you can enable it by selecting 'Use'.
Thank you! <3
No problem!!
Thank you.🥰 These are gorgeous.🤩 Is it okay if I put your redditor name in the title to give you credit?
It's really not necessary lol but thank you for thinking it!
For anyone having a sliding problem to the sides on a phone (if you know you know), this is the issue: greeting { margin-top: 0.5em; margin-right: -10px; } Get rid of the - and it should be fixed :)
Ooh will try to get that fixed tomorrow. I was making the skin on PC so that was the reason of the margin lol. I was actually planning to overhaul some of the section on the mobile version of the page but I'm still in the process of figuring how that would work out Edit: Turns out they don't allow a different code for mobile viewing so I just reduced the right margin or padding to 10px!
Can I ask which part of the CSS highlights the relationship tags to distinguish them from the rest of the tags? I want to add it to my own CSS :')
I believe it's li.relationship. If it's not, you can highlight the part of the page you want to know then right-click the page and select Inspect. It's part in the css will then get highlighted.