making task list look better

[SM-26]

Hey,

first of all, I love you work! looks amazing!

I've been using pymdownx.tasklist, and I needed to add some css to make it look better
here is what i've been using, hope this helps

/*
Tasklist
*/
.task-list-item {
  list-style-type: none !important;
}

.task-list-item input[type="checkbox"] {
  margin: 0 4px 0.25em -20px;
  vertical-align: middle;
}

.task-list-control {
  display: inline; /* Ensure label is inline incase theme sets it to block.*/
}

.task-list-control {
  position: relative;
  display: inline-block;
}

.task-list-control input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1; /* Put the input behind the label so it doesn't overlay text */
}

.task-list-indicator {
  position: absolute;
  top: -18px;
  left: -6px;
  display: block;
  width:  14px;
  height: 14px;
  border-radius: .25rem;
}
.md-typeset .task-list-control .task-list-indicator:before {
    top: 0 em;
    left: -20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.25em;
    content: "\E835";
    vertical-align: -.25em;
}
.task-list-control input[type="checkbox"]:checked + .task-list-indicator::before {
  display: block;
  margin-top: 0px;
  margin-left: 0.5px;
  font-size: 18px;
  line-height: 1;
  content: "✔";
  color: #1EBB52;
}

full repo here:
https://gitlab.com/SM26/swm_wiki

and example here:
https://sm26.gitlab.io/swm_wiki/

label:enhancement

[markusressel]

Looks great 👍
The green color #1EBB52 is hardcoded though, which I would like to avoid since not everyone uses this color and it would be a pain to change this for custom themes. Do you know a way to use a variable of some kind for this that possibly references the original accent color?

[SM-26]

I feel like the answer is something like:
[data-md-color-accent] or $md-color-accent but I can't get it to work
maybe because I'm not using _config.scss?

I'm a total noob at CSS, but I think that @squidfunk Customation page should be the first place to start, and if this doesn't work, maybe go to MkDocs Styling guide?

I think that in the background there is some fallback, because my site use:
https://sm26.gitlab.io/swm_wiki/assets/stylesheets/application.1b62728e.css
and I never made this file.
so maybe if you put the "right" type of file in there, it will fallback to whatever you want?

[markusressel]

When researching a bit about this I saw that @squidfunk is working on an official dark mode integration for v5.X. I don't know to what extent this version will style extensions, but I think it is probably a good idea to wait for the official release and go from there. See this issue.