can we get a nice color for the variable declaration in javascript ?

[enzime4u]

I am in love with this theme , I mainly use it for javascript and react. Can you please add a color ( very fade one) for the variable declaration ? Are you looking forward to upgrade the theme in the future ?

[tobiastimm]

I will have a look, after I'm back from react Amsterdam

[tobiastimm]

@enzime4u could you explain to me more in detail, which kind of variable declaration?

[enzime4u]

well , the let,const,var also the import , export (i think those are 'keywords' or 'types' ) should have a nice color ( I think the best is from the ReactJS theme) or maybe you can come up with something nice..
I just love your theme , it is super nice and productive, just it needs some tweaks !

[enzime4u]

another thing I observe :
I don't have any color for the import, export default etc.... not even white

[tobiastimm]

I will look into that. Maybe some issues with the new scopes of the next theme

[enzime4u]

thanks, looking forward to that !

[tobiastimm]

Is it possible to give me your JS file where the colors are not working correctly? I can't reproduce the issue.

I have also looked into the reactjs theme thing. The reactjs theme looks like Oceanic Next. My current goal with subliminal is to stay as close as possible to Dan's theme only with extended language support. For completely different colors, people should use Oceanic Next directly.

[enzime4u]

import './App.css';

const list = [
  {
    title: 'React',
    url: 'https://reactjs.org/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://redux.js.org/',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
  {
    title: 'Road to Learn React',
    url: 'https://roadtoreact.com/',
    author: 'Robin Wieruch',
    num_comments: 12,
    points: 3,
    objectID: 2,
  }, 
];

const isSearched = searchTerm => item => 
          item.title.toLowerCase().includes(searchTerm.toLowerCase())

class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      list,
      searchTerm: '',
    }
    
    this.onDismiss = this.onDismiss.bind(this)
    this.onSearchChange = this.onSearchChange.bind(this)
  }
  
  onDismiss(id) {
    const isNotId = item => item.objectID !== id
    const updatedList = this.state.list.filter(isNotId)
    
    this.setState({ list: updatedList })
  }
  
  onSearchChange(e) {
    this.setState({ searchTerm: e.target.value })
  }
  
  render() {
    const { searchTerm, list } = this.state
    return (
      <div className="App">
        <Search 
          value={searchTerm}
          onChange={this.onSearchChange}
        >
          Search 
        </Search>
        <Table 
          list={list}
          pattern={searchTerm}
          onDismiss={this.onDismiss}
        />
      </div> 
    )
  }
}

class Search extends Component {
  render() {
    const { value, onChange, children } = this.props
  
    return (
      <form>
        {children}: <input 
          type='text'
          value={value}
          onChange={onChange}
        />
      </form>
    )
  }
}

class Table extends Component {
  render() {
    const { list, pattern, onDismiss } = this.props
    return (
      <div>
        {list.filter(isSearched(pattern)).map(item =>
          <div key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>{item.num_comments}</span>
            <span>{item.points}</span>
            <span>
              <Button 
                onClick={() => onDismiss(item.objectID)}
                type='button'
                >
                  Dismiss
              </Button>
            </span>
          </div>
       )}
      </div>
    )
  }
}

class Button extends Component {
  render() {
    const {
      onClick,
      className='',
      children,
    } = this.props
  
  return (
    <Button 
      onClick={onClick}
      className={className}
      type='Button'
    >
      {children}
    </Button>
  )
 }
}

export default App;

[enzime4u]

https://www.dropbox.com/s/oaigjpjcphijvme/Screenshot%202019-04-17%2020.18.52.png?dl=0