Tweaking the checkboxes in Lyt Mode theme?

[TimmyO]

What I’m trying to do

Get more visible checkboxes for tasks in Lyt Mode theme.

Specifically:

• Easier to read/more contrast to the default checkbox
• Same for incomplete / in progress checkbox (that one is almost invisible imo)
• as a bonus if possible , have the ‘cancelled’ checkbox strikethrough the task description

Things I have tried

I’m not a coder and don’t know CSS but if I can find some suitable snippets I am happy to add them in the snippets folder

I’m not precious about exact colours but if you look at at the screenshot I think you’ll agree that the first 2 checkbox types are quite indistinct compared to the rest.

Thanks in advance for any tips

[TimmyO]

Maybe if I darkened the whole background a bit to provide more contrast that would be a simpler tweak to aid their visibility?

Anyone know how I would do that?

Or maybe it would be simpler / better to start from Minimal theme and apply the Lyt Mode colours to that via the theme settings plugin?

Thanks

[fang44]

first appearence → theme → select the folder icon, now click on your folder theme name “LYT mode” and you’ll “style.css” open it with your favorit text editor (VS code, sublime text, nodepad++, or whatever you want) all what you need is the research tool or press “F3” you will see a small input to make research inside the code. Now it’s time for you to code

1. Easier to read to the default check box, you can make the border lighter for exemple, so press F3 and search for input[type=checkbox] you will see something like this:

input[type=checkbox] {
   ...
}

input[type=checkbox]:hover,
input[type=checkbox]:checked:hover {
    ...
}
input[type=checkbox]:active,
input[type=checkbox]:checked:active {
    ...
}

input[type=checkbox]:checked {
    ...
}

Between all those curly brackets you will see lines border: 1px solid var(--border-900); change all the three of them for border: 1px solid #EDEDED;
Now in the search bar search for input[data-task]:checked and has previously change the line border:... for border: 1px solid #EDEDED; and CTRL+S to save and see the changes. If you doesn’t like the color you can replace #EDEDED by anything you want type “hex color” on google and you can choose one.

2. Make the incomplete more visible, search with F3 input[data-task="/"]:checked you will see a line background: ... change this line for background: linear-gradient(to left, var(--background-primary) 50%, #B2B2B2 50%); now CTRL+S to see the changes. Same as above if you doesn’t like the color change the hex value with the one that you want.

3. Cancelled checkbox strikethrough the task, in the search bar (F3) type is-checked[data-task]:is([data-task=">"] you will see text-decoration: none; change it for text-decoration: line-through;

And here you are hope you’re not confused sorry my english is not perfect. If you have any issues, questions or you want modifications don’t hesistate.

[TimmyO]

Thank you so much - I will dig in to this tomorrow when I’m on my laptop - really appreciate the detailed reply