title: Brackets: Custom Theme
body: <p>I am trying to make a custom Brackets Theme. After I created a basic package.json file I went into extension manager to apply the theme so when editing the 'theme.less' file it would apply the fixes right away. Well my theme does not show up and I do have a package.json file and a theme.less file. The package.json code is:</p>
  
  <pre><code>{
      "name": “MyName.DarkPanja”,
      "title": “DarkPanja”,
      "description": “A Dark Theme By Panja“,
      "homepage": "https://github.com/Coler234/DarkPanja”,
      "version": "1.0.0",
      "author": “MyName &lt;myemail@provider.net&gt; (https://github.com/Coler234/DarkPanja)”,
      "license": "MIT",
      "theme": {
          "file": "theme.less",
          "dark": true,
          "addModeClass": true
      },
      "keywords": ["theme"]
  }
  </code></pre>
  
  <p>theme.less:</p>
  
  <pre><code>@background: #1d1f21;
  @foreground: #ddd;
  @hotpink: #CC0066;
  @pinkpurple: #CC00FF;
  @neongreen: #99FF00;
  
  /* Code Styling */
  
  .CodeMirror, .CodeMirror-scroll {
      background-color: @background;
      color: @foreground;
  }
  
  .CodeMirror-focused .CodeMirror-activeline-background {
      background: #2f2f2f;
  }
  
  .show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
      box-shadow: inset 15px 0 0 0 #000;
  }
  
  .CodeMirror-focused .CodeMirror-activeline {
      .CodeMirror-gutter-elt {
          background: rgba(0, 0, 0, 0.2);
          color: #fff;
      }
      .inline-widget .CodeMirror-gutter-elt {
          color: #767676;    
      }
  }
  
  .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: @hotpink;}
  .cm-number, .cm-attribute, .cm-plus {color: @pinkpurple;}
  .cm-def, .cm-property {color: @neongreen;}
  .cm-variable, .cm-variable-2, .cm-variable-3, .cm-operator, .cm-meta, .cm-bracket {color: @foreground;}
  .cm-comment {color: #767676;}
  .cm-error, .cm-minus {color: #dc322f;}
  .cm-header {color: #d85896;}
  .cm-link {color: @pinkpurple; text-decoration: none;}
  .cm-rangeinfo {color: #656de8;}
  .cm-keyword, .cm-qualifier, .cm-builtin, .cm-tag, .cm-quote {color: #656de8;}
  
  /* Extra CSS */
  
  .CodeMirror-searching {
      background-color: #660066;
      &amp;.searching-current-match {
          background-color: #6600CC;
      }
  }
  
  
  .CodeMirror-cursor {
      border-left: 1px solid #c5c8c6 !important;
  }
  
  .CodeMirror-gutters {
      background-color: @background;
      border-right: none;
  }
  
  .CodeMirror-linenumber {
      color: #767676;
  }
  
  .CodeMirror .CodeMirror-selected {
      background: #333f48;
  }
  .CodeMirror-focused .CodeMirror-selected {
      background: #0099FF;
  }
  
  .CodeMirror-matchingbracket, .CodeMirror-matchingtag {
      /* Ensure visibility against gray inline editor background */
      background-color: #2e5c00;
      color: @foreground !important;
  }
  
  .CodeMirror-overwrite .CodeMirror-cursor {
      border-left: none !important;
      border-bottom: 1px solid #fff;
  }
  
  /*
      CodeMirror's use of descendant selectors for certain styling causes problems when editors are
      nested because, for items in the inner editor, the left-hand clause in the selector will now
      match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.
      TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
      or if any other descendant-selector-driven CM styles can differ between inner &amp; outer editors
      (potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
      that uses a descandant selector where the CSS class name to the left of the space is something
      other than a vanilla .CodeMirror)
   */
  .CodeMirror {
      .CodeMirror {
          background: transparent;
      }
  
      .CodeMirror .CodeMirror-gutters {
          background: transparent;
          border-right: none;
      }
  
      .CodeMirror .CodeMirror-activeline-background {
          background: transparent;
      }
  
      .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
          background: transparent;
          color: #767676;
      }
  
      .CodeMirror-focused .CodeMirror-activeline-background {
          background: #2f2f2f;
      }
  
      .CodeMirror-focused .CodeMirror-activeline {
          .CodeMirror-gutter-elt {
              background: rgba(0, 0, 0, 0.2);
              color: #fff;
          }
      }
  }
  
  .CodeMirror-foldgutter-open:after {
      color: #666;
  }
  .CodeMirror-foldgutter-folded:after {
      color: #aaa;
  }
  
  .CodeMirror.over-gutter, .CodeMirror-activeline {
      .CodeMirror-foldgutter-open:after {
          color: #888;
      }
  }
  
  .CodeMirror-foldmarker {
      border-color: #000;
      color: #ccc;
      background-color: #444;
  }
  
  /* Non-editor styling */
  
  .image-view,
  .not-editor {
      background-color: @background;
  }
  
  .view-pane .image-view {
      color: @foreground;
  }
  </code></pre>
  
  <p>Both files are in a folder called 'DarkPanja' and located in Brackets/Extensions/User/DarkPanja. Because that didn't work I zip'ed it up dragged it in the extension manager in Brackets. That didn't work either so I uploaded it as a repository to GitHub and tried downloading it as a link:
  <a href="https://github.com/Coler234/DarkPanja" rel="nofollow">https://github.com/Coler234/DarkPanja</a>.
  The .zip error is: Install/Update aborted due to the following errors:
  Root to it(It is on a flash drive!): Unknown Internal Error.
  The GitHub link says:
  The package.json file is not valid (error was: SyntaxError: Unexpected Token ")</p>