Laura Kalbag (105580ba) at 23 Jun 15:29
Fix issue where elements with data-colour-theme applied weren’t get...
... and 13 more commits
Got this all integrated with meta theme-color
too now. The same steps as above still need to be completed.
Laura Kalbag (44bad37e) at 21 Jun 16:07
Start pulling in the data colour theme files as variables
... and 7 more commits
The meta theme-color
element throws some issues up as the colour would need to be accessible to the HTML/template, not just inside the CSS. This may require returning to keeping some element of the theme colours in the (non-CSS) templates themselves.
Maybe this could be a good thing. I could create a simpler means for entering in colours than in CSS files…
It would be good to find a way that is also compatible with using meta theme-color
to colour the Safari tab bar in the next version of macOS/iOS.
And I can use this for testing too.
Not sure they are right now. See https://localhost/theme-colours/ in starter-documentation-demo.
Laura Kalbag (5c1f6091) at 10 May 09:05
Rework colour theming, allowing for better customisation/maintenance
... and 8 more commits
Fantastic, this seems to be working well in the actual theme for small-tech.org.
What the setup is:
partials/head/css.html
concatenates the following CSS assets together into one style.css file served in the <head>
:
assets/css/colours.css
Sets the defaults for all the colours variables.
:root
[data-colour-theme="blue"]
) “use” variables for dark mode and light mode (--background-lightmode
, --background-darkmode
)assets/css/colours-mode.css
Determines the correct colour mode, based on the theme settings ([data-darkmode="auto"]
) and user OS settings for darkmode/lightmode (@media (prefers-color-scheme: dark)
).
Assigns the -darkmode
or -lightmode
variant of the variable to the “primary use” variable (--background
) based on that determination.
What I need to do now:
custom.css
)Checking that the rules work for darkmode-set-in-theme (not dependent on browser) and also for individual elements (not just *
)
:root {
--lightYellow: yellow;
}
[data-colour-theme="grey"] {
--backgroundLight: var(--lightYellow);
--backgroundDark: black;
}
[data-colour-theme="blue"] {
--backgroundLight: lightblue;
--backgroundDark: darkblue;
}
* {
--background: var(--backgroundLight);
}
@media (prefers-color-scheme: dark) {
* {
--background: var(--backgroundDark);
}
}
[data-darkmode="auto"], [data-darkmode="auto"] > * {
--background: var(--backgroundLight);
}
div {
background: var(--background);
}
p {
background: var(--background);
}
This (setting the defaults in :root
) works for having default colours that can be accessed by any of the themes
:root {
--lightYellow: yellow;
}
[data-colour-theme="grey"] {
--backgroundLight: var(--lightYellow);
--backgroundDark: black;
}
[data-colour-theme="blue"] {
--backgroundLight: lightblue;
--backgroundDark: darkblue;
}
* {
--background: var(--backgroundLight);
}
@media (prefers-color-scheme: dark) {
* {
--background: var(--backgroundDark);
}
}
* {
background: var(--background);
}
Bearing this in mind
Oh HELLO, this works
[data-colour-theme="grey"] {
--backgroundLight: pink;
--backgroundDark: black;
}
[data-colour-theme="blue"] {
--backgroundLight: lightblue;
--backgroundDark: darkblue;
}
* {
--background: var(--backgroundLight);
}
@media (prefers-color-scheme: dark) {
* {
--background: var(--backgroundDark);
}
}
* {
background: var(--background);
}
Ok, it doesn’t work. I think it’s something to do with assigning --background:
to var(--backgroundLight)
This does work, but the CSS will be messier/harder to keep separated:
[data-colour-theme="grey"] {
--backgroundLight: pink;
--backgroundDark: black;
}
[data-colour-theme="blue"] {
--backgroundLight: lightblue;
--backgroundDark: darkblue;
}
* {
background: var(--backgroundLight);
}
@media (prefers-color-scheme: dark) {
* {
background: var(--backgroundDark);
}
}
Just did an experiment on CodePen and the following works. I had to abstract it slightly because I don’t have access to putting attributes on the body
or html
elements, but this is what I want, working:
/* define colour themes, pairing light and dark versions of values */
[data-colour-theme="grey"] {
--backgroundLight: pink;
--backgroundDark: black;
}
[data-colour-theme="blue"] {
--backgroundLight: lightblue;
--backgroundDark: darkblue;
}
/* set default (lightmode) to use --backgroundLight as --background */
[data-darkmode="auto"] {
--background: var(--backgroundLight);
}
/* set darkmode to use --backgroundDark as --background */
@media (prefers-color-scheme: dark) {
[data-darkmode="auto"] {
--background: var(--backgroundDark);
}
}
/* set colours in general CSS using generic --background variable */
div, p {
background: var(--background);
}
Configure other styles to fit previous small-tech site layout as closely as possible
Ok, next option to try:
params.toml
(allow for custom theme names in the style of listPost
types)Considering the changes I plan to make going forward (to colour theme generation process):
--mono90
--colour90
variables, replace with --background-lightmode
and --background-darkmode
.--background-lightmode
and --background-darkmode
variables depending on theme colour (these then can be easily changed later when I adapt the colour theme generation process.But how to proceed from here? Is the Small Tech use case getting in the way of the usability of the rest of the theme? Should the Small Tech use case instead add more variables to the theme specific to the aside? <- this might just be the better approach.
I’ve refactored colours.css
and palette.css
into one file (makes no difference to inheritance) because they needn’t be separate files (both are always loaded.)
This was after I contemplated making each colour palette into its own palette-theme-colour-name.css file and loading them into dependent on what’s in the params.toml
but then realising that (for Small Tech site use case) I want to be able to selectively use the other colour themes inside a theme, so that wouldn’t help.
So I’m stuck with the idea that there might be mega long stylesheets (regardless) and the key thing is really making them maintainable and extensible for adding more colour themes/other people wanting to add their own colour themes.
This is my current setup:
/* --background
- - - - - - - - - - - - - - - - - - - - - */
/* light mode */ [data-darkmode="auto"], [data-darkmode="never"] {
--background: var(--colour0); }
/* dark mode */ [data-darkmode="always"] {
--background: var(--mono90); }
@media (prefers-color-scheme: dark) { [data-darkmode="auto"] {
--background: var(--mono90); }}
Formatted for legibility, arranged by variable (which have been cut down to the barest, most semantic variables).