shawnlawson / The_Force

webGL live coding performance IDE
https://shawnlawson.github.io/The_Force/
MIT License
276 stars 53 forks source link

theming #12

Closed floer32 closed 8 years ago

floer32 commented 8 years ago

Hey, I was just trying to use another theme from Ace. Specifically I was trying to find a theme that might work well w/ this thick text bordering -- source, preview

I'm just trying to go for something I can read against some reaaaally abrasive visuals where I can't even find my mouse sometimes 😛

I tried copying in a JS file and CSS file but maybe Ace changed the way themes are selected, sometime since you inlined the source ... any clue? No worries if not, just figured I'd ask before digging deeper

shawnlawson commented 8 years ago

Ah on line 942 in pageGlobals.js I call editor.setTheme("ace/theme/monokai"); that sets the theme. I'll admit that Ace loads themes in a strange way, the file itself is lib/ace/theme-monokai.js But I've been overriding in my css/style.css file I have a slight drop shadow added to the text in the editor, see line 13 of that style sheet. Yeah finding the mouse is tough. I created a cursor file and load an image that makes the text bar thicker. Usually I select text to find it.

floer32 commented 8 years ago

Interesting, yeah the cursor change doesn't happen for me. I noticed your existing text shadow, I was curious if another ace theme + thicker shadow might work. I tried changing monokai in editor.setTheme("ace/theme/monokai"); to other themes, and it didn't seem to work. I tried adding theme files but it seems like Ace now requires css and js for a theme ..? But also, searching for 'monokai' in the repo I found a few places. Maybe not worth the effort and instead I should just try to get the bigger cursor.

floer32 commented 8 years ago

Because once getting the bigger cursor, I'd be happy to just make my highlight bar darker locally, and that solves all

floer32 commented 8 years ago

Thanks again for your help 😄

shawnlawson commented 8 years ago

hmmm, there are a lot of places in the index.html that use the theme in the help popup window. Did you find line 102 .codeHighlight .ace-monokai in style.css that lets you control the background transparent under the current line? I'm using cursor.png, could replace that image.

This is great! It's really helpful to hear how you use it, because then I know what's working/not working.