# Creating 'dark mode' images

> Creating a bash script to turn any 'light mode' image in to a passable 'dark mode' equivalent.

I just sat down to do this, and as I'm in 'working out how I work' mode, I'm just going to type this out as I do it. Pretend you're watching over my shoulder.

## Objective

When creating images for this site, I want each to have a 'dark mode' equivalent. Personally I rarely use dark mode, but for those who do a mostly-white image in the middle of a dark page isn't pleasant.

But you know what else isn't pleasant? Taking two screenshots of every damned thing! I enjoy writing but honestly I find images a chore. And some apps – ref. my beloved [Diagrams](https://diagrams.app) from yesterday – just don't have a dark mode. So I need a better solution.

## The Johnny.Decimal angle

This will involve a bit of research, and I'll learn some stuff. I'll end up with some sort of [bash script](https://commandline.johnnydecimal.com) that creates the new image.

It'd be nice to record this somewhere. But even more than the desire to record the _end result_ is my desire to record _the very activity itself_.

### You're always doing something

I started exploring this in my stalled-by-production-of-SBS [YouTube series](/blog/0074-focus-and-productivity/).

TL;DR: you're always doing **something**. Being aware of what that thing is should help you be more focused, less distracted, and ideally prevent you from context switching too often.

I used the timers that I show in that video series for months. It was useful. An overhead, for sure, but everything's a trade-off.

### Start with an ID, don't finish with one

How I want to manifest this in my daily life is by _starting_ any activity by finding the relevant JDex entry, and recording the fact that I'm starting work.

This makes the activity much more deliberate. Don't sit down, mash the keyboard, finish something, then figure out where to record it. That's backwards. Rather, sit down, find the place, open the note, refresh your memory, log the start of this new activity, and _then_ do the work.

### Tracking this under SBS

Unlike [Bestie's data](/blog/0105-besties-data/), this does count as a 'work' activity. But if I was tracking this in my Life Admin System, I'd put it at `14.22 Software, licenses, & downloads`.

This isn't a _perfect_ spot, but we've learned to just find the _best_ spot and make do. Because your mindset when coming back to find this later is exactly the same: of all of the limited places, where would I have put it?

And let's go back to one of the original design principles of JD: the idea that you should be able to start at the top of your system and, by process of elimination, find what you're looking for.

So let's try that with Life Admin. There's only one area, so let's look at its categories. Only one of them is viable:

- ~~11 Me & other living things~~ ❌
- ~~12 Where I live & how I get around~~ ❌
- ~~13 Money earned, saved, owed, & spent~~ ❌
- 14 My online life ✅
- ~~15 Travel, events, & entertainment~~ ❌

Now let's scan the headers of `14`:

- ~~14.10 ■ Computers & other devices~~ ❌
- 14.20 ■ Software & accounts ✅
- ~~14.30 ■ My online presence~~ ❌

This strongly feels like a software solution to me, but I could also see how you might consider it part of your 'online presence'. Within `14.20` we have:

- ~~14.21 My emergency recovery kit~~ ❌
- 14.22 Software, licenses, & downloads ✅
- ~~14.23 Email accounts~~ ❌
- ~~14.24 Social media accounts~~ ❌
- ~~14.25 Domains & hosting~~ ❌
- ~~14.26 All other accounts~~ ❌

And there we are. `14.22` will do the job. Rather than cluttering the parent note I'd create a sub-note `14.22+ Script to generate dark mode images` and put the details in there.

## That was a tangent because I'm not doing that

This is a work thing so it's going to live in my [SBS](https://sbs.johnnydecimal.com). And there _is_ a perfect home for it there: `14.31 Internal software & services`.

<JDImage
  alt="Screenshot of me searching SBS for 'software'. 14.31 is the top result."
  folder="blog"
  src="0106A-Sbs_1431--light-1662x958.png"
  width={831}
  height={479}
  caption="Figure 22.00.0106A. Searching the Small Business System for 'software'."
/>

> By internal software we mean any software (fancy or low-code no-code), scripts, or automations you've created to help the business.

Brilliant.

### I guess it's time to upgrade myself to the SBS

Talk about tangents. I haven't moved our own business over to the SBS yet. All we've done since we finished it is move house. I guess now's the time to install it. I'll walk through this on the end-of-week review video, but skip the details here.

(I will give myself a bit of credit for how easy that is. I'm really happy with the process to download your system. ☺️)

### `14.31+`

Okay, just like [last time](/blog/0105-besties-data/#extend-the-end) I'm going to create a sub-note of `14.31` rather than cluttering the main note.

And I'm going to make a decision: **I am not going to type any new data in to any parent JDex entry**. That is, the entries that create your initial system. Instead, **all new data will be in a sub-note**.

This leaves the parent note as a holder of metadata and pointer to sub-notes, keeping it clean.

### 'Open in new window'

When I'm doing this sort of thing I like the JDex note to be as simple as possible.

Both Bear and Obsidian have an option to open the current note in a new window. I do this, shrink it to look like a neat little notepad, and work in there. Keeps me focused.

<JDImage
  alt="Screenshot of my desktop. At the top left there's an Obsidian window that takes up about 1/16th of the screen."
  folder="blog"
  src="0106B-Obsidian_new_window--light-3840x2160.png"
  width={1920}
  height={1080}
  caption="Figure 22.00.0106B. A neat little JDex entry."
/>

### Addendum: leave myself a breadcrumb in Bear

While I said that this is a work task, future-me might forget that. So it can't hurt to leave myself a note in the other place I might look, which is the aforementioned `14.22` in my personal system.

For bonus points, use Obsidian's **Copy Obsidian URL** feature to get a link to it. Then create a Markdown link like `[D25.14.31+](obsidian://…)` to jump yourself from Bear directly to Obsidian.

As always, if you want any more guidance with this sort of thing, just ask.

---

# Converting the image

This isn't why you're here, but for the record this is how you do this with [ImageMagick](https://formulae.brew.sh/formula/imagemagick).

```bash
magick input.png \
  \( -clone 0 \
  -fill "#47a1b3" \
  -colorize 30% \) \
  -compose multiply -composite \
  -brightness-contrast -15x0 \
  output.png
```

I asked [Claude 3.5 Sonnet](https://claude.ai) (via [Cursor](https://cursor.com)) to produce that for me, and tweaked the results. It also produced a bash script so I can execute `magickdark <filename.png>`.

For me this is exactly what AI was made for: why spend an hour figuring out this one-time task when it can be generated for me in a minute?

Switch to dark mode to see the altered images. (Or you can open any image in a new tab and replace `light` in its filename with `dark`.)

---

# This has _all_ been a tangent

This morning I thought, _time to sort out my [Things](https://culturedcode.com/things/)_, which has 61 items in the inbox.

_Gonna need some screenshots_, I thought. _Gonna need that dark mode thing_. And here we are, hours later.

So tomorrow, we tackle Things!