Merge pull request #9 from kremalicious/feature/accent-color

change primary color based on system accent color

README.md

@@ -38,6 +38,9 @@
 - re-fetches everything automatically every minute
 - balances are fetched via etherscan.io API
 - spot prices are fetched from coingecko.com API
+- detects system locale for number formatting
+- detects dark appearance setting and switches to dark theme automatically (macOS only)
+- detects system accent color and uses it as primary color (macOS & Windows only)
 - currently highly optimized for macOS, your mileage on Windows or Linux may vary
 
 ## Download

package.json

@@ -1,7 +1,7 @@
 {
   "name": "blowfish",
   "productName": "Blowfish",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "🐡 Simple Electron-based desktop app to retrieve and display your total Ocean Token balances.",
   "main": "./src/main.js",
   "scripts": {
@@ -42,7 +42,7 @@
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^5.0.3",
     "css-loader": "^2.1.1",
-    "electron": "^5.0.1",
+    "electron": "^6.0.0-beta.3",
     "electron-builder": "^20.40.2",
     "electron-devtools-installer": "^2.2.4",
     "electron-store": "^3.2.0",

src/app/App.css

@@ -58,9 +58,10 @@ h5 {
     font-weight: 700;
 }
 
-a {
-    color: #f6388a;
+a,
+button {
     text-decoration: none;
+    cursor: default;
 }
 
 a h1 {

src/app/components/Ticker.css

@@ -31,24 +31,6 @@
     border-color: #303030;
 }
 
-.ticker button:not(:disabled):hover {
-    border-color: #f6388a;
-    color: #f6388a;
-}
-
-.ticker button.active,
-.ticker button.active:hover {
-    border-color: #e2e2e2;
-    background: #f6388a;
-    color: #fff;
-}
-
-.dark .ticker button.active,
-.dark .ticker button.active:hover {
-    border-color: #303030;
-    color: #fff !important;
-}
-
 .label--price {
     display: inline-block;
     font-size: .95rem;

src/app/components/Ticker.jsx

@@ -12,7 +12,19 @@ export default class Ticker extends PureComponent {
   static contextType = AppContext
 
   render() {
-    const { toggleCurrencies, needsConfig, currency, prices } = this.context
+    const {
+      toggleCurrencies,
+      needsConfig,
+      currency,
+      prices,
+      accentColor
+    } = this.context
+
+    const activeStyle = {
+      backgroundColor: accentColor,
+      color: '#fff',
+      borderColor: accentColor
+    }
 
     return (
       <footer className="number-unit-wrap ticker" {...this.props}>
@@ -20,11 +32,10 @@ export default class Ticker extends PureComponent {
           {Object.keys(prices).map((key, i) => (
             <Item key={i} className="number-unit">
               <button
-                className={`label label--price ${key === currency &&
-                  !needsConfig &&
-                  'active'}`}
+                className="label label--price"
                 onClick={() => toggleCurrencies(key)}
                 disabled={needsConfig}
+                style={key === currency && !needsConfig ? activeStyle : {}}
               >
                 {formatCurrency(prices[key], key.toUpperCase(), locale)
                   .replace(/BTC/, 'Ƀ')

src/app/components/Touchbar.js

@@ -5,12 +5,12 @@ import { locale } from '../util/moneyFormatter'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import { AppContext } from '../store/createContext'
 
-const TouchbarItems = ({ prices, currency, toggleCurrencies }) => (
+const TouchbarItems = ({ prices, currency, toggleCurrencies, accentColor }) => (
   <>
     <Button
       label={formatCurrency(1, 'OCEAN', locale).replace(/OCEAN/, 'Ọ')}
       onClick={() => toggleCurrencies('ocean')}
-      backgroundColor={currency === 'ocean' ? '#f6388a' : '#141414'}
+      backgroundColor={currency === 'ocean' ? accentColor : '#141414'}
     />
     {Object.keys(prices).map(key => (
       <Button
@@ -20,7 +20,7 @@ const TouchbarItems = ({ prices, currency, toggleCurrencies }) => (
           .replace(/ETH/, 'Ξ')}
         onClick={() => toggleCurrencies(key)}
         backgroundColor={
-          currency !== 'ocean' && currency === key ? '#f6388a' : '#141414'
+          currency !== 'ocean' && currency === key ? accentColor : '#141414'
         }
       />
     ))}
@@ -30,7 +30,8 @@ const TouchbarItems = ({ prices, currency, toggleCurrencies }) => (
 TouchbarItems.propTypes = {
   prices: PropTypes.object.isRequired,
   currency: PropTypes.string.isRequired,
-  toggleCurrencies: PropTypes.func.isRequired
+  toggleCurrencies: PropTypes.func.isRequired,
+  accentColor: PropTypes.string
 }
 
 export default class Touchbar extends PureComponent {
@@ -41,6 +42,7 @@ export default class Touchbar extends PureComponent {
           prices={this.context.prices}
           currency={this.context.currency}
           toggleCurrencies={this.context.toggleCurrencies}
+          accentColor={this.context.accentColor}
         />
       </TouchBar>
     )

src/app/components/Welcome.css

@@ -2,6 +2,7 @@
     width: 100%;
     height: 100%;
     text-align: center;
+    margin-top: 2rem;
 }
 
 .welcome svg {

src/app/components/Welcome.jsx

@@ -2,11 +2,18 @@ import React from 'react'
 import { Link } from '@reach/router'
 import IconRocket from '../images/rocket.svg'
 import './Welcome.css'
+import { AppContext } from '../store/createContext'
 
 const Welcome = () => (
   <div className="welcome">
     <IconRocket />
-    <Link to="preferences">Add your first address to get started.</Link>
+    <AppContext.Consumer>
+      {context => (
+        <Link style={{ color: context.accentColor }} to="preferences">
+          Add your first address to get started.
+        </Link>
+      )}
+    </AppContext.Consumer>
   </div>
 )
 

src/app/screens/Home.css

@@ -20,19 +20,11 @@
     height: 1.25rem;
 }
 
-.preferences-link:hover svg {
-    fill: #41474e;
-}
-
 .dark .preferences-link svg {
     fill: #8b98a9;
     opacity: .5;
 }
 
-.dark .preferences-link:hover svg {
-    opacity: 1;
-}
-
 .number-unit-wrap {
     display: flex;
     width: 100%;
@@ -58,10 +50,6 @@
     transition: color .2s ease-out;
 }
 
-.number-unit:not(.number-unit--main) .label:not(:disabled):hover {
-    color: #f6388a;
-}
-
 .number-unit-wrap--accounts {
     min-height: 55px;
 }

src/app/screens/Preferences.css

@@ -20,10 +20,6 @@
     color: #8b98a9;
 }
 
-.preferences__close:hover {
-    color: #f6388a;
-}
-
 .preference__list {
     padding: 0;
     border-top: 1px solid #e2e2e2;
@@ -58,7 +54,6 @@
     margin: 0;
     padding: 0;
     outline: 0;
-    color: #f6388a;
     font-size: 1rem;
 }
 
@@ -70,10 +65,6 @@ button.delete {
     transition: color .5s ease-out;
 }
 
-button.delete:hover {
-    color: #f6388a;
-}
-
 .preference {
     -webkit-app-region: none;
     -webkit-user-select: text;

src/app/screens/Preferences.jsx

@@ -112,9 +112,11 @@ export default class Preferences extends PureComponent {
                 onChange={this.handleInputChange}
                 className="preference__input"
               />
+
               <button
                 className="preference__input__add"
                 onClick={e => this.handleSave(e)}
+                style={{ color: this.context.accentColor }}
               >
                 Add
               </button>

src/app/store/AppProvider.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import ms from 'ms'
+import { ipcRenderer } from 'electron'
 import Store from 'electron-store'
 import { AppContext } from './createContext'
 import fetchData from '../util/fetch'
@@ -20,10 +21,15 @@ export default class AppProvider extends PureComponent {
     needsConfig: false,
     prices: Object.assign(...prices.map(key => ({ [key]: 0 }))),
     toggleCurrencies: currency => this.setState({ currency }),
-    setBalances: () => this.setBalances()
+    setBalances: () => this.setBalances(),
+    accentColor: ''
   }
 
   async componentDidMount() {
+    ipcRenderer.on('accent-color', (event, accentColor) => {
+      this.setState({ accentColor })
+    })
+
     await this.fetchAndSetPrices()
     await this.setBalances()
 

src/main.js

@@ -3,6 +3,7 @@ const { app, BrowserWindow, systemPreferences } = require('electron')
 const { touchBarWrapper } = require('react-touchbar-electron')
 const pkg = require('../package.json')
 const buildMenu = require('./menu')
+const { rgbaToHex } = require('./utils')
 
 let mainWindow
 
@@ -105,19 +106,22 @@ const createWindow = async () => {
     mainWindow.setSize(width, height, true)
   })
 
-  switchTheme()
-
-  // Load menubar menu items
+  // Load menubar
   buildMenu(mainWindow)
 
-  touchBarWrapper(mainWindow)
+  // Load touchbar
+  if (process.platform === 'darwin') {
+    touchBarWrapper(mainWindow)
+  }
 }
 
 app.on('ready', () => {
   createWindow()
 
-  // Switch to user theme on start, and on reload
-  mainWindow.webContents.on('dom-ready', () => switchTheme())
+  mainWindow.webContents.on('dom-ready', () => {
+    switchTheme()
+    switchAccentColor()
+  })
 })
 
 // Quit when all windows are closed.
@@ -133,6 +137,28 @@ app.on('activate', () => {
   }
 })
 
+//
+// Accent color setting
+// macOS & Windows
+//
+const switchAccentColor = () => {
+  const systemAccentColor = systemPreferences.getAccentColor()
+  const accentColor = rgbaToHex(systemAccentColor)
+  mainWindow.webContents.send('accent-color', accentColor)
+}
+
+// Listen for accent color changes in System Preferences
+// macOS
+systemPreferences.subscribeNotification('AppleAquaColorVariantChanged', () =>
+  switchAccentColor()
+)
+// Windows
+systemPreferences.on('accent-color-changed', () => switchAccentColor())
+
+//
+// Appearance setting
+// macOS
+//
 const switchTheme = () => {
   const isDarkMode = systemPreferences.isDarkMode()
 
@@ -145,7 +171,7 @@ const switchTheme = () => {
       )
 }
 
-// Listen for theme changes in System Preferences
+// Listen for appearance changes in System Preferences
 systemPreferences.subscribeNotification(
   'AppleInterfaceThemeChangedNotification',
   () => switchTheme()

src/utils.js

@@ -4,4 +4,13 @@ const openUrl = url => {
   shell.openExternal(url)
 }
 
-module.exports = { openUrl }
+const rgbaToHex = color => {
+  const r = color.substr(0, 2)
+  const g = color.substr(2, 2)
+  const b = color.substr(4, 2)
+  // const a = color.substr(6, 2)
+
+  return '#' + r + g + b
+}
+
+module.exports = { openUrl, rgbaToHex }