Frankly, it’s a bit easier to make a design like that work on one static page with very large text and a black background. So a gentle heads up, you’re in for a bit of work.
The header background is set via a color-scheme variable. The name of that variable is $header_background
Color-scheme colors are always opaque since they are RGB hex colors - #ffffff
for example.
What you need is an RGBA color since those have an alpha parameter which you can use to control the opacity of the color.
a semi-translucent RGBA black color looks like this
rgba(0,0,0, .8)
Since Discourse uses scss, you can use something like this to control the opacity of the header background color:
.d-header {
background-color: rgba($header_background, 0.8);
}
which takes the header background - whatever it may be for your current color-scheme - and sets its opacity to 0.8
This creates something like the what you see below
However, that’s not they only thing used on the Apple website, they also use a gradient under the header to give the illusion of page elements fading out as they go under the header.
which you can achieve using something like this: (I grabbed this from Apple’s website and modified it a bit)
.d-header:after {
content: "";
position: absolute;
top: 100%;
height: 100px;
width: 100%;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.79) 8.1%,
rgba(0, 0, 0, 0.761) 15.5%,
rgba(0, 0, 0, 0.717) 22.5%,
rgba(0, 0, 0, 0.66) 29%,
rgba(0, 0, 0, 0.593) 35.3%,
rgba(0, 0, 0, 0.518) 41.2%,
rgba(0, 0, 0, 0.44) 47.1%,
rgba(0, 0, 0, 0.36) 52.9%,
rgba(0, 0, 0, 0.282) 58.8%,
rgba(0, 0, 0, 0.207) 64.7%,
rgba(0, 0, 0, 0.14) 71%,
rgba(0, 0, 0, 0.083) 77.5%,
rgba(0, 0, 0, 0.039) 84.5%,
rgba(0, 0, 0, 0.01) 91.9%,
transparent 100%
);
}
If you add that, you’d need to modify the padding of the #main-outlet
a bit so that items at the top of the page are not covered by the gradient before you scroll.
Something like this should work
#main-outlet {
padding-top: 8em;
}
The example on Apple’s website works really well because it’s black on black and the text is very large like I mentioned earlier. You might have spend a bit of time playing around with the colors to get it to look as nice on your site.
I created a basic black on black demo on theme creator for this which you can see here
It works on both desktop and mobile but if you only want it to be on the mobile view, add the code to the mobile section of your theme / theme component.