Giter Club home page Giter Club logo

brackets-themes's Introduction

Brackets-Themes

Set CodeMirror and Custom themes in Brackets.

Features

  • Automatic loading of CodeMirror's themes shipped with Brackets.
  • Enjoy a variety of custom themes created by other users like yourself! For custom themes 101 primer, please read below.
  • Import themes from http://studiostyl.es/.
  • Configure font size and font type.
  • Disable scrollbars defined in themes. Good if you just want to use the default scrollbars.
  • Support for LESS files!
  • Auto reload themes upon saving changes made to theme files.
  • Configure custom folders to load themes from. This is good if you want to have a folder to hold your custom themes that you want to persist after Brackets/Themes updates. Read this issue if you want to see why sometimes you need this feature.
  • Doctype specific styling. See below for an example.
  • Auto detection of dark themes so that Brackets can do its dark theme specific styling.

Screenshot

Visual Studio Visual Studio

Monokai Dark Soda Monokai Dark Soda theme

Dracula Dracula

Solarized Obsidian

Delkos Delkos

Obsidian Obsidian

Zamiere Delkos

Doctype styling

Themes will add a doctype to the codemirror instance so that you can easily craft css rules to style different document types.

.CodeMirror[doctype=javascript] .cm-property {
    color: brown !important;
}

.CodeMirror[doctype=less] .cm-property,
.CodeMirror[doctype=css]  .cm-property {
    color: red !important;
}

Custom themes 101 guide

Custom themes are codemirror's themes, so you will need to be familiar with codemirror's theme guidelines. I provide a set of steps to get you started below, but for more details please navigate to http://codemirror.net/doc/manual.html and search for "theme".

Codemirror's themes are css files. Important requirement is that the file name has to match your css class definition. E.g. If your theme file is called "default", then your primary css class name needs to be "default". Codemirror's guidelines require that the actual css class name starts with ".cm-s-", so your fully qualified css class name will be ".cm-s-default".

To get you started, you could use the already existing custom theme "default.css". Let's do the following.

  • Open the custom theme directory. Navigate to your themes manager directory (extensions directory/themes) and you will find custom themes in the "theme" directory. Brackets provides a quick way of accessing your extensions directory... Help > Show Extensions Folder.
  • Copy and paste the file "default.css" and rename it to "my-theme.css".
  • Open "my-theme.css" and replace "default" with "my-theme", which should end up looking like ".cm-s-my-theme". You will also have a second class ".CodeMirror", just leave it there and the net result will look like ".cm-s-my-theme.CodeMirror".
  • In "my-theme.css", change "background-color: #F8F8F8;" to "backgound-color: red;".
  • Relaunch brackets, open a JavaScript file and you should see the document with a red background.

    For details on what can be customized, please navigate to http://codemirror.net/doc/manual.html and search for "Customized Styling". As you will notice, the documentation isn't exhautive but they suggest you use "codemirror.css" as a reference. Give it a try, it is pretty straight forward.

    If you have a cool theme you created and want to share, please send it my way and I will gladly add it to the custom themes.

FAQ

  • Why disabling/enabling the scrollbars don't always take effect?

    • This due to the fact that CodeMirror builds "fake" scrollbars that only get created when the document is loaded. So toggling the scrollbars with the document open might not take effect as expected. To get around this behavior, reopen the document or restart Brackets.
  • How can I use Themes with Edge Code?

    • You can install using this URL https://github.com/MiguelCastillo/Brackets-Themes/archive/v1.0.4.zip

How to

  • Set a theme? Find the Themes menu and make a selection. Themes Menu

Credit

Corey Gwin: Monokai Dark Soda
Kulcsár Kázmér: Zamiere
Diego Alvarez: Aquaman
Felipe K. de Mello: Dracula
Fernando Hurtado: Nando
Jordan Hess: Pixie
John Hamm: Hammsidian
Christopher Kelly (scriptmunkee) for additions to reset.css

Contact me

If you have any issues or want to just drop in a line, you can use my personal email at [email protected]

License

Licensed under MIT

brackets-themes's People

Contributors

bradgearon avatar choltz avatar david5i6 avatar drpandemic avatar felipekm avatar ivogabe avatar johnhamm avatar miguelcastillo avatar safajirafa avatar scriptmunkee avatar simpleshadow avatar vinnytroia avatar websitedeveloper avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

brackets-themes's Issues

Brackets Sprint 32

I've installed this plugin, but selecting the different themes from the menu does nothing.

Problems with Aquaman!

immagine 001 02052014

Hello!

The second red arrow inscriptions are illegible, I suggest you make them green (like "Spazi 4", green arrow).

Gutter between line numbers and code gets removed

Not sure if this is a new issue for Sprint 28, but the reset.css that get's applied reduces the padding between the line numbers and the code to 2px:

.CodeMirror pre {
    padding: 0 2px;
}

Default was 15p and a lot more legible.

TextMarker BG-color region cursor

It looks like all of the custom themes somehow put the cursor behind any TextMarker with a background-color style applied, making the cursor invisible. With the theme "Dracula", I can see the top/bottom edges of the cursor sticking out of the background color (I'm using the cm-error class for that style). The Brackets default theme does not have this issue with TextMarker styling.

How to set the line-height?

There is setting in new version, that's awesome!
But the line height is weird when I change the default font-size in setting.
How do I change the line-height?
Or you can set both of font-size and line-height in font.
Like font:18px/1.5em arial
Thanks.

Themes Do Not change the appearance as expected (Ubuntu)

Hello,
I have been having this issue since Sprint 29 on Ubuntu 12.04. The themes work great on Windows but are distorted on Ubuntu. The colors are dim very dim. Sometimes I cannot tell whether I have highlighted anything. See the screenshot below. Thats the ambiance theme (my favourite) but it doesn't look as it does on Windows.
themeambiance

Increased Themes font is improperly spaced vertically

OS: Mac OSX Mavericks

Brackets Version: sprint 36 experimental build 0.36.0-11506 (release 942505c3a)

Extension Version: 0.6.0

Repro Steps:

  1. Open Brackets and choose default Theme
  2. Set Themes settings font size to 30px.

Expected Results:
expected-spacing

Observed Results:
observed-spacing

Brackets Sprint 38 Themes prohibiting quick edit to close in windows 7

I am having an issue with Themes since the latest update to Brackets 38 and the latest Themes update. When I open quick edit Themes does no allow the quick edit window to close. It works fine on a mac with the latest os (10.9.2 I think...Mavericks) but not my machine with windows 7.

I restarted Brackets without any themes and the quick edit works fine. I then reloaded Themes and tried to use several of the Themes and the quick edit window will still not close when open using the x or escape or the shortcut. The window flickers but does not close.
Thanks. I feel lost without my Theme

Blank screen after entering a value into Inline Color Editor

I verified that this behavior only occurs when the Themes extension is installed.

Repro Steps:

  1. Open the Inline Color Editar
  2. Enter a color value into the text box

Expected behavior:
The value should be accepted and updated appropriately

Observed behavior:
The main editor view goes blank. You can get it back by changing to a different document, but it's very difficult to enter in manual color values with this bug.

Copy a theme?

I tried to copy one theme "Night Sky" to the custom folder and even though I do see the new theme, selecting it does not give the same theme as night sky... what am I doing wrong?

I don't want to start from a blank theme... I like your provided themes mostly, but I always tweak my comments to be more visible.

3024 night theme no longer works

I updated my themes through Brackets today and instantly the 3024-night theme broke. 3024-day also no longer works. Using brackets sprint 37.

Attached is an example of what the broken 3024-night theme looks like now.

Any way I can get the previous version of the themes distro?

Thanks.

themes

Integrate mirror-style

@bradgearon Alright. I had two options. Use it as node module and create a bridge to talk to it in Brackets, or to only use exactly the bits for the conversion.
I went with approach number two. Doing approach 1 is fine, but a bit too abstracted out to debug.

Let me know what you think! The full flow of choosing a file to import and prompting to save the file is working. I can reload Brackets so that Themes menu is rebuilt including the new theme you just imported! I don't think there is a way around having to reload Brackets right now, but I will look into it. Last time I tried, I was not successful.

https://github.com/MiguelCastillo/Brackets-Themes/tree/mirror-style

Update preferences code for Sprint 37

OS: Mac OSX Mavericks

Brackets Version: sprint 37 experimental build 0.37.0-12014 (release abbda8dd2)

Extension Version: 0.7.0

Repro Steps:

  1. Open Brackets with Themes extension installed
  2. Open Developer Tools and look at console.

Observed Results:
Deprecation warning about using getPreferenceStorage().

Expected Results:
No warnings in console.

Themes Menu needs a checkmark

Repro steps:
(1) Select any theme from the themes menu
(2) Open the themes and look at the list of themes

Observed Behavior:
None of the themes in the menu are checked.

Expected Behavior:
The currently selected theme should be checked.

Right click menu doesn't disappear on left click

Repro Steps:

  1. Open any text file in Brackets that has more than a page of code
  2. Select any theme besides the default theme (I use Blackboard).
  3. Uncheck View > Highlight Active Line
  4. Right click anywhere on the text and observe that right click context menu appears
  5. Left click anywhere on the text multiple times
  6. Check View > Highlight Active Line
  7. Right click anywhere on the text and observe that right click context menu appears
  8. Left click anywhere on the text multiple times

Observed behavior:
The right click context menu stays visible even after I left click the text. It eventually disappears but I can often left click 2-5 times before it happens.

After you check Highlight Active Line, the right click context menu never disappears no matter how many times you left click.

Expected behavior:
The right click context menu should always disappear after the first left click, whether the Highlight Active Line is checked or not.

Avoid repackaging built-in codemirror themes

I noticed that you're including the themes that ship with CodeMirror and are already packaged in brackets under src/thirdparty/CodeMirror2/themes. It would be cleaner to be able to load those CSS files from the CodeMirror submodule instead of also including them in your plugin.

Consider separating out functionality into separate extensions

Miguel, I like being able to change Themes but I don't want the new scroll bar.

What can I do?

Some of these features you are putting into Brackets-Themes might work better as separate extensions. Affecting the scroll bar style and changing the way the user navigates lines are all great pieces of functionality, but don't have much to do with changing themes.

Allowing the user to mix and match whatever extensions they want to use provides more flexibility. Make each extension do one small task really well and let the end user figure out which extensions they want and don't want.

Mbo theme bugs

hi
i use Bracket 0.38 on Ubuntu i am interested in Mbo theme
and when i use it i can't see the courser on tags
for example when i am on div tag the courser became hidden (or same color with theme)
thanks

QuickEdit chrome does not seem to be themed

When opening the QuickEdit tool, only the code editor portion within seems to be themed currently. The chrome around the editor remains the same default grey. See screenshot:

image

Observe that the header and right hand file-list are not skinned. I have not delved in yet to check whether this is simply missing from the themes, but these elements do not seem to be themed in any of the currently available themes in this package.

Also evidenced in the screenshot, is it possible to change the current line highlight colour? It can cause large readability problems with dark themes such as Monokai Dark Soda.

Great extension guys, look forward to seeing it develop :)

Feature request: Dynamic list of available themes

I'm sure you have already considered this feature but I wanted to make sure I requested it anyway :).

Instead of loading the Theme menu entries from a static JSON file, it would be great if the themes came from an actual list of the available theme files. That way, you could add or delete CSS files however you like and the Theme menu would dynamically update to list them correctly.

Also, if you make the code check in the CodeMirror theme directory in Brackets (i.e. thirdparty/CodeMirror2/theme/), any new CodeMirror themes would automatically become available in the future. That means you could also remove all of the themes from your repro and not have to worry about maintaining them.

Error in Aquaman!

Hi, I have one problem!

  1. Open Brackets
  2. Open a file JS
  3. Go Live Preview
  4. The theme is cancel (see image)

immagine 005 02052014
)

Selection color in OSX

Because the selection color is always additive light blue it is impossible to see what is being selected in dark themes
Brackets 0.39.0-12914 (release b74889180)
Themes 0.7.9

Wish change color highlighting of the menu

Hi, I would like to highlight that the menu had the same color of the pop-up menu. Only theme "pixel"

Now color hightlight:

now

Wish color hightlight (in only theme pixel):
senza nome

After update theme broken until updated

After today's newest update (release 4df8afd)

I noticed that i couldn't look or interact with the them menu item until after i went and updated my current theme extension Themes by miguel castillo to 0.7.7

Tiny help?

Hi, new to Brackets-Themes; late to the party so to speak. So. This is pretty petty, so laugh as needed...

What css rules would I change to make active lines have no border, or, have the same colour as the active line background??

I've been a poking around and nothing I've seen explains this- I'm not familiar with the conventions of CodeMIrror. Most of the themes do indeed have light grey / white lines around active lines; the only different one being the default theme, which has light blue as the active line background and possibly the active line border. Could you possibly give me a quick heads up on which css rules I should be concentrating on make sure active line borders are invisible or have the same colour as the active line background? Many thanks in advance, Dave

Setting editor font size should set Themes font size

OS: Mac OSX Mavericks

Brackets Version: sprint 36 experimental build 0.36.0-11506 (release 942505c3a)

Extension Version: 0.6.0

Repro Steps:

  1. Launch Brackets and select Increase Font Size a few times.
  2. Close and reopen browser.

Expected Results:
Font size should stay the same.

Observed Results:
Font size changes to match the settings in Themes setting.

should the themes really have fonts in them?

I don't think the font or family is really part of a theme/scheme for an editor. Font is something I would like to set separately from my colors. This is done via your settings dialog, but I notice the themes have fonts in them. Wouldn't it be "safer" just to remove those?

Not able to swtich between opened Folders/Projects

After this extension is installed, I am not able to switch between folders. Nothing happens when I click on the folder selection menu to choose another folder. I verified that this is themes extension by enabling and disabling all other extensions I installed.

In the developer console I see an error

Uncaught TypeError: Object #<Object> has no method 'visit' 

Time Based Theme Swaps

I'd like to be able to change the current theme based on certain times throughout the day (e.g. a light theme during the day, dark theme during night). Would this make a good addition to your extension? I could fork and add the feature on a branch. Or do you think I should make this it's own stand alone extension? I would probably still use much of your code base to manage the themes, unless we could find some way for my extension to rely on yours smoothly.

Number gutter misaligned after opening and closing Quick Edit

Repro Steps:

  1. Open any file that has references to code that you can Quick Edit. Pretty much any Brackets Javascript file will do.
  2. Select the Solarized theme. It has a very predominant number gutter.
  3. Quick Edit any reference in the file, then close the Quick Edit.

Observed Behavior:

All of the line numbers in the gutter, except for the currently selected line, are shifted to the right:

gutter-shift

Expected Behavior:

All of the line numbers in the gutter should remain aligned:

gutter-normal

Active Line highlight is obscuring white words in Blackboard theme

I just upgraded my dev build today so this bug applies to Sprint 22 for the most part.

Open the Blackboard theme and highlight any line that has white words. Single click on a line with white words. The style for the active line highlight in Brackets must have changed recently to white because I can't really read the white words anymore.

Unfortunately, I have to go back to a light screen theme again for now which is bad because I really like using Blackboard theme.

I'm just running this by you first to see if you have any ideas. You can close it if it is more of a Brackets bug.

Difficult to see Find words on dark themes

I'm filing this specifically for the Monokai Dark Soda, since that is the dark theme I often use, but this bug applies to all dark themes except for Pixie, I believe.

Try to find a word that appears more than once in your document, the words that match but are not currently highlighted, are black and look like this:

find-bug-capture

A solution would either change the background to provide contrast (like Pixie does) or change the color of the words.

Deprecated filesystem APIs

This extension uses APIs which are deprecated as of Brackets Sprint 34 (the next release):

  • NativeFileSystem.requestNativeFileSystem()
  • DirectoryEntry.createReader()

These APIs should continue to work for now (though please test your extension to be sure!). However, the deprecated APIs will be removed around the end of this year, so you should migrate away from them soon.

It should be fairly straightforward to migrate to the new APIs. (And if you release an updated extension requiring the new APIs, users of earlier Brackets versions will still be able to install the older release of your extension that is compatible with their build).

See this discussion thread for more background on the API changes.

Theme disappears after second Brackets Launch

Repro Steps:

  1. Launch Brackets and select a theme from Themes menu.
  2. Close Brackets, then launch Brackets again. Observe that your theme is still there.
  3. Close Brackets, then launch Brackets again.

Observed Behavior:
The theme has disappeared.

Expected Behavior:
The theme should still be there.

Adding preferences dialog

  1. Set paths to load themes from. This is to enable an easy way to allow users to point themes to load their themes from.

Theme Auto-Reload

When ending the CSS for a theme file that's currently being used, it would be nice if the extension could detect a change and reload the theme automatically so Brackets does not need to be restarted to see the changes.

Illegible text INS or OVR in many themes

In this themes: Hammisidias, Pixie, Selenitic, Visual Studio 2012, Zanie.

You must to change the color of the words "INS" or "OVR" in the color same
as "Spazi 4" (see picture). Thank you advantage!
For solution #65

cattura

HTML tag highlighting obscures code in some of the themes

OS: Windows 7

Brackets Build: sprint 31 development build 0.31.0-0 (master 2e800ef3a)

Theme: Monokai Dark Soda, among others

Background:
HTML tag highlighting will be available in Sprint 31. You can see it in the Dev Build now. Much like the Highlight Active Line problem, the new color for tag highlights is too light for most of the dark themes.

Repro steps: Open an html file and start clicking on different tags...

theme-html-highlight

Suggested solution:
Unlike Highlight Active Line, there does not appear to be an option to turn this functionality off. Also, I don't suggest turning it off through this extension because it can be very useful functionality for most people.

The best solution might be to customize the tag highlight color for each theme. I don't know how involved this solution would be. I don't even know if you can do it with the Code Mirror default themes or not. But that is my initial suggestion if it is possible.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.