2.0

index.less

@@ -2,5 +2,10 @@
 // DuoTone syntax theme
 
 @import (reference) "styles/syntax-variables";
+@import "styles/settings";
 @import 'styles/editor';
-@import 'styles/languages/_index';
+@import 'styles/palette';
+
+// This imports the language styles from the duotone-syntax npm package
+// If you test locally, make sure to first run `apm install`
+@import 'node_modules/duotone-syntax/styles/languages/_index';

lib/duotone.coffee

@@ -0,0 +1,87 @@
+chroma = require 'chroma-js'
+
+root = document.documentElement
+uno = ''
+duo = ''
+
+module.exports =
+  activate: (state) ->
+
+    # Change Preset
+    atom.config.observe 'duotone-dark-syntax.preset', (newValue) ->
+      root.classList.remove('theme-duotone-dark-syntax--custom-colors')
+      switch newValue
+        when "Dark Sky"
+          uno = 'hsl(250, 58%, 72%)'
+          duo = 'hsl( 30, 99%, 78%)'
+        when "Dark Sea"
+          uno = 'hsl(212, 48%, 60%)'
+          duo = 'hsl(160, 99%, 70%)'
+        when "Dark Space"
+          uno = 'hsl(240, 66%, 77%)'
+          duo = 'hsl( 20, 99%, 66%)'
+        when "Dark Forest"
+          uno = 'hsl(120, 28%, 70%)'
+          duo = 'hsl( 70, 99%, 76%)'
+        when "Dark Earth"
+          uno = 'hsl(24, 40%, 60%)'
+          duo = 'hsl(42, 99%, 70%)'
+        when "Custom"
+          root.classList.add('theme-duotone-dark-syntax--custom-colors')
+          uno = atom.config.get('duotone-dark-syntax.unoColor').toHexString()
+          duo = atom.config.get('duotone-dark-syntax.duoColor').toHexString()
+      setColors()
+
+    # Change Uno
+    atom.config.onDidChange 'duotone-dark-syntax.unoColor', ({newValue, oldValue}) ->
+      uno = newValue.toHexString()
+      setColors()
+
+    # Change Duo
+    atom.config.onDidChange 'duotone-dark-syntax.duoColor', ({newValue, oldValue}) ->
+      duo = newValue.toHexString()
+      setColors()
+
+  deactivate: ->
+    root.classList.remove('theme-duotone-dark-syntax--custom-colors')
+    unsetColors()
+
+# Apply Colors -----------------------
+setColors = ->
+  unsetColors() # prevents adding endless properties
+
+  # Color limits
+  _high = chroma.mix('hsl(0,0%,100%)', uno, 0.5);
+  _mid  = uno
+  _low  = chroma.mix('hsl(0,0%,25%)', uno, 0.25);
+
+  # Color scales
+  _scaleUno = chroma.scale([ _high, _mid, _low]).colors(5)
+  _scaleDuo = chroma.scale([ duo, _low]).padding([0, 0.33]).colors(3)
+
+  root.style.setProperty('--uno-1', _scaleUno[0])
+  root.style.setProperty('--uno-2', _scaleUno[1])
+  root.style.setProperty('--uno-3', _scaleUno[2])
+  root.style.setProperty('--uno-4', _scaleUno[3])
+  root.style.setProperty('--uno-5', _scaleUno[4])
+
+  root.style.setProperty('--duo-1', _scaleDuo[0])
+  root.style.setProperty('--duo-2', _scaleDuo[1])
+  root.style.setProperty('--duo-3', _scaleDuo[2])
+
+  root.style.setProperty('--accent', duo)
+
+
+# Unset Colors -----------------------
+unsetColors = ->
+  root.style.removeProperty('--uno-1')
+  root.style.removeProperty('--uno-2')
+  root.style.removeProperty('--uno-3')
+  root.style.removeProperty('--uno-4')
+  root.style.removeProperty('--uno-5')
+
+  root.style.removeProperty('--duo-1')
+  root.style.removeProperty('--duo-2')
+  root.style.removeProperty('--duo-3')
+
+  root.style.removeProperty('--accent')

package.json

@@ -12,7 +12,38 @@
   ],
   "repository": "https://github.com/simurai/duotone-dark-syntax",
   "license": "MIT",
+  "main": "lib/duotone",
   "engines": {
-    "atom": ">1.0.0"
+    "atom": ">1.9.0"
+  },
+  "dependencies": {
+    "duotone-syntax": "2.0.0",
+    "chroma-js": "1.1.1"
+  },
+  "configSchema": {
+    "preset": {
+      "title": "Color palette",
+      "description": "Choose one of the presets.",
+      "order": 1,
+      "type": [
+        "string"
+      ],
+      "enum": ["Dark Sky", "Dark Sea", "Dark Space", "Dark Forest", "Dark Earth", "Custom"],
+      "default": "Dark Sky"
+    },
+    "unoColor": {
+      "title": "Uno",
+      "description": "Customize the main color",
+      "order": 2,
+      "type": "color",
+      "default": "#6A6E8B"
+    },
+    "duoColor": {
+      "title": "Duo",
+      "description": "Customize the accent color",
+      "order": 3,
+      "type": "color",
+      "default": "#DA8FFF"
+    }
   }
 }

styles/colors.less

@@ -1,30 +1,12 @@
 
-// DuoTone dark 01
+// DuoTone dark
 
-// Hues -----------------------------------
-@syntax-uno:    250;
-@syntax-duo:    30;
+@syntax-hue:              250;
 
-
-// Language colors -----------------------------------
-
-// Uno hue
-@uno-1: hsl(@syntax-uno, 100%, 96%);
-@uno-2: hsl(@syntax-uno,  98%, 86%);
-@uno-3: hsl(@syntax-uno,  96%, 78%);
-@uno-4: hsl(@syntax-uno,  12%, 46%);
-
-// Duo hue
-@duo-1: hsl(@syntax-duo, 100%, 80%);
-@duo-2: hsl(@syntax-duo,  72%, 62%);
-@duo-3: hsl(@syntax-duo,   6%, 46%);
-
-
-// Base colors -----------------------------------
-@syntax-fg:               @uno-2;
-@syntax-bg:               hsl(@syntax-uno, 14%, 18%);
-@syntax-accent:           hsl(@syntax-duo, 100%, 66%);
+@syntax-fg:               hsl(@syntax-hue, 66%, 80%);
+@syntax-bg:               hsl(@syntax-hue, 12%, 18%);
+@syntax-accent:           hsl(@syntax-hue, 100%, 72%);
 @syntax-guide:            lighten(@syntax-bg, 10%);
 @syntax-selection:        lighten(@syntax-bg, 12%);
 @syntax-selection-gutter: lighten(@syntax-bg, 3%);
-@syntax-cursor-line:      fade(@syntax-selection, 26%); // needs to be semi-transparent to show serach results
+@syntax-cursor-line:      fade(@syntax-selection, 26%); // needs to be semi-transparent to show search results

styles/editor.less

@@ -15,7 +15,7 @@ atom-text-editor,
   }
 
   .cursor {
-    border-color: @syntax-cursor-color;
+    border-color: var(--accent);
     border-left-width: 2px;
   }
 
@@ -24,7 +24,7 @@ atom-text-editor,
   }
 
   .bracket-matcher .region {
-    border-bottom: 1px solid @syntax-accent;
+    border-bottom: 1px solid var(--accent);
   }
 
   .invisible-character {
@@ -86,10 +86,6 @@ atom-text-editor,
       .icon-right {
         color: @syntax-text-color;
       }
-
-      .icon-right {
-        color: @syntax-text-color;
-      }
     }
   }