pull down to refresh

0 sats \ 6 replies \ @k00b OP 15 Aug 2023 \ parent \ on: SN release: reward details, image fixes, pwa dark mode enhancements, and more meta
Do you understand CSS? I could direct you to try to help us get this done faster.
We have a set of CSS variables for each theme. It's a matter of creating a third set of those variables and allowing it to be selected.
write
preview
0 sats \ 5 replies \ @Zepasta 15 Aug 2023
deleted by author
reply
5 sats \ 4 replies \ @Zepasta 15 Aug 2023
deleted by author
reply
0 sats \ 3 replies \ @k00b OP 15 Aug 2023
These are our current dark mode theme vars. If it's only the bg you want changed we can attempt something like that, but it might mess with the visibility of other things (I don't know).
We also can't vary the theme of the pwa bezel so you'll be stuck with our current settings there.
My goal would be to create a third theme for folks like you that want a true black.
If you want to do a pr, the variables are in styles/global.scss. You'll want to create a third set of variables. Then we'll need to provide another localStorage variable to select the type of dark mode you want which will be used in pages/_document.js and components/dark-mode.js to set the theme.
{
    --bs-body-bg: #121214;
    --bs-body-color: #f0f0f0;
    --theme-inputBg: #121211;
    --theme-inputDisabledBg: #121211;
    --theme-navLink: hsla(0,0%,100%,.55);
    --theme-navLinkFocus: hsla(0,0%,100%,.75);
    --theme-navLinkActive: hsla(0,0%,100%,.9);
    --theme-borderColor: hsla(0,0%,100%,.5);
    --theme-dropdownItemColor: hsla(0,0%,100%,.7);
    --theme-dropdownItemColorHover: hsla(0,0%,100%,.9);
    --theme-commentBg: hsla(0,0%,100%,.025);
    --theme-clickToContextColor: hsla(0,0%,100%,.1);
    --theme-brandColor: var(--bs-primary);
    --theme-grey: #969696;
    --theme-link: #2e99d1;
    --theme-toolbarActive: hsla(0,0%,100%,.1);
    --theme-toolbarHover: hsla(0,0%,100%,.2);
    --theme-toolbar: #3e3f3f;
    --theme-quoteBar: #9e9fa3;
    --theme-quoteColor: #8d9096;
    --theme-linkHover: #007cbe;
    --theme-linkVisited: #56798e;
}
reply
0 sats \ 2 replies \ @quark 24 Sep 2023
I was searching if we could change links blue color to something else (yellow for example) and found your comment. I think the blue color is not very readable on some situations in dark mode and low brightness. It would be nice if the user could select and customize theme colours, or at least the links color.
reply
0 sats \ 1 reply \ @k00b OP 24 Sep 2023
Hmmm I’ve always want to have user customizable theming. This kind of work is so tedious though.
You’re thinking yellow links in dark mode? I can appreciate they’re pretty low contrast right now
reply
10 sats \ 0 replies \ @quark 24 Sep 2023
yes I was thinking a SN yellow could fit well. I've changed the color in dev inspect to #fada5e like the post yellow button and I think it looks great. Of course, a user customizable option would be the best, even if it is just an advanced text field to enter the color #number, no need to design a color picker.
reply