Skip to content

Comments

Refactor CSS colours#281

Closed
sowelipililimute wants to merge 1 commit intoarchlinux:masterfrom
sowelipililimute:cblack/css-refactor
Closed

Refactor CSS colours#281
sowelipililimute wants to merge 1 commit intoarchlinux:masterfrom
sowelipililimute:cblack/css-refactor

Conversation

@sowelipililimute
Copy link

@sowelipililimute sowelipililimute commented Apr 28, 2020

CSS colours are refactored into CSS variables. And because CSS variables make it ludicrously easy to implement prefers-color-scheme support, there's a dark palette too.

Light:
image

Dark:
image

@jelly
Copy link
Member

jelly commented Apr 29, 2020

The dark theme option is nice, but plenty of colors are subtly changed CSS color definitions which makes it a lot of work for me to check the PR.

@sowelipililimute
Copy link
Author

sowelipililimute commented May 11, 2020

ping

@kpcyrd
Copy link
Member

kpcyrd commented Aug 13, 2020

@pontaoski can you update the PR to make the light-color palette identical to the current colors?

For example, in #archnavbarlist li a you replace #999 with var(--on-header-color) which is defined as --on-header-color: #f9ffff, and in #archnavbar you replace #08c with var(--arch-blue) which is defined as --arch-blue: #1793D1;.

Having official dark-mode support would be awesome!

@sowelipililimute
Refactor CSS colours
05c0487 
The colours have been refactored into CSS variables,
which also sport a dark mode variant.

Colours are largely the same as before in light mode,
with the exception of similar-ish colours used for the
same purpose being coalesced into a single variable and thus colour,
e.g. all the various colours in the #bbb-#ccc range
being used for borders becoming part of the --borders
variable.

Signed-off-by: Janet Blackquill <uhhadd@gmail.com>
@sowelipililimute
Copy link
Author

sowelipililimute commented Jun 6, 2021

The dark theme option is nice, but plenty of colors are subtly changed CSS color definitions which makes it a lot of work for me to check the PR.

changed the colour palette to be closer to the current website. all that's really changed now is all the subtly different border colours within #bbb-#ccc being refactored into a single --borders variable/colour.

kpcyrd
kpcyrd reviewed Jul 22, 2021
View reviewed changes
Copy link
Member

@kpcyrd kpcyrd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are still a few subtle changes in the light theme, I didn't go through the whole PR but annotated some of them.

sitestatic/archweb.css
/* style the links */
#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; }
#archnavbarlist li a:hover { color: white !important; text-decoration: underline !important; }
#archnavbarlist li a { color: var(--header-link-color); opacity: 0.7; font-weight: bold !important; text-decoration: none !important; }
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The opacity likely changes the color

sitestatic/archweb.css
#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; }
#archnavbarlist li a:hover { color: white !important; text-decoration: underline !important; }
#archnavbarlist li a { color: var(--header-link-color); opacity: 0.7; font-weight: bold !important; text-decoration: none !important; }
#archnavbarlist li a:hover { color: var(--header-link-color) !important; text-decoration: underline !important; }
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes white -> #999

sitestatic/archweb.css
font: 1.2em monospace;
background: #ffd;
background: var(--mono-view);
color: var(--on-mono-view);
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This color seems new

sitestatic/archweb.css
background: #dfd;
border: 1px solid var(--borders);
background: var(--mono-view);
color: var(--on-mono-view);
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This color is new, same as in code

sitestatic/archweb.css
hr {
border: none;
border-top: 1px solid #888;
border-top: 1px solid var(--borders);
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes #888 -> #bdb

sitestatic/archweb.css
#archdev-navbar li a {
padding: 0 0.5em;
color: #07b;
color: var(--arch-blue);
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes #07b -> #1793D1

sitestatic/archweb.css
padding: 0.5em;
background: #fff;
border: 1px solid #f00;
background: var(--view);
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes #fff -> #ecf2f5

sitestatic/archweb.css
background: #fff;
border: 1px solid #f00;
background: var(--view);
color: var(--on-view);
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rule is new

sitestatic/archweb.css
border: 1px solid #f00;
background: var(--view);
color: var(--on-view);
border: 1px solid var(--arch-red);
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes #f00 -> #E6195D

sitestatic/archweb.css

ul.errorlist {
color: red;
color: var(--arch-red);
Copy link
Member

@kpcyrd kpcyrd Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes red -> #E6195D

@flying-sheep
Copy link

flying-sheep commented Feb 4, 2022

Oh, this would be nice!

@rdrpenguin04
Copy link

rdrpenguin04 commented May 8, 2022

Will these changes be made? They could honestly probably be made by maintainers if @pontaoski doesn't return.

@killertofus
Copy link

killertofus commented Oct 9, 2022

bump

@TheTrueColonel
Copy link

TheTrueColonel commented Jan 16, 2024

This would be great to see, at the very least with a toggle.

@UnixTMDev
Copy link

UnixTMDev commented Feb 15, 2024

okay we need this, i like not getting flashed by arch wiki

@jelly
Copy link
Member

jelly commented Feb 18, 2024

okay we need this, i like not getting flashed by arch wiki

If you need it, this is where to contribute https://gitlab.archlinux.org/archlinux/archlinux-common-style/-/issues/5

@jelly jelly closed this Jan 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@kpcyrd kpcyrd kpcyrd left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

8 participants

@sowelipililimute @jelly @kpcyrd @flying-sheep @rdrpenguin04 @killertofus @TheTrueColonel @UnixTMDev