More themes

[Ranrar]

Please add more themes to the project, both to embrace the Minimal Distraction‑free Markdown application you have built and the colourful one you already have.

[metaory]

@Ranrar to be clear we are talking about only the editor color scheme on both light and dark mode, and not anything else?

[Ranrar]

@metaory Else reverse the themes, so you get the simple theme when writing and the fancy cool looking when showing the HTML, that would be the easy way.

[metaory]

@Ranrar added some theme presets in v1.1.0

its just the first step,

these only change color tokens, and not styles, like the text shadows are not affected,

next steps for theme could be that, and maybe accepting user provided themes..

im closing this ticket for now,

feel free to comment or reopen 🙏

you can find themes in settings (bottom right icon)

https://metaory.github.io/markon/

[metaory]

@Ranrar I've add few more themes

Could you give them a shot?

Creating new theme is just one file

Just need to edit/add to themes.css in src

That's the only file you should edit

[clach04]

My 2 cents, I like the themes 👍

I'm wondering if there is value in adding support for (easier) theme generation? I get the impression looking at the source code https://github.com/metaory/markon/blob/master/src/themes.css that adding themes is a manual step?

For example, see https://github.com/tinted-theming/schemes (and the related projects/repos) - see https://tinted-theming.github.io/tinted-gallery/ for some previews.

I did wonder about knocking up a quick demo (but I don't have time/energy to work on this, sorry!) This idea maybe better spun out into a new issue/discussion.

[metaory]

Thanks again @clach04
Yes adding theme is just updating that themes.css no other code change required, it dynamically picks its name and tokens

I thought about giving the ability to the user to upload their theme but quickly abandoned the idea

At this point all I can think about is adding more themes myself and improving the old ones

Also contributing to themes is super straightforward, so I am hopeful some hero would come and add new theme!

[metaory]

great news!! added two new themes, and added whole editor and preview scroll sync option, its ctrl+e or click from settings

v1.18.0

@Ranrar @clach04

[clach04]

@metaory I just created https://github.com/clach04/tinted-theming_markon - it's an initial proof of concept, the template needs some work ... it adds almost 300 themes.

It's untested and https://github.com/clach04/tinted-theming_markon/blob/main/themes/base16-gruvbox-dark.css does not perfectly match the existing gruvbox (dark) theme.

I can't figure out how to test this. You mentioned no plans for copy/paste support in the UI which might have been easier from a testing perspective.

I did randomly try using the index.html in the repo in a web browser on the file system but that fails due to CORS issues. I tried a web server but that fails as contents of public directorcy appear need to be in the root directory. Any hints on how to experiment?

https://github.com/clach04/tinted-theming_markon/blob/main/templates/markon.mustache needs some tweaking, I've used base05 in a few places where something more colorful is likely to be more appropriate. If we get this right, you'll have potential for additional catppuccin support.

[metaory]

@clach04 its very straightforward, just need to

• clone the repo
• install dependencies npm install
• run the project npm run dev

then you can open your http://localhost:5173/
and view the project

and finally now you can play around with the themes.css and your changes should instantly reflect there

[clach04]

Thanks for the notes @metaory, that was just what I needed.

I made a few more tweaks. I'm not sure we can consider this done yet. But I think it's good enough for a PR, I opened https://github.com/metaory/markon/pull/10 to add a new theme (that I personally like) and it was essentially auto-generated.

If you have the time/energy to take a look at https://github.com/clach04/tinted-theming_markon it would be good to get your input.

Here is what github looks like (which you can compare with your existing github theme):

html[data-theme="base16-github"][data-mode="dark"] {
	--bg:        #161b22;
	--bg-light:  #30363d;
	--text:      #c9d1d9;
	--brand:     #f85149;
	--accent:    #2a9d9a;
	--primary:   #c9d1d9;
	--secondary: #2ea043;
	--comment:   #8b949e;
	--meta:      #c9d1d9;
	--operator:  #c9d1d9;
	--keyword:   #a371f7;
	--regex:     #2a9d9a;
	--property:  #c9d1d9;
	--string:    #2ea043;
	--literal:   #db6d28;
	--hint:      #bb8009;


	--success:   #2ea043;
	--warning:   #db6d28;
	--info:      #2a9d9a;
	--error:     #f85149;

}


html[data-theme="base16-github"][data-mode="light"] {
	--bg:        #eaeef2;
	--bg-light:  #d0d7de;
	--text:      #424a53;
	--brand:     #fa4549;
	--accent:    #339d9b;
	--primary:   #424a53;
	--secondary: #2da44e;
	--comment:   #6e7781;
	--meta:      #424a53;
	--operator:  #424a53;
	--keyword:   #a475f9;
	--regex:     #339d9b;
	--property:  #424a53;
	--string:    #2da44e;
	--literal:   #e16f24;
	--hint:      #bf8700;


	--success:   #2da44e;
	--warning:   #e16f24;
	--info:      #339d9b;
	--error:     #fa4549;
}