Appearance mode setting and colours

Bike Outliner
1

Bike’s ‘Appearance’ setting allows for Dark, Light and Automatic modes. Colours for Foreground and Background can be selected (in the ‘Editor’ pane). Everything works fine with the default colours, the foreground and background colours are swapped depending on the current Appearance requirement.

However, if custom colours are chosen, the custom colour doesn’t get swapped. In my case I had selected a dark grey for the foreground colour, but when evening came (and the mode automatically switched to Dark mode) the background colour had swapped to black, but the foreground colour remained dark grey. Makes for an interesting editing experience I guess!

Possible solutions; treat the custom fg/bg colours in the same way you do with the defaults, and swap as appropriate, or perhaps have the option to choose distinct fg/bg colours for both modes.

Bike v1.12 preview 129

2

The default colors are a special case… they are built in system colors that are more “symbols” then colors and they change display automatically when light/dark mode changes.

Custom colors that you select can’t have this behavior.

I will get a fix in eventually when I add themes support. Or if that takes too long maybe I’ll add separate light/dark mode color choices as you suggest. Neither of these things are likely to happen in the super near term.

For now you can use scripts to change colors quickly when dark mode changes. Here’s a script to change Bike’s color scheme:

var bike = Application('Bike');

bike.backgroundColor = hexToColor("0d4a04")
bike.foregroundColor = hexToColor("3ab327")

function hexToColor(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return [
  	Math.trunc((parseInt(result[1], 16) / 255.0) * 65535),
  	Math.trunc((parseInt(result[2], 16) / 255.0) * 65535),
  	Math.trunc((parseInt(result[3], 16) / 255.0) * 65535)
  ]
}

To try it out use macOS’s Script Editor app and make sure to choose “JavaScript” mode instead of AppleScript. Note that you can set colors used by using a HEX color picker and then pasting the HEX color into the above script.

Now if you create two scripts with two sets of colors you can quickly changes Bike’s color scheme without digging into Settings.

If you want to go further I think you can automate the running of those scripts using Keyboard Maestro. I haven’t actually tried it, but from this post I think there is a trigger that you can use to run the script you want automatically when system appearance changes.

1 Like
3

and here, FWIW, is an AppleScript snippet which toggles between two particular color settings that I use:

( a dark background with orange text ⇄ light background with dark text )

tell application "Bike"
	set white to ((255 / 255) * 65535) as integer
	set black to ((1 / 255) * 65535) as integer
	
	-- COLORS
	-- Black ink on white paper
	set light to {{white, white, white}, {black, black, black}}
	
	-- Chocolate and orange.
	set dark to {{8736, 8736, 8736}, {65535, 51656, 37008}}
	
	
	-- TOGGLE
	set {nBack, nFore} to {foreground color, background color}
	
	if (item 1 of nBack) < (item 1 of item 1 of dark) then
		set {background color, foreground color} to dark
	else
		set {background color, foreground color} to light
	end if
end tell
2 Likes
4

Many thanks for the response and script. Keyboard Maestro has a “The system appearance changes” trigger, which I’ll hook up to the script and see how it goes.

1 Like
5

Thanks for this, it’s a great jumping-off point for what I need.

1 Like