Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor CSS colours #281

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refactor CSS colours #281

wants to merge 1 commit into from

Conversation

pontaoski
Copy link

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.

@pontaoski
Copy link
Author

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!

@pontaoski
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>
@pontaoski
Copy link
Author

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
@@ -31,8 +96,8 @@
#archnavbarlist li { display: inline-block !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 14px !important; padding: 14px 15px 0px !important; }

/* 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

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

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
@@ -68,14 +133,16 @@ ul {

code {
font: 1.2em monospace;
background: #ffd;
background: var(--mono-view);
color: var(--on-mono-view);
Copy link
Member

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

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
@@ -116,7 +183,7 @@ input[type=submit] {

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

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
@@ -361,7 +437,7 @@ form.general-form textarea {

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

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
@@ -370,16 +446,17 @@ form.general-form textarea {
text-align: center;
margin: 1em auto;
padding: 0.5em;
background: #fff;
border: 1px solid #f00;
background: var(--view);
Copy link
Member

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

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

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
}

#sys-message p {
margin: 0;
}

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

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

Oh, this would be nice!

@rdrpenguin04
Copy link

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

@killertofus
Copy link

bump

@TheTrueColonel
Copy link

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

@UnixTMDev
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kpcyrd kpcyrd kpcyrd left review comments

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
@pontaoski @jelly @kpcyrd @flying-sheep @rdrpenguin04 @killertofus @TheTrueColonel @UnixTMDev