Feature Request: Improve dark mode submission page selection readibility

[Antoni Sobolewski]

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Feature Request: brief description of feature request format, e.g. Feature Request: Add a dark mode to the website
• Would you like to work on this issue?

Description of the Feature Request

Light mode clearly shows you which page of the submissions you are on:

Dark mode doesn't seem to offer a different colour for current page:

So it'd be nice if dark mode got this neat Odin gold for current selection.

Issue persists on both Chrome and Firefox on Windows 11. I tried to troubleshoot this a little but I haven't gotten to the gist of it, seems like there are plenty of rules clashing in dark mode:

While light mode doesn't have this issue (or at least, the conflicts end up resolving in a way that the gold colour comes out on top):

The rule .pagy-nav .page.active, .pagy-nav-js .page.active with its color: #ce973e seems to be the one that should grant the gold colour:

theodinproject/app/assets/stylesheets/stylesheets/pagy.css

Lines 35 to 44 in 20cf494

 .pagy-nav .page.active, 
 .pagy-nav-js .page.active { 
   @apply cursor-default text-gold-500; 
   &:hover { 
     @apply text-gold-500; 
   } 
   &:active { 
     @apply text-gold-500; 
   } 
 } 

I can't find the exact bit that is dealing with pagy partial, sadly. If that is the place to look at, even. I was able to get gold to appear, although it made other text there appear grey:

So disabling:

• :is(.dark .pagy-nav .page a), :is(.dark .pagy-nav .page.active), :is(.dark .pagy-nav .page.next.disabled), :is(.dark .pagy-nav .page.prev.disabled), :is(.dark .pagy-nav-js .page a), :is(.dark .pagy-nav-js .page.active), :is(.dark .pagy-nav-js .page.next.disabled), :is(.dark .pagy-nav-js .page.prev.disabled) rule's color: property and
• :is(.dark .pagy-nav .page a), :is(.dark .pagy-nav .page.active), :is(.dark .pagy-nav .page.next.disabled), :is(.dark .pagy-nav .page.prev.disabled), :is(.dark .pagy-nav-js .page a), :is(.dark .pagy-nav-js .page.active), :is(.dark .pagy-nav-js .page.next.disabled), :is(.dark .pagy-nav-js .page.prev.disabled) rule's color: property seems to get the gold out.

Acceptance criteria

• Dark mode clearly shows which page of submissions user is currently on.

Additional Comments

No response

[Kevin]

Great spot 😎 thanks @scheals!

Edit: Sorry, just seeing you ticked the box for wanting to work on it. I've assigned you, let me know if you want any support mate.