PagesKit: Translucent mode during scrolling
translucent mode is a nice addition, but is it supposed to go back to a white header after scrolling a ways down? i was expecting it to remain for the whole page (and also wasn't expecting it to be tied to the page scrolling).
6 replies
Currently, the translucent mode only applies to the first section with a dark background. If it doesn't return to the white background when scrolling, the text in the navigation bar will be unrecognizable.
We will consider supporting a translucent mode with a white background later.
dark mode toggle for header? 👀 like it is for sections 🤔
i tried to enter "black" for the "background" text field like i have for section backgrounds, but i presume since the color selector/image selector combo isn't applied to that spot - it doesn't change the header color.
[edit] entering a hex code seems to show the color in a square though 👀... and now a color editor is available 🤔 [edit 2] well, i guess the editor was always there 😅, it just doesn't seem to be because the default is white. the mouse changed when hovering over the end of the text box
In general, you can set the first section to dark mode.
You could use any non-white background color if you want to use a translucent header.
i have done this with other pages, the ones for the Calamari Cartel. all of the sections are set to black background with dark mode. ive disabled the translucent mode on the published version for now though.
like you mentioned when scrolling, it will return to solid white at the end of the first section - even if the header of the page background's color is set to black (will edit with image). for this instance, i have header navigation hidden.
For the header itself, there is no dark mode toggle, and changing background color doesnt seem to affect anything.
I keep coming back to a feature request i havent done yet:
Separating text and background colors, ability for font sizes, other creature comforts that are found in other web editors
We cannot simply set the header background to transparent, as this will cause the links/buttons in the header and the text in the sections to overlap, making it difficult to see the links/buttons in the header.
Perhaps we can consider allowing users to directly set the header background color, in your demo set it to black.
that is what is shown yes, though i used the hex code for black. when i tried entering "black" the color square to the right didnt change itself.
edit: when entering "black" after the hex code "#000000" was there, the color square changed to white (or rgba 0,0,0,100). so when i said that it "didnt change itself", it appears more that it defaults to the white 0,0,0,100: