Codemirror theme In Tiddlywiki

[Mohammad]

Has anybody tried https://github.com/BurningTreeC/LightTableTheme for Tiddlywiki + CodeMirror?

My question is can we push codemirror editor to have a dark textarea like above?

-Mohammad

[BurningTreeC]

@Mohammad, the codemirror plugin comes with a usage section that describes how to add codemirror themes. There's a link to a theme-library and a step-by-step how-to

Under ControlPanel - Settings - CodeMirror there's a link underneath "theme"

[Mohammad]

Hi BTC,

 I followed the instruction and made a theme, still no dark color in my TW textarea (codemirror editor)!

To add a theme to your wiki, follow these four steps:

• choose one of the CSS files and copy its content to a new tiddler
• remove all comments from the top and tag the tiddler with $:/tags/Stylesheet
• add a field "module-type" with the value "codemirror-theme". add a field "name" with the exact name of the theme as value
• save the tiddler and go to the Settings tab in $:/ControlPanel - look for the "theme" dropdown to select your newly added theme

I used https://github.com/BurningTreeC/LightTableTheme/blob/master/light-table.css from your github repo!

 

Do I need to do anything else?

-Mohammad

[BurningTreeC]

Following these instructions it works

The rest is up to you to figure out where you made a mistake

[Mohammad]

What is the exact name below? I use the tiddler name!

[Mohammad]

I found the answer

 

• add a field "module-type" with the value "codemirror-theme". add a field "name" with the exact name of the theme as value

You need to use he correct name of theme it can be found in css file. See below the first line in cff  file

.cm-s-light-table.CodeMirror 

For this theme the EXACT name is : light-table

So for everybody likes to change the default theme of CodeMirror plugin:

a. follow this instruction:

To add a theme to your wiki, follow these four steps:

• choose one of the CSS files and copy its content to a new tiddler
• remove all comments from the top and tag the tiddler with $:/tags/Stylesheet

• add a field "module-type" with the value "codemirror-theme". add a field "name" with the exact name of the theme as value

• save the tiddler and go to the Settings tab in $:/ControlPanel - look for the "theme" dropdown to select your newly added theme

To find the EXACT name of theme to be used in `name` field: Look at the content of css (theme) file and the name can be find in the css selector like .cm-s-light-table.CodeMirror

Here the theme name is light-table.

I attached a correct theme to be used by anybody interested.