wwccscorer

The site is live now – http://sssccrrl.co.uk/ although the homepage is implemented slightly differently from the rest of the site to allow for the cover video so you might prefer to look at one of the more normal pages eg http://sssccrrl.co.uk/enter/

The html and js for the toggle is in custom html blocks so you can view it from the page source.

The (S)CSS has some slightly hacky parts to allow for :-

• Dark mode in Events Manager which does not deal well with it (the “Calendar” and “Circuits” pages)
• Striped table with background colours applied which need manual allocation of text colours (eg http://sssccrrl.co.uk/2025-round-7/)
• Sticky header rows and columns, also on the results tables
• The SVG overlay on the header image slider

Unfortunately, the author of the helpful advice I referred to seems to have chosen to remove their reply from this topic so it is not possible to refer back to it but I will place on record (again) my thanks for the help they gave me in taking these tentative steps in dark mode implementation.

• This reply was modified 2 months, 3 weeks ago by wwccscorer.

Thanks to the advice received, I have created theme.json in my child theme containing

	"settings": {
		"color": {
			"palette": [
				{
					"color": "light-dark(#ffffff, #202124)",
					"name": "Base",
					"slug": "base"
				},
etc...

My JS reads and changes the color-scheme in the document root to utilise the values in theme.json –

docroot = document.querySelector(':root');
docroot.style.setProperty("color-scheme", "dark");
OR
docroot.style.setProperty("color-scheme", "light");

and also sets a class on the document body to allow the values in style.css, which I haven’t yet worked out how to add to theme.json, to be used

	document.body.classList.toggle("dark-theme");
AND
	document.body.classList.toggle("light-theme");

This is probably still not the best way to do this but I feel it’s a step in the right direction.

Many thanks for the advice and assistance.

Never mind – I worked it out – functions.php? If this is not the right place, please let me know but it seems to work.

Thank you for your help, and sorry for not spotting the original thread and taking up your time.

I have temporarily enabled frontend editing – I can add event categories using this but it converts my event to classic blocks which is a bit of a nuisance.

I still cannot add them using the back end (gutenberg) editor.

From https://make.wordpress.org/core/2023/07/14/layout-updates-in-the-editor-for-wordpress-6-3/ :-

Previously, the Post Template block had custom layout styles that allowed for either a “list” or a “grid” (implemented behind the scenes with CSS flex) layout, with controls living in its parent Query block.

For 6.3, layout and block spacing support have been added to Post Template, and its controls now live in the Post Template toolbar. There is still a choice of “list” and “grid” styles, but “grid” is now implemented with the grid layout type.

I have now wrapped my query data in a post template block and can choose between list and grid again.

I am sorry to start asking for yet more but would it be possible to add the width parameter to the elevation profile (height is already there) so that I can make profiles which are the same width as the wide maps I can create?

Thanks for your time in looking at this,

Kind Regards,

Simon