BlueMap

BlueMap

98.2k Downloads

The compass north should always stay red

cbrunnkvist opened this issue · 4 comments

commented

The north pointing end of a compass needle is always painted red, and the south may be any shade of white or black. (Ref.)

I guess the relevant change would be in this block

.compass {
svg {
height: 1.8em;
.north {
fill: var(--theme-fg);
}
.south {
fill: var(--theme-fg-light);
}
}
&:active {
svg {
.north {
fill: var(--theme-bg);
}
.south {
fill: var(--theme-bg-light);
}
}
plus adding a (couple) new classes/constants (I am unfamiliar with how you manage colors in this project and Vue).

I was actually finding this to be a bit of a hassle while I using the map to navigate an area and trying to explain to my kids how to use the compass .. I got lost spectating on the map view instead ;-)

commented

BlueMap's compass needle is grayscale by design-choice, and i personally don't know if i like how it looks like when it is red.
image

But fortunately you can easily paint your own bluemap's needle-north red by adding a custom-css file like this to your bluemap webroot:

.compass svg .north {
    fill: #ff0000;
}

and registering it in your webapp.conf:

# Here you can add URLs to custom styles (css) so they will be loaded by the webapp
# You can place them somewhere in bluemap's webroot and add the (relative) link here
styles: [
    "assets/my-custom-style.css"
]

If you have another suggestion or want to discuss this further, please do so on our discords #suggestions channel, as GitHub issues are for bug-reports or planned features :)

commented

Oh that seems very doable, I'll just do that then. Thanks for the tip! (And my intention was not to suggest "#F00"-red, I should've written "bright red tone", but yeah...)

Either way, thank you again / and for creating an awesome "just works"-plugin!

commented

For completeness sake I would add that the low/no-contrast issue I had, was primarily not on "dark" but in the regular/light mode:
Screenshot 2025-01-09 at 09 25 18