userstyles
userstyles copied to clipboard
feat(roblox): init
A Catppuccin theme designed for the roblox.com website with support for RoPro, RoGold, RoSeal and BTRoblox third party extensions. First time creating a pull request so I hope I'm doing this correctly (along with everything else.)
was thinking of making one tho, is it allowed to put someone's else userstyle of the same website to the roblox repo? its actually pretty good, might actually use it
was thinking of making one tho
You had your chance lol.
is it allowed to put someone's else userstyle of the same website to the roblox repo?
What is "the roblox repo"?
was thinking of making one tho
Wasn't aware of your efforts of creating a Roblox Catppuccin theme when initially starting mine. Just saw that there wasn't any officially listed and decided I'd do it myself. By the time someone mentioned the existence of the one you were curating, I had already finished pretty much all the theming for the website.
Throughout the final stretch of theming I did take a few ideas from your theme and implemented into mines (primarily having more buttons affected by the accent color.) So please don't think your efforts in curating your own version were fruitless. If it weren't for it the theme probably would had featured the accent color a lot less then it did initially (I believe initially I only had it so that the play buttons were affected by the accent color.)
was thinking of making one tho
Wasn't aware of your efforts of creating a Roblox Catppuccin theme when initially starting mine. Just saw that there wasn't any officially listed and decided I'd do it myself. By the time someone mentioned the existence of the one you were curating, I had already finished pretty much all the theming for the website.
Throughout the final stretch of theming I did take a few ideas from your theme and implemented into mines (primarily having more buttons affected by the accent color.) So please don't think your efforts in curating your own version were fruitless. If it weren't for it the theme probably would had featured the accent color a lot less then it did initially (I believe initially I only had it so that the play buttons were affected by the accent color.)
mkay, i didn't like how the theme looked tho but eh, that's just my opinion, I dont like super dark themes anyway also I suggest you could add addon support (btrroblox, ropro, rogold, etc)
was thinking of making one tho
You had your chance lol.
is it allowed to put someone's else userstyle of the same website to the roblox repo?
What is "the roblox repo"?
I misunderstood it, I meant the roblox userstyle repo xd
Search bar appears unthemed based on your preview image.
Search bar appears unthemed based on your preview image.
Oh yes it would appear so. I suppose I grabbed the screenshots for the preview images before I had decided that the input boxes should be themed as well. I will fix this after making changes to the theme (found a few elements that went overlooked as well.)
mkay, i didn't like how the theme looked tho but eh, that's just my opinion, I dont like super dark themes anyway also I suggest you could add addon support (btrroblox, ropro, rogold, etc)
The Roblox Catppuccin theme I created supports RoGold, RoPro, RoSeal, and BTRoblox third party extensions. I'll potential consider adding Roblox+ support as well.
mkay, i didn't like how the theme looked tho but eh, that's just my opinion, I dont like super dark themes anyway also I suggest you could add addon support (btrroblox, ropro, rogold, etc)
The Roblox Catppuccin theme I created supports RoGold, RoPro, RoSeal, and BTRoblox third party extensions. I'll potential consider adding Roblox+ support as well.
oh, havent even done finishing btrroblox support xd
![]()
seems like the text on the home page is not themed,
.dark-theme .content
color needs to be text as well
Changing the colour of the text would be suboptimal. The reason I believe this is because from my testing, changing certain elements of the website, specifically the icons used throughout the website is not easily done. Every time I try replacing the icons it would display nothing instead of the icons in question. Changing the font/text to follow the theme would result in text that follows the theme and icons that do not, so I believe that having none of the two following the theme would be the better choice unless a successful method of switching the icons is found.
Search bar appears unthemed based on your preview image.
FYI this issue from my knowledge has been resolved.
Changing the colour of the text would be suboptimal. The reason I believe this is because from my testing, changing certain elements of the website, specifically the icons used throughout the website is not easily done. Every time I try replacing the icons it would display nothing instead of the icons in question. Changing the font/text to follow the theme would result in text that follows the theme and icons that do not, so I believe that having none of the two following the theme would be the better choice unless a successful method of switching the icons is found.
Whatever is possible to theme should be themed. That means the text should be themed. Can you elaborate on what you tried for theming the icons though? Maybe we can help solve that.
Changing the colour of the text would be suboptimal. The reason I believe this is because from my testing, changing certain elements of the website, specifically the icons used throughout the website is not easily done. Every time I try replacing the icons it would display nothing instead of the icons in question. Changing the font/text to follow the theme would result in text that follows the theme and icons that do not, so I believe that having none of the two following the theme would be the better choice unless a successful method of switching the icons is found.
Whatever is possible to theme should be themed. That means the text should be themed. Can you elaborate on what you tried for theming the icons though? Maybe we can help solve that.
I tried replacing the link that the element grabs from but regardless of the link I put the icons do not appear correctly. For example I would switch url(https://images.rbxcdn.com/53374db5b6c1b349a20d0471ea032868-navigation_dark.svg)
with url(https://raw.githubusercontent.com/ThatOneUnoriginal/Catppuccin-Roblox/main/r5be09c7c686dbba1984fc1a2bacb772c-navigation_light.svg)
but the icons don't appear when I do so.
I didn't choose the best svg as a replacement (its a slightly modified version of the light theme icons) but as you can tell nothing appears. No combination of anything would result in the icons appearing.
Unless there's some edge cases I'm unaware about all text that would need to be changed to have the @text
color has now been added @GenShibe
Unless there's some edge cases I'm unaware about all text that would need to be changed to have the
@text
color has now been added @GenShibe
alright, i'll take a look again
so i took a quick look, and it seems like when you hover over the refresh button for active servers in a game, the entire thing gets higlighted, instead of being underlined
so i took a quick look, and it seems like when you hover over the refresh button for active servers in a game, the entire thing gets higlighted, instead of being underlined
I see... will fix!
Changing the colour of the text would be suboptimal. The reason I believe this is because from my testing, changing certain elements of the website, specifically the icons used throughout the website is not easily done. Every time I try replacing the icons it would display nothing instead of the icons in question. Changing the font/text to follow the theme would result in text that follows the theme and icons that do not, so I believe that having none of the two following the theme would be the better choice unless a successful method of switching the icons is found.
Whatever is possible to theme should be themed. That means the text should be themed. Can you elaborate on what you tried for theming the icons though? Maybe we can help solve that.
I tried replacing the link that the element grabs from but regardless of the link I put the icons do not appear correctly. For example I would switch
url(https://images.rbxcdn.com/53374db5b6c1b349a20d0471ea032868-navigation_dark.svg)
withurl(https://raw.githubusercontent.com/ThatOneUnoriginal/Catppuccin-Roblox/main/r5be09c7c686dbba1984fc1a2bacb772c-navigation_light.svg)
but the icons don't appear when I do so.
![]()
I didn't choose the best svg as a replacement (its a slightly modified version of the light theme icons) but as you can tell nothing appears. No combination of anything would result in the icons appearing.
ok so here's what i believe will work in regards to the svg replacement, you change the amount of padding (which basically changes the position of the svg) so that the icons match up and hopefully display correctly
Changing the colour of the text would be suboptimal. The reason I believe this is because from my testing, changing certain elements of the website, specifically the icons used throughout the website is not easily done. Every time I try replacing the icons it would display nothing instead of the icons in question. Changing the font/text to follow the theme would result in text that follows the theme and icons that do not, so I believe that having none of the two following the theme would be the better choice unless a successful method of switching the icons is found.
Whatever is possible to theme should be themed. That means the text should be themed. Can you elaborate on what you tried for theming the icons though? Maybe we can help solve that.
I tried replacing the link that the element grabs from but regardless of the link I put the icons do not appear correctly. For example I would switch
url(https://images.rbxcdn.com/53374db5b6c1b349a20d0471ea032868-navigation_dark.svg)
withurl(https://raw.githubusercontent.com/ThatOneUnoriginal/Catppuccin-Roblox/main/r5be09c7c686dbba1984fc1a2bacb772c-navigation_light.svg)
but the icons don't appear when I do so.![]()
I didn't choose the best svg as a replacement (its a slightly modified version of the light theme icons) but as you can tell nothing appears. No combination of anything would result in the icons appearing.
ok so here's what i believe will work in regards to the svg replacement, you change the amount of padding (which basically changes the position of the svg) so that the icons match up and hopefully display correctly
Wouldn't something like that already be fulfilled by the background-position
declaration that is found under every icon element (like .icon-nav-home
)? Playing around with the values on that doesn't appear to result in anything.
Changing the colour of the text would be suboptimal. The reason I believe this is because from my testing, changing certain elements of the website, specifically the icons used throughout the website is not easily done. Every time I try replacing the icons it would display nothing instead of the icons in question. Changing the font/text to follow the theme would result in text that follows the theme and icons that do not, so I believe that having none of the two following the theme would be the better choice unless a successful method of switching the icons is found.
Whatever is possible to theme should be themed. That means the text should be themed. Can you elaborate on what you tried for theming the icons though? Maybe we can help solve that.
I tried replacing the link that the element grabs from but regardless of the link I put the icons do not appear correctly. For example I would switch
url(https://images.rbxcdn.com/53374db5b6c1b349a20d0471ea032868-navigation_dark.svg)
withurl(https://raw.githubusercontent.com/ThatOneUnoriginal/Catppuccin-Roblox/main/r5be09c7c686dbba1984fc1a2bacb772c-navigation_light.svg)
but the icons don't appear when I do so.![]()
I didn't choose the best svg as a replacement (its a slightly modified version of the light theme icons) but as you can tell nothing appears. No combination of anything would result in the icons appearing.
ok so here's what i believe will work in regards to the svg replacement, you change the amount of padding (which basically changes the position of the svg) so that the icons match up and hopefully display correctly
Wouldn't something like that already be fulfilled by the
background-position
declaration that is found under every icon element (like.icon-nav-home
)? Playing around with the values on that doesn't appear to result in anything.
I believe the issue is that the SVG you linked to is a different size then the one they had. Both have the same viewBox
and width
and height
but yours has two columns of icons versus their one column?
Changing the colour of the text would be suboptimal. The reason I believe this is because from my testing, changing certain elements of the website, specifically the icons used throughout the website is not easily done. Every time I try replacing the icons it would display nothing instead of the icons in question. Changing the font/text to follow the theme would result in text that follows the theme and icons that do not, so I believe that having none of the two following the theme would be the better choice unless a successful method of switching the icons is found.
Whatever is possible to theme should be themed. That means the text should be themed. Can you elaborate on what you tried for theming the icons though? Maybe we can help solve that.
I tried replacing the link that the element grabs from but regardless of the link I put the icons do not appear correctly. For example I would switch
url(https://images.rbxcdn.com/53374db5b6c1b349a20d0471ea032868-navigation_dark.svg)
withurl(https://raw.githubusercontent.com/ThatOneUnoriginal/Catppuccin-Roblox/main/r5be09c7c686dbba1984fc1a2bacb772c-navigation_light.svg)
but the icons don't appear when I do so.![]()
I didn't choose the best svg as a replacement (its a slightly modified version of the light theme icons) but as you can tell nothing appears. No combination of anything would result in the icons appearing.
ok so here's what i believe will work in regards to the svg replacement, you change the amount of padding (which basically changes the position of the svg) so that the icons match up and hopefully display correctly
Wouldn't something like that already be fulfilled by the
background-position
declaration that is found under every icon element (like.icon-nav-home
)? Playing around with the values on that doesn't appear to result in anything.I believe the issue is that the SVG you linked to is a different size then the one they had. Both have the same
viewBox
andwidth
andheight
but yours has two columns of icons versus their one column?
The two are practically the same except two of the icons were removed (that aren't even used anymore since the "Tickets" feature was removed multiple years ago.) The default icon is located on the left whist the highlighted version of the icon is located on the right. It's better seen on the dark mode version since the highlighted version seems to blend in with the background on the light mode one.
Unless other problems arise in the review stage, I believe that the best step would be to release the theme as-is without any color themed icons and come back to the issue once a viable solution is found to properly implement them without the website acting weird.
Its been around 4 days since I initially made the Pull Request and with the Roblox event "The Hunt" sent to commence I'd rather not have my attention pulled by something that can realistically be looked at and resolved at a later date.
Unless other problems arise in the review stage, I believe that the best step would be to release the theme as-is without any color themed icons and come back to the issue once a viable solution is found to properly implement them without the website acting weird.
I completely agree, i would like to fix the linter error though.
The two are practically the same except two of the icons were removed (that aren't even used anymore since the "Tickets" feature was removed multiple years ago.) The default icon is located on the left whist the highlighted version of the icon is located on the right. It's better seen on the dark mode version since the highlighted version seems to blend in with the background on the light mode one.
Does it work if they are exactly the same instead of "practically" the same? Every little difference counts.
Unless other problems arise in the review stage, I believe that the best step would be to release the theme as-is without any color themed icons and come back to the issue once a viable solution is found to properly implement them without the website acting weird.
Its been around 4 days since I initially made the Pull Request and with the Roblox event "The Hunt" sent to commence I'd rather not have my attention pulled by something that can realistically be looked at and resolved at a later date.
Hmm having the icons and text unthemed doesn't make the theme feel complete for me.
Unless other problems arise in the review stage, I believe that the best step would be to release the theme as-is without any color themed icons and come back to the issue once a viable solution is found to properly implement them without the website acting weird.
Its been around 4 days since I initially made the Pull Request and with the Roblox event "The Hunt" sent to commence I'd rather not have my attention pulled by something that can realistically be looked at and resolved at a later date.
Hmm having the icons and text unthemed doesn't make the theme feel complete for me.
The text is themed but the icons are not.
Could you try again with the icons but without moving/removing anything? Just identical to the original except for the updated colors? See https://github.com/catppuccin/userstyles/blob/main/docs/tips-and-tricks.md#how-do-i-theme-images-and-svgs.
Unless other problems arise in the review stage, I believe that the best step would be to release the theme as-is without any color themed icons and come back to the issue once a viable solution is found to properly implement them without the website acting weird.
I completely agree, i would like to fix the linter error though.
Are you aware of what may be causing the linter error?