Utility function to detect background colour and select either light or dark default hometown logo

app/javascript/mastodon/features/compose/index.js

@@ -12,8 +12,10 @@ import Motion from '../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import SearchResultsContainer from './containers/search_results_container';
 import { changeComposing } from '../../actions/compose';
-import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
+import defaultmascotlight from '../../../images/defaultmascotlight.svg';
+import defaultmascotdark from '../../../images/defaultmascotdark.svg';
 import { mascot } from '../../initial_state';
+import {svgSelect} from './util/svg_select';
 import Icon from 'mastodon/components/icon';
 
 const messages = defineMessages({
@@ -32,6 +34,13 @@ const mapStateToProps = (state, ownProps) => ({
   showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage,
 });
 
+let instanceMascot;
+if (mascot) {
+  instanceMascot = <img alt='' draggable='false' src={mascot} />;
+} else {
+  instanceMascot = <img alt='' draggable='false' className="defaultmascot" src={svgSelect(defaultmascotlight, defaultmascotdark)} />;
+}
+
 export default @connect(mapStateToProps)
 @injectIntl
 class Compose extends React.PureComponent {
@@ -110,7 +119,7 @@ class Compose extends React.PureComponent {
             <ComposeFormContainer />
 
             <div className='drawer__inner__mastodon'>
-              <img alt='' draggable='false' src={mascot || elephantUIPlane} />
+              {instanceMascot}
             </div>
           </div>}
 

app/javascript/mastodon/features/compose/util/svg_select.js

@@ -0,0 +1,21 @@
+export function svgSelect(light, dark) {
+
+  var svgbg = window.getComputedStyle(document.getElementsByClassName("drawer__inner")[0], null).getPropertyValue("background-color");
+  var rgbArray = ((svgbg.replace(/[^0-9,]/g, "")).split(",")).map(Number).map(x => x/255);
+
+  for ( var i = 0; i < rgbArray.length; ++i ) {
+  			if ( rgbArray[i] <= 0.03928 ) {
+  				rgbArray[i] = rgbArray[i] / 12.92
+	      } else {
+  				rgbArray[i] = Math.pow( ( rgbArray[i] + 0.055 ) / 1.055, 2.4);
+  			}
+  		}
+
+  var luminance = 0.2126 * rgbArray[0] + 0.7152 * rgbArray[1] + 0.0722 * rgbArray[2];
+
+  		if ( luminance <= 0.179 ) {
+  			return light;
+  		} else {
+  		  return dark;
+  		}
+}

app/javascript/styles/mastodon/components.scss

@@ -2365,6 +2365,12 @@ a.account__display-name {
     user-select: none;
   }
 
+  img.defaultmascot {
+    width: 70px;
+    padding-left: 1rem;
+    margin-top: -2rem;
+  }
+
   @media screen and (min-height: 640px) {
     display: block;
   }