Vikunja logo type nearly invisible in dark mode #1

New Issue

adrinux · 2021-11-04T18:17:08Z

adrinux commented

2021-11-04 18:17:08 +00:00

The vikunja logo SVG has hard coded grey type.

Need to decide which workaround to use. Two possibilites (there are more):

embed svg in html and alter colour with css
add a specific logo-dark.svg with light text and swap on mode change

The vikunja logo SVG has hard coded grey type. Need to decide which workaround to use. Two possibilites (there are more): - embed svg in html and alter colour with css - add a specific logo-dark.svg with light text and swap on mode change

adrinux added the

bug

label 2021-11-04 18:20:24 +00:00

dpschen commented

2021-11-04 20:06:45 +00:00

Adding number three: add css to svg itself that applies dark mode colors =)

adrinux commented

2021-11-05 10:40:32 +00:00

I was pondering whether there is an svg filter that would flip the text colour to the inverse of whatever is below it...but I like the idea of fixing it within the svg, feels simplest.

dpschen commented

2021-11-05 12:00:04 +00:00

I think a filter would be to 'uncontrolled' — might have unwanted sideeffects.

After a bit more thought I think the best way is to embed the svg via something like vite-svg-loader. This would be like your first proposal.

The reason being that it allows to style the SVG with CSS from outside.
We can still include the dark theme in the svg but if we want to be able to control it from the outside e.g. similar to @konrad proposed tailwind method the SVG has to be embedded in the html so that we are able to conditionally style it via classes (I think else they have a shadow dom or s.th. like that).

I was looking for a good moment to include this for a while already :D

I think a filter would be to 'uncontrolled' — might have unwanted sideeffects. After a bit more thought I think the best way is to embed the svg via something like [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader). This would be like your first proposal. The reason being that it allows to style the SVG with CSS from outside. We can still include the dark theme in the svg but if we want to be able to control it from the outside e.g. similar to [@konrad proposed tailwind method](https://kolaente.dev/vikunja/frontend/issues/756#issuecomment-16104) the SVG has to be embedded in the html so that we are able to conditionally style it via classes (I think else they have a shadow dom or s.th. like that). I was looking for a good moment to include this for a while already :D

👍 1

konrad commented

2021-11-07 13:35:18 +00:00

We can still include the dark theme in the svg but if we want to be able to control it from the outside e.g. similar to @konrad proposed tailwind method the SVG has to be embedded in the html so that we are able to conditionally style it via classes (I think else they have a shadow dom or s.th. like that).

I think that's a good way to go about this.

> We can still include the dark theme in the svg but if we want to be able to control it from the outside e.g. similar to @konrad proposed tailwind method the SVG has to be embedded in the html so that we are able to conditionally style it via classes (I think else they have a shadow dom or s.th. like that). I think that's a good way to go about this.

🚀 1

dpschen referenced this issue from vikunja/frontend

2021-11-10 19:41:30 +00:00

feat: add vite-svg-loader and add Logo component #971

dpschen commented

2021-11-10 19:43:12 +00:00

I created a pull request that includes the vite-svg-loader.
If that is merged I could help to adjust the colors accordingly =)

I created a pull request that includes the vite-svg-loader. If that is merged I could help to adjust the colors accordingly =)

adrinux commented

2021-11-11 10:32:12 +00:00

I created a pull request that includes the vite-svg-loader.

Good timing. I did some work adding it yesterday but the end was result was a broken logo - was about to ask what I was doing wrong :)

My Vue experience consists of a Udemy course I got 4% though and haven't looked at for at least 2 years. So not entirely suprised by my failure =D

If that is merged I could help to adjust the colors accordingly =)

I can handle the color swap no worries :)

> I created a pull request that includes the vite-svg-loader. Good timing. I did some work adding it yesterday but the end was result was a broken logo - was about to ask what I was doing wrong :) My Vue experience consists of a Udemy course I got 4% though and haven't looked at for at least 2 years. So not entirely suprised by my failure =D > If that is merged I could help to adjust the colors accordingly =) I can handle the color swap no worries :)

adrinux commented

2021-11-13 23:01:10 +00:00

Fixed logo text colour in faa3c3b156 and a957df0a59

And added sane hover and focus styles since the logo link had started inheriting bulma navbar styles f11eeb6dce

Closing.

Fixed logo text colour in https://kolaente.dev/adrinux/frontend/commit/faa3c3b156d0707d9f642888355ff82a9e44a230 and https://kolaente.dev/adrinux/frontend/commit/a957df0a59533ea728bd3f8ca103280752479fc8 And added sane hover and focus styles since the logo link had started inheriting bulma navbar styles https://kolaente.dev/adrinux/frontend/commit/f11eeb6dce8c23c581123f6ecf27866d8fd80e71 Closing.

adrinux closed this issue

2021-11-13 23:01:14 +00:00

Sign in to join this conversation.