Create userscript to install ED

[wrex]

It occurred to me that it would be trivial to write a javascript wrapper to add the stylesheet(s) to the DOM in addition to publishing it as a stylus stylesheet.

It could have a UI to optionally install any additional userscript ED stylesheets the user desired.

Finally, it could use [jscolor](jscolor.com] or something similar to make it easy to create a custom override stylesheet.

I'll definitely do this once things settle a bit and the next version is published.

I think more people on WK have tampermonkey installed than stylus (though I could be wrong), but supporting both installation methods would let us cover the widest audience:

• Users comfortable with stylus and custom stylesheets, but not with tampermonkey and userscripts
• Users with tampermonkey installed, but not stylus
• Users comfortable with both, but with only tampermonkey installed
• Users with both tampermonkey and stylus could choose their preferred install method.

[wrex]

Created a v.next label for things that won't make it into the upcoming release.

[Sepitus-exe]

I wouldn't be opposed per se, and see the value of adding another distribution stream, but this would fall well outside of my area of expertise. I don't feel like it would be reasonable for me to take on the responsibility for such a project.

I will however fully encourage you to make this into a related project or a fork, that we could point people to from the WK forums or the readme on this git repository.

[wrex]

Oh, yeah, this was mainly just a reminder to myself and to let you know what I was thinking.

I'd definitely create another repository to develop it.

[wrex]

Also, adding the stylesheet to the DOM is trivial, the rest of the app I have in mind won't be. :smile:

[Sepitus-exe]

Also, adding the stylesheet to the DOM is trivial, the rest of the app I have in mind won't be. 😄

You sometimes scare me in the most delightful way

[wrex]

Heh. I've been known to overdo things.

I've decided against a userscript and in favor of a standalone web app with a much smaller userscript that just reads the values produced from the app and adds it to the DOM.

My working idea is something very similar to this: https://pick-palette.netlify.app/ (I might just fork that to start, but I'd rather write it in SvelteKit).

Thinking three panels in the app:

1. The palette section at the bottom (color picker to mix individual colors, then auto generate shades and tints).

2. The USER property section at the top (allows you to pick colors from either the palette or other USER variables)

3. A tabbed section of sample layouts:

   • One tab with generic overlapping surfaces (all containing text in all three colors + brand icons). Also includes large swatches for R/KV, A/G/M/E/B, Meaning/Reading, and correct/incorrect
   • One tab mocking up a review page (with buttons to control state)
   • One tab mocking up the dashboard.

The app just stores everything in IndexedDB locally on the browser. The userscript just reads from what's in IndexedDB and overrides the --USER- variables. I'll use svelte store pub-sub semantics to keep things synchronized.

In theory this won't be too difficult, but it will be a fair bit of work.

[wrex]

Still a long way from complete, but to give you an idea of where I'm heading: https://wked.rexs.tools

Remaining work (high priority items):

• Instead of just a color picker for each custom property, allow them to be defined as any other custom property or "custom" using the color picker.

• Implement palette section. Idea is to let you add/delete base colors and auto generate swatches of tints and shades of that color by mixing percentages of white/black. You can then use the color-picker's eye-dropper tool on the left to pick from those tints/shades.

• Store the current definitions in local-storage on the user's browser, then write a companion userscript that allows users to add WKElementaryDark rules to the DOM as well as their overrides in local storage.

• Create more sample pages: review/lesson and review-summary/lesson-summary. I'll add toggles for lesson/review, reading/meaning, correct incorrect. I'll also add a buttons and dropdowns to model transitioning to different SRS stages.

I think I can actually finish all this by Wednesday. :smile:

The repository for the code is here: https://github.com/wrex/ed-themer

[wrex]

Hey, it works!

Please take a peak at https://wked.rexs.tools and let me know if you have any suggestions or find anything broke.

It's basically functional (and useful!) at this point, but there is still some remaining work:

• Add lesson/review and sample pages
• Persist data in localStorage
• Write WK userscript to install WKED and the overrides
• Fix some layout issues (it currently requires much too wide a viewport)
• Pop up a modal if the viewport is too small
• A fair bit of refactoring.

[wrex]

Closing this one, dev version is at https://github.com/wrex/ed-themer