9 posts / 0 new
Last post
#1 2021-10-19 16:45

[UserStyle] Iwara AMOLED Black theme. Mobile & Desktop

Full Album of every change I can remember right now on Imgur.
https://imgur.com/a/1rVykMw

It includes stuff like showing off transparent backgrounds for profiles so you can actually see what users have uploaded there.

If you aren't familiar with userstyles you ideally use the open source Stylus extension to use userstyles like this.
https://github.com/openstyles/stylus#readme
Chrome | Firefox

After it's ready you can go to the github page and click on raw on the top right and it should prompt you to automatically to install it.
https://github.com/Kurogal/Iwara-Black-Theme/blob/main/Iwara-Black-Theme...
Or just use this direct link to the raw file on github:
https://github.com/Kurogal/Iwara-Black-Theme/raw/main/Iwara-Black-Theme....

And if the default theme for Stylus itself is too bright you can theme that too.
https://github.com/LunarTwilight/Stylus-Dark/blob/279654a1ed8f162be68533...
Raw:
https://github.com/LunarTwilight/Stylus-Dark/raw/279654a1ed8f162be685337...

On Android, the install works for Firefox Nightly and other Firefox based browsers that let you install any add-ons.
If you haven't done that before and the fork doesn't just come with stylus in the default list:
https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in...
For Kiwi browser and I assume other chromium based browsers with extensions it seems the prompt for the install doesn't work, but the editor does work so you should be able to just import and overwrite it into a blank theme.

---

Hey all! This is a user style I was working on and off on for the past two weeks.

It turns out I started working on this literally the day before testing site for the next site update went up, oops.

And finally realizing that I kind of lost the will to work on this too much longer, but for the time being I'd be open to working on it more if there's something really obvious that's broken.

I know I haven't checked:
Private Messages if you have any at all.
Playlists and content if you have zero.
And there's likely more I missed or haven't thought to check

I have checked but just don't really care to fix right now:
The Support page in the footer, I doubt anybody even ever uses it versus the forums or discord.

There may be stuff that I checked before that I broke at some point, I found out that I broke all the text fields right as I was posting this when I was changing the way dropdown menus worked with the way I had things not organized, and that I was missing the preview post page.

Well that and it thinks headings in forum posts are links which I just found out but I don't quite get what's causing that and I'm too lazy to fix it at this point.

I tried to avoid being influenced by looking at other dark themes (Besides Dark Reader) that already existed like the Userscript and the new site until I was pretty much done, and by that I mean I didn't even realize they existed until it was too late otherwise I probably wouldn't have done this.
But the only influence I ended up taking anyway was the specific idea of shrinking the text on thumbnails and moving them to the corners more from the new site.
I had the idea of giving the icons a permanent background I got from some auto dark themes in some other phone browsers and my first lazy attempt at the theme by using a wildcard to select literally everything at once also changing the background of the icons, but I do credit the new site with giving me more specific vision since I was on the verge of doing it through a text stroke before I found out about it. Just with less rounded corners in my case, I got way too attached to it being blocky.

But yeah I'm pretty tired at this point and it takes less effort to write more and word spaghetti things, so hopefully this is readable, and more then that the style is helpful.

Obligatory embedded image here on the off chance just linking to the album doesn't meet the rules.

2021-10-19 19:52

I'm trying it out now, since I do prefer dark themes. After seeing the usual page for so long it'll take some getting used to, but I imagine it won't take long. Thanks for documenting it so well, I may make some personal adjustments just so a few things stand out a little better for me, but overall it looks nice. Definitely easier on the eyes. Thanks for sharing your hard work!

2021-10-20 17:50

I do not like the letters in green color, can you make one with white letters, or where can I change the code that corresponds to the green text?

2021-10-20 19:20

https://i.imgur.com/SuJs2cC.png
Another thing I've realized, at some point I broke the way the headers works while active.
By default it's three different shades of blue for it being active, hovered, and focused (clicked on).
I matched the colors (but darker) originally, and I fixed it now but I honestly kind of wonder if it was better with it being blue only when hovered and clicked on.
For the time being I pushed out an update to fix it along with some other things like me apparently having jammed all sorts of links I shouldn't have into the CSS for the dropdown menu for profiles.
---
@ 死んでゆく世界
Honestly the fact I decided early to document everything is the saving grace for me with how on and off I worked on this so I can dig through my own spaghetti.
Anyway thanks! Nice to see that people are already getting value out of this. Makes me regret I didn't do this years ago really.
And feel free to tell me about any changes you make, I might honestly be down to just add it directly to the style.
---
@ linuxdx
I personally changed the link colors to green because I felt the readability was awful with links being the same color as normal text.

But you mean like, you want every link to be white? Including the ones that are normally green? So something like this?
https://i.imgur.com/SFF6zRF.png
https://i.imgur.com/B4URHHn.png

Github page link:
https://github.com/Kurogal/Iwara-Black-Theme/blob/main/Iwara-Black-Theme...
Raw direct link:
https://github.com/Kurogal/Iwara-Black-Theme/raw/main/Iwara-Black-Theme-...

That was a super lazy edit with wildcards to try and select every single link possible at once.
Which is why the search magnifying glass also changed color, since it's a link and why I didn't change the search button's color on the mobile site.

So for links that are normally green there might be a few hiding somewhere still, but I just want to be sure first that this is what you wanted first.

2021-10-21 17:15

Yes, as in the images, you can make two versions ... one with green text and the other with white text, and the highlighting of the elements when hovering the mouse that is light gray

2021-10-21 23:36

I mean making another version is exactly what I already did yesterday, that's what those GitHub links in my reply are.
Since Iwara truncates links and it's in the same repo I guess I could see how the confusion happened.
But those are not the same links as the ones in opening post.
Checking the GitHub file history I actually got that part done in 70 minutes flat of your post.

Which maybe I could have used a bit more time to pick a better or shorter name for it then "Iwara.TV Black Theme All White Links".
But I'd break the auto updates and old link there if I changed it. So I'll keep it the same at least for now.

I pushed the update with the grey hover over links like you requested to that one now.
So you can even update it through Stylus itself if you already did.

Just of course make sure to disable or remove the green one if you also have that installed.
Stylus doesn't stop you from running multiple styles for the same site with obvious conflicts together.

2021-10-22 06:52

I really liked the theme, but this is the only bug I have found so far.
I think those parts should just change the text color to black or change the background color ..

2021-10-22 16:24

Oh oops, I broke that "Add to" playlist menu with the 1.2.10 update 2 days ago checking my GitHub history when I had it it done before.

I didn't think to check if pending friends use a different color.
While checking that I found I also just outright missed hover over for already accepted friends too.

And I completely forgot that there's a banner for users that follow you.
So thanks to @NZ141 for being the only one I could find who's following me when I have no content so I could work on this.

Unrelated to that I also:
Fixed pagers in profiles that show up when a users has tons of journal entries which I didn't know was a thing, since the changes to forum and content pagers were effecting it, and also excluded profile comment pagers too while I was there.
And deleted all my playlists to see if anything weird would happen with no content, there wasn't but while doing so I found I never styled the red error message (different from the yellow warning message) I got while trying to delete a playlist that had deleted videos, which was weird that gives an error but I was lucky it did.

---

But anyway, it's all updated and uploaded now.

That should be everything I'm aware of except:
Private messages from other people (I checked sending them to yourself, but just guessing based on the CSS it's different for ones from other users, so I made a wildcard to hopefully make it a readable even if it won't look great. I'd need somebody to send me one before I could properly do that.)
If received friend requests are different from ones I send myself and are pending, but I don't see why it would be.
Some buttons that still probably aren't darkened besides mobile search.
And stuff that isn't the actual main site like the support website.

At least unless I broke something else like I did with that dropdown and private video warnings which is another thing I broke in the older white links version as it turns out.

2021-10-29 03:39

Just thought I'd let everyone know that I made another update to it.
This time only really for the mobile version.
Alongside two little fixes for the white link theme with the header background and drop down menu colors.

Specifically the way that the mobile site handles user video and subscriptions page thumbnails.
Unlike the normal video page on mobile, it's really miserable to go through the others with the full screen sized thumbnails:
Original Mobile User Videos: https://i.imgur.com/9mmyLbZ.jpg
Styled Mobile User Videos: https://i.imgur.com/fG3xClE.jpg

It lacks the padding like on the videos page and has the extra big padding in the middle.
But there's an element there specifically to handle mobile thumbnails that just doesn't exist on these other pages.
So I don't think I can fix it with my current knowledge, at least without effecting the other pages and the desktop site.

I did the same thing with subscriptions too.
Original Mobile Subscriptions: https://i.imgur.com/dl6A4Eh.jpg
Styled Mobile Subscriptions: https://i.imgur.com/K6e5yaR.jpg

It has the issue with staggered videos sometimes, but that happens with the original unedited site too, so I'm not sure I could fix it either.