feat(codeforces): init by ChakornK · Pull Request #2001 · catppuccin/userstyles

ChakornK · 2025-11-23T09:14:00Z

🎉 Theme for Codeforces 🎉

Codeforces is a website that hosts competitive programming contests.

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

🗒 Checklist 🗒

I have read and followed Catppuccin's submission guidelines.
I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
- I have ensured that the new directory is in lower-kebab-case.
- I have followed the template and kept the preprocessor as LESS.
I have made sure to update the userstyles.yml file with information about the new userstyle.
I have included the following files:
- catppuccin.user.less - all the CSS for the userstyle, based on the template.

WalkQuackBack · 2025-11-30T02:25:09Z

Marking this as pending, since tints and shades are not yet adopted and fading, lightening and darkening colours isn't standardized. Thanks for taking the time to work on this.

ChakornK · 2025-11-30T05:56:09Z

fading, lightening and darkening colours isn't standardized

I have removed the use of lightening and darkening as they are not necessary. However, fading cannot be removed as it is used to theme elements on the website that already have faded colors.

WalkQuackBack · 2025-11-30T16:05:54Z

Due to fading amounts not being standardized, things like the 20% fade on https://github.com/catppuccin/userstyles/pull/2001/files#diff-97f27cb299e39122d175d160679ab75e205eda13a7c341004633efb681432260R61 may be inconsistent with other userstyles. I think we’re holding off on userstyles that do that for now, so we can standardize it first then use it, instead of later down the line going back and migrating everything.

uncenter · 2025-12-22T18:01:11Z

+    * when not(@flavor = latte) {
+      img[src*="codeforces-sponsored-by-ton"] {
+        filter: invert(1) sepia(1) hue-rotate(hue(@accent) - 39deg) saturate(2);
+      }
+
+      img[src*="votedown-"],
+      img[src*="voteup-"] {
+        opacity: 1 !important;
+      }
+
+      img[src*="tablesorter-"] {
+        filter: invert(1);
+      }
+
+      img[src*="icons/user"] {
+        filter: brightness(1.6) contrast(0.8);
+      }
+
+      img.tex-formula {
+        filter: invert(1);
+      }
+    }


We should use our official filters palette instead of customs/inversions: https://userstyles.catppuccin.com/contributing/guides/images-and-svgs/#monochrome-img-elements.

The official filter does not work well when the image is non-transparent. It turns the logo into one single color, as shown below:

The filter that I currently have for reference:

Original logo

What about the rest of the icons besides the logo?

These have been removed

img[src*="votedown-"], img[src*="voteup-"] { opacity: 1 !important; }

img[src*="icons/user"] { filter: brightness(1.6) contrast(0.8); }

Other rules have been removed.

[id^="vote-list-filterDifficulty"] { filter: invert(1) hue-rotate(180deg) brightness(2); mix-blend-mode: exclusion; }

is needed to style the ratings: https://codeforces.com/gyms
The star images are not transparent so it is not possible to style them using built-in filters.

Co-authored-by: uncenter <uncenter@uncenter.dev>

uncenter · 2025-12-28T00:42:53Z

Unthemed footer divider bar:

Online now green text unthemed:

This gray text around the calendar is unthemed:

uncenter · 2025-12-28T00:47:06Z

+    a[name] {
+      color: @blue !important;
+      &:hover {
+        color: @blue !important;


Suggested change

color: @blue !important;

color: @sky !important;

The original styling does not change the link's color on hover. a[name] matches colored titles on a blog page, but the title is not always clickable.
Example: https://codeforces.com/blog/entry/149513

"Good Bye 2025" is a clickable link but its color does not change when hovered.

"Comments (189)" is matched using a[name] but it is not a clickable link. So it would not make sense for there to be visual feedback when hovering over it.

Should I change the styling to always be sky instead of blue?

Can we tell clickable links from non-clickable links? Blue to sky on hover for clickable, and then text for non-clickable? I think its confusing that links and non-links are styled the same way.

I've made a small mistake. a[name] is used to make text blue. But none of the elements are actually clickable links. "Good Bye 2025" is not styled with a[name].

Some occurrences of a[name] have a different background color when hovered like this:

This is similar to the user name links. For the sake of consistency, should I remove the background color for these as well?

Because the original styling shows visual feedback when hovering over the text, I will also make the text change from blue to sky when hovered.

uncenter · 2025-12-28T00:49:25Z

+      }
+    }
+
+    // https://github.com/bajrangCoder/acode-catppuccin


We should think about library-ing this because this port isn't actually official.

Co-authored-by: uncenter <uncenter@uncenter.dev>

imsuck · 2026-01-18T06:34:10Z

Currently the legend box of the rating graph looks like this:

One can probably style it like so:

.legendColorBox > div[style*="#ccc"] {
    border: 2px solid #363a4f !important;
    padding: 0 !important;
}
/* is there a nicer way to do this? */
.legendColorBox div[style*="rgb(237,194,64)"] {
    border: 6px solid #ed8796 !important;
}
.legendLabel {
    color: #cad3f5;
    background-color: #363a4f;
}

I apologize for my abysmal knowledge in CSS. (-‿-")

note: cant be themed, js-based color transition

ChakornK · 2026-01-18T07:04:03Z

Currently the legend box of the rating graph looks like this:

One can probably style it like so:

.legendColorBox > div[style*="#ccc"] {
    border: 2px solid #363a4f !important;
    padding: 0 !important;
}
/* is there a nicer way to do this? */
.legendColorBox div[style*="rgb(237,194,64)"] {
    border: 6px solid #ed8796 !important;
}
.legendLabel {
    color: #cad3f5;
    background-color: #363a4f;
}

I apologize for my abysmal knowledge in CSS. (-‿-")

Thanks, I've made some changes to your code and added it in 956fb32

imsuck · 2026-01-19T13:49:45Z

Comments can be highlighted when you go from notifications to a comment, i.e:
From here

To here

The CSS class responsible for this is

.highlight {
    border: 1px solid #FFC300;
    background-color: #FFF7DB !important;
}

ChakornK · 2026-01-22T04:50:51Z

Comments can be highlighted when you go from notifications to a comment, i.e: From here To here The CSS class responsible for this is
.highlight {
    border: 1px solid #FFC300;
    background-color: #FFF7DB !important;
}

4886580

imsuck · 2026-02-22T03:10:05Z

I have some more suggestions:

When you get a rating surge, this notification will appear:

The element itself has no class, only a style attribute, so you'll have to work with it.

<div style="background-color: #EAF4FF; padding: 1px 3px; font-size: 1.1rem; margin-top: 3px">
  <img alt="" src="//codeforces.com/codeforces.org/s/95569/images/icons/mail-16x16.png" style="">
  <span style="position: relative; bottom: 3px;">
    You have
    <b><a href="/bestRatingChanges/10916917">+313! Wow!</a></b>
  </span>
</div>

This is my CSS from a while for the code display section, which currently looks... undesirable:
- Dedicated submission page
- Code pop-up modal

uncenter · 2026-03-02T03:24:58Z

Is there a (public) page I can see that syntax highlighting on for, or do I need to have submitted code for a problem on my end?

imsuck · 2026-03-02T03:33:23Z

Seems like Codeforces has disabled viewing source code of others if you haven't solved a problem D:

ChakornK · 2026-03-26T18:34:15Z

Rating surge notification is styled now.
~~I will not fix the code pop-up modal (or any code syntax highlighting) for now (see here).~~

ChakornK · 2026-04-30T19:22:05Z

I have some more suggestions:
* Dedicated submission page

* Code pop-up modal

Fixed.

Dedicated submission page	Code pop-up modal

feat(codeforces): init

9008db0

ChakornK requested a review from uncenter as a code owner November 23, 2025 09:14

ChakornK added 6 commits November 23, 2025 01:52

fix: theme live contest information box

ac02b9b

fix: correct color for scores that have been accepted but are pending

1e256c1

fix: add other colors related to live contest submission

6700222

fix: add verdict detail colors

46ac5d4

fix: correct text input box color

ab15629

refactor: follow linting rules

06822e6

WalkQuackBack added the 0.kind: init A new userstyle label Nov 27, 2025

uncenter added the 5.needs: staff-review A review by a staff member is required/needed label Nov 27, 2025

WalkQuackBack added 2.status: pending Pending until internal discussion, planned updates, etc. 4.topic: tints/shades Relating to the tints and shades palette labels Nov 30, 2025

fix: remove use of lighten and darken

6b9c464

uncenter reviewed Dec 22, 2025

View reviewed changes

ChakornK and others added 4 commits December 22, 2025 10:10

chore: fix formatting style in category list

9dbba36

Co-authored-by: uncenter <uncenter@uncenter.dev>

fix: remove use of universal selector

ff23073

fix: remove use of universal selector in table

e7ebee6

fix: remove use of universal selector for flavor

0f1d5de

ChakornK requested a review from uncenter December 22, 2025 18:41

uncenter removed 2.status: pending Pending until internal discussion, planned updates, etc. 4.topic: tints/shades Relating to the tints and shades palette labels Dec 27, 2025

uncenter reviewed Dec 28, 2025

View reviewed changes

ChakornK and others added 4 commits December 27, 2025 16:59

fix: icon color

78b1b4d

Co-authored-by: uncenter <uncenter@uncenter.dev>

fix: remove use of * selector in backLava styling

954641d

feat: style footer divider

7c4d95d

fix: ensure green text with inline style is properly styled

070c05d

ChakornK added 3 commits December 27, 2025 18:14

fix: remove unneeded image styling and use built-in filters

43a6e68

fix: style code and quote blocks

fdb24f1

fix: consistent link styling

a0cfb48

ChakornK added 3 commits January 17, 2026 22:58

chore: format

3f6978c

fix: theme rating graph legend

956fb32

fix: remove "scroll to top" button background

1ca969d

note: cant be themed, js-based color transition

ChakornK requested a review from WalkQuackBack as a code owner January 18, 2026 07:02

fix: theme gray text

d60a259

feat: theme comment highlight

4886580

ChakornK added 4 commits March 26, 2026 10:35

feat: style notification modal

0d7da6f

feat: style rating pop-up notification

492fce2

feat: style alert banner

d97d793

fix: @transparent is not defined

6872adb

ChakornK added 8 commits April 30, 2026 11:17

feat: theme submission test result

0d32594

feat: style test result text

0f055d5

feat: style problem solution status

e066f4a

feat: rating surge notification

7300c8e

feat: submission code block

80b0680

feat: dedicated code submission "copy code" button

f8d26fc

revert: duplicate rating surge notification styling

311b187

feat: style ace editor according to codeforces theme

e6b0cbe

Uh oh!

Conversation

ChakornK commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Theme for Codeforces 🎉

🗒 Checklist 🗒

Uh oh!

WalkQuackBack commented Nov 30, 2025

Uh oh!

ChakornK commented Nov 30, 2025

Uh oh!

WalkQuackBack commented Nov 30, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

uncenter commented Dec 28, 2025

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

imsuck commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChakornK commented Jan 18, 2026

Uh oh!

imsuck commented Jan 19, 2026

Uh oh!

ChakornK commented Jan 22, 2026

Uh oh!

imsuck commented Feb 22, 2026

Uh oh!

uncenter commented Mar 2, 2026

Uh oh!

imsuck commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChakornK commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChakornK commented Apr 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ChakornK commented Nov 23, 2025 •

edited

Loading

imsuck commented Jan 18, 2026 •

edited

Loading

imsuck commented Mar 2, 2026 •

edited

Loading

ChakornK commented Mar 26, 2026 •

edited

Loading