Add a button to toggle dark mode and polish darkmode in general. #59

Merged

vojta001 merged 0 commits from vojta001/darkmode-toggle-button into master 2020-10-07 14:28:05 +00:00

Conversation 43 Commits - Files Changed -

vojta001 commented 2020-09-30 20:17:55 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Also drop support for setting it through the URL query parameter

Resolves #3

Also fix some contrast issues in dark mode.

Resolved #14

Also drop support for setting it through the URL query parameter Resolves #3 Also fix some contrast issues in dark mode. Resolved #14

sijisu (Migrated from gitlab.com) approved these changes 2020-09-30 20:17:55 +00:00

Greenscreener (Migrated from gitlab.com) approved these changes 2020-09-30 20:17:55 +00:00

vojta001 commented 2020-09-30 20:19:43 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• 10977c2e - Add a button to toggle dark mode

Compare with previous version

added 1 commit <ul><li>10977c2e - Add a button to toggle dark mode</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=115389573&start_sha=572e6c6f1209e4b32d207538eecc9ce6deb6eeb3)

vojta001 commented 2020-09-30 20:21:27 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

This changeset is a bit opinionated — I dropped the query param support and rewrote parts of the code for no real reason (I mean, there was a reason but my intents changed so I ended up writing what was already written). I feel like the code is a bit more readable now, but that is very subjective.

This changeset is a bit opinionated — I dropped the query param support and rewrote parts of the code for no real reason (I mean, there was a reason but my intents changed so I ended up writing what was already written). I feel like the code is a bit more readable now, but that is very subjective.

sijisu commented 2020-10-02 13:00:28 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

I support this change.

However, the button shows up like this now (the little arrow on the left of the language menu):

Is this really intended?

I see some CSS :before and :after, but it doesn't appear to be working.

I would imagine the icon would be something like this: https://materialdesignicons.com/icon/theme-light-dark

I support this change. However, the button shows up like this now (the little arrow on the left of the language menu):  Is this really intended? I see some CSS :before and :after, but it doesn't appear to be working. I would imagine the icon would be something like this: https://materialdesignicons.com/icon/theme-light-dark

vojta001 commented 2020-10-02 21:08:49 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

That's weird. I can see it as

I am however just fine with replacing it with another icon. Cannot we use something from the Font Awesome as we already have in included on the web?

That's weird. I can see it as  I am however just fine with replacing it with another icon. Cannot we use something from the Font Awesome as we already have in included on the web?

Greenscreener commented 2020-10-05 00:03:14 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Weird, I see it like this:

Anyhow, emoji are incredibly unreliable, especially on Linux. I'm working on the Fontawesome version.

Weird, I see it like this:  Anyhow, emoji are incredibly unreliable, especially on Linux. I'm working on the Fontawesome version.

Greenscreener commented 2020-10-05 00:07:53 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• 08bc8493 - Replaced emoji with FontAwesome icon.

Compare with previous version

added 1 commit <ul><li>08bc8493 - Replaced emoji with FontAwesome icon.</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116029681&start_sha=10977c2e55b7482cfafc091197d153a6be2f79e5)

Greenscreener commented 2020-10-05 00:08:31 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Now it should look like this:

Now it should look like this: 

Greenscreener commented 2020-10-05 00:15:06 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

approved this merge request

approved this merge request

vojta001 commented 2020-10-05 20:37:57 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

@sijisu what's your opinion on this icon? For me, a light bulb implies help or docs, but not dark mode. However, if you are OK with, let's just merge it

@sijisu what's your opinion on this icon? For me, a light bulb implies help or docs, but not dark mode. However, if you are OK with, let's just merge it

Greenscreener commented 2020-10-05 21:05:03 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

What do you suggest? Do you think this might look better?

What do you suggest? Do you think this might look better? 

vojta001 commented 2020-10-06 09:31:23 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Yeah, this is IMO what we want

Yeah, this is IMO what we want

sijisu commented 2020-10-06 09:42:13 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

The moon icon looks good to me!

The moon icon looks good to me!

Greenscreener commented 2020-10-06 13:14:50 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• 1eeff69f - Changed icon to moon.

Compare with previous version

added 1 commit <ul><li>1eeff69f - Changed icon to moon.</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116436432&start_sha=08bc849323a5abb995d46b13f68f3f5c5ae43b3a)

Greenscreener commented 2020-10-06 13:19:37 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• a33eaeee - Fixed color of pagination link.

Compare with previous version

added 1 commit <ul><li>a33eaeee - Fixed color of pagination link.</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116437819&start_sha=1eeff69f75351f209384bbd9832d52cb61bb1964)

Greenscreener commented 2020-10-06 13:59:59 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Nice commit hash

Nice commit hash

sijisu commented 2020-10-06 14:16:41 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Cool, I like this...

Cool, I like this...

sijisu commented 2020-10-06 14:16:48 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

approved this merge request

approved this merge request

Greenscreener commented 2020-10-06 14:23:52 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

approved this merge request

approved this merge request

vojta001 commented 2020-10-06 21:03:56 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Sorry, it does not work for me:

Sorry, it does not work for me: 

Greenscreener commented 2020-10-06 21:06:05 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Weird

Weird

vojta001 commented 2020-10-07 08:57:11 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• b3617e4e - Set the moon icon using a CSS class

Compare with previous version

added 1 commit <ul><li>b3617e4e - Set the moon icon using a CSS class</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116626226&start_sha=a33eaeeedbf74e6b82e0a9ce973ecaefe0a6c5e2)

vojta001 commented 2020-10-07 09:00:29 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• f1c790f6 - Improve accessibility of the dark mode button

Compare with previous version

added 1 commit <ul><li>f1c790f6 - Improve accessibility of the dark mode button</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116627425&start_sha=b3617e4ef0d0055cd6e6cd49ffa86a4418d88e2a)

vojta001 commented 2020-10-07 09:04:09 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• 4160dc3a - Replace custom styles on dark mode button with Bulma's `is-arrowless`

Compare with previous version

added 1 commit <ul><li>4160dc3a - Replace custom styles on dark mode button with Bulma&#39;s `is-arrowless`</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116628352&start_sha=f1c790f63e52d2ffc8bf0380c839b69855199868)

vojta001 commented 2020-10-07 09:07:37 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

@Greenscreener I've done some minor tweaks. Can you confirm it works for you as well?

@Greenscreener I've done some minor tweaks. Can you confirm it works for you as well?

Greenscreener commented 2020-10-07 09:25:35 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• 33d2332e - Fixed classes on dark-mode-toggler.

Compare with previous version

added 1 commit <ul><li>33d2332e - Fixed classes on dark-mode-toggler.</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116633980&start_sha=4160dc3a25e8d710fad7c21eb057a8b63cec4149)

Greenscreener commented 2020-10-07 09:26:34 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

What you've done is broken, because you copied over a wrong bit of code. This is how menu items without dropdowns should look.

What you've done is broken, because you copied over a wrong bit of code. This is how menu items without dropdowns should look.

Greenscreener commented 2020-10-07 09:34:46 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• 80ac584b - Resolved #14.

Compare with previous version

added 1 commit <ul><li>80ac584b - Resolved #14.</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116636525&start_sha=33d2332e3eb15ec4b05df621e565d8a85c5d95b7)

vojta001 commented 2020-10-07 10:09:12 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Well, for me, this is not a link. That's why I decided to go with a div with button role. But we may use the <a> if you want

Well, for me, this is not a link. That's why I decided to go with a div with `button` role. But we may use the `<a>` if you want

vojta001 commented 2020-10-07 10:10:21 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

changed the description

changed the description

vojta001 commented 2020-10-07 10:14:52 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

@Greenscreener Since we have broaden the scope of this MR, please, set the $link variable in #content.dark-mode to #558be2 or so, to make it contrast enough. I would do it myself but my SASS skills are rather nonexistent.

@Greenscreener Since we have broaden the scope of this MR, please, set the `$link` variable in `#content.dark-mode` to `#558be2` or so, to make it contrast enough. I would do it myself but my SASS skills are rather nonexistent.

Greenscreener commented 2020-10-07 10:17:57 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

It's not really my decision, it's the way Bulma works...

An example from the docs:

See: https://bulma.io/documentation/components/navbar/

It's not really my decision, it's the way Bulma works... An example from the docs:  See: [https://bulma.io/documentation/components/navbar/](https://bulma.io/documentation/components/navbar/)

vojta001 commented 2020-10-07 10:22:11 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

IMO bad, but let's keep it like that

IMO bad, but let's keep it like that

Greenscreener commented 2020-10-07 10:29:14 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

added 1 commit

• 8518c3ce - Unified darkmode and footer link colour.

Compare with previous version

added 1 commit <ul><li>8518c3ce - Unified darkmode and footer link colour.</li></ul> [Compare with previous version](/patek-devs/patek.cz/-/merge_requests/38/diffs?diff_id=116656769&start_sha=80ac584b16cdfb40a5fa5a8c0d28a23fe2751969)

Greenscreener commented 2020-10-07 10:52:56 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Resolved with 8518c3ce

Resolved with 8518c3ce

Greenscreener commented 2020-10-07 10:53:30 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

changed title from Add a button to toggle dark mode to Add a button to toggle dark mode{+ and polish darkmode in general.+}

changed title from **Add a button to toggle dark mode** to **Add a button to toggle dark mode{+ and polish darkmode in general.+}**

vojta001 commented 2020-10-07 10:59:21 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

I am very happy with the current state.

@Greenscreener @sijisu?

I am very happy with the current state. @Greenscreener @sijisu?

Greenscreener commented 2020-10-07 11:12:12 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

mentioned in merge request !42

mentioned in merge request !42

sijisu commented 2020-10-07 11:57:34 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

Me too! Works miraculously for me. Kudos guys.

Me too! Works miraculously for me. Kudos guys.

sijisu commented 2020-10-07 11:57:52 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

approved this merge request

approved this merge request

Greenscreener commented 2020-10-07 12:35:07 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

approved this merge request

approved this merge request

vojta001 commented 2020-10-07 14:28:05 +00:00 (Migrated from gitlab.com)

Copy Link

Copy Source

mentioned in commit edf81d21bb

mentioned in commit edf81d21bbd54017646c9ed5d2cf1483797b8921

Sign in to join this conversation.

Reviewers

No Reviewers

Greenscreener

sijisu

Labels

Clear labels

bug

easy pick

enhancement

fixneeded

help wanted

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

Broxon Dejwut (David Pacák) genibro (Michail Kornilov) jakub_kutsch (Jakub Kutscherauer) jan (Jan Černohorský) OndreasCZ (Ondřej Novák) sijisu (Šimon Jan Šustek) tomkys144 (Tomáš Kysela) vojta001 (Vojtěch Káně)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: patek/patek.cz#59