Dark Mode for Coda

At some point I'm going to post my thoughts on Coda, but lets just say that I quite enjoy it as a tool to make projects with a lot of interconnections and sections manageable in a way that Google Docs, markdown editors, and other tools just cannot.

Continuing my interest in all things dark mode, one annoyance right now is that Coda doesn't seem to support themes, and presents only the standard white background layout. This is pretty jarring when authoring content at night, but because Coda is web-based, this is just a style edit away from a fix. Using the open source extension Stylebot, I've made a set of changes to Coda that darkens most of the basic UI.

Check out the Github Gist here.

Before & after

Lightswitch - adding dark mode compatibility to a website

One of my goals developing this blog was to design it to work with both light and dark color schemes. Having different background colors is very helpful for readability and eyestrain both during the day and night, and follows the ongoing trend of computers adapting to blending into to their surroundings.

Dark mode was the major user-facing feature in September's release of MacOS Mojave and has been well received, which means other platforms (including iOS) will surely follow. It was only a matter of time before this was brought to the web, and indeed that happened with last week's release of Safari Technology Preview 68, which lets websites specify different styles based on whether the OS is in light mode or dark mode (technically, the prefers-color-scheme media query).

However, there is one issue with just letting OS mode determine a website's color scheme - user preference. Because OS mode doesn't change based on day/night, users are going to set their OS mode once and probably leave just it that way, regardless of time of day. Those users may not always want a website to be light or dark based on their OS, and may wish to override the default.

Lightswitch.js active on this website

My solution is a bit javascript I call Lightswitch that automatically detects the user's OS mode, and also allows the user to override that mode with a button you put on your site. On this blog, the button is the half circle icon in the top right corner, but you may attach the override functionality anywhere on your site -- such as this link.

Here's the code:

/*******************************************************************************
LIGHTSWITCH: A DARK MODE SWITCHER WITH USER OVERRIDE
By Nick Punt 10/26/2018
How to use:
  *  Create two color schemes in CSS under the classes 'light' and 'dark'
  *  Add the class 'light' or 'dark' to your body as your default color scheme
  *  Add button to page with id 'lightswitch', which lets users change/override
  *  Use the class 'flipswitch' for any style changes you want on lightswitch
Logic:
  1. When user hits page for first time, color scheme is based on OS/browser
     (if supported), otherwise it defaults to the body class you added
  2. When user clicks lightswitch to override colors, their preference is stored
  3. When user alters their OS light/dark mode, switch to dark if dark mode,
     and light if light mode
     
Note:
The 'prefers-color-scheme' css support is currently only available in Safari 
Technology Preview 68+. 
*******************************************************************************/

// New prefers-color-scheme media query to detect OS light/dark mode setting
var prefers_light = window.matchMedia('(prefers-color-scheme: light)')
var prefers_dark = window.matchMedia('(prefers-color-scheme: dark)')

// Change to dark and rotate the switch icon
function darkmode() {
  document.body.classList.replace('light', 'dark');
  document.getElementById("nav-light").classList.add("flipswitch");
}

// Change to light and rotate the switch icon
function lightmode() {
  document.body.classList.replace('dark', 'light');
  document.getElementById("nav-light").classList.remove("flipswitch");
}

// Initialization triggers light/dark mode based on prior preference, then OS setting
if(localStorage.getItem("mode")=="dark") {
  darkmode();
} else if(localStorage.getItem("mode")=="light") {
  lightmode();
} else if(prefers_light.matches) {
  lightmode();
} else if(prefers_dark.matches) {
  darkmode();
}

// Fires when user clicks light/dark mode switch in top right
function handleThemeUpdate() {
  if (document.body.classList.contains('light')) {
    darkmode();
    localStorage.setItem("mode", "dark");
  } else {
    lightmode();
    localStorage.setItem("mode", "light");
  }
}

// Runs when OS changes light/dark mode. Changes only if you were on default
// color state (light on light mode, dark on dark mode).
function OSColorChange() {
  if (prefers_light.matches) {
    lightmode();
    localStorage.setItem("mode", "light");
  } else if (prefers_dark.matches) {
    darkmode();
    localStorage.setItem("mode", "dark");
  }
}

// Listeners for when you change OS setting for light/dark mode
prefers_light.addListener(OSColorChange)
prefers_dark.addListener(OSColorChange)

Download on Github

The only known issue with Lightswitch currently is that since the site defaults to light, when a user loads a page with a lot of content (e.g. the blog index), the screen may flash to the light background briefly before the javascript is run.

Setting content to light or dark based on the OS mode is a first step to having our computers be truly responsive to our surroundings, but it's not the final word. Ideally, websites and documents would set a color scheme based on environmental factors like time of day and lighting in the room. Javascript isn't the right way to solve these problems though - it's the OS' job to factor these in to provide a consistent experience from UI to apps to content. The best we can do in the meantime is to set up our content with light and dark variants and allow users to set override preferences on this content.

The Feed Bites Back, Followup

This is a follow-up to yesterday's post on the Facebook feed.

A few things:

  1. Filter bubbles matter
  2. Cybersecurity matters
  3. Wealth inequality matters

The first just had its first real moment. We're severely underestimating the effects of filter bubbles in social media, because we have an outdated notion of how people form opinions and how manipulable we really are, as well as not understanding what the true effects are of the information systems we use. Recently our ability to distort information seems to have grown faster than our ability to correct distortion. The entropy is increasing. Our expectation is that we're getting the truth from what we read. The reality is that we often don't.

The second has just moved from 'annoying that I have to remember these darn passwords' to 'they can read this, can't they?'. Legitimate cybersecurity chops are now a must have for future candidates. Code and exploits - not guns or men or physical things - are the battlefield of the 21st century, and we struggle to reason about it. As computing spreads to more and more things, the attack surface increases, and the ways these attacks can affect and disrupt us multiply. Our expectation was that things were private and safe, the reality is they're not and anything can happen at any moment.

The third has been brushed aside for too long. In a way the 2008 recession is like the Treaty of Versailles post-WW1, in that the aftereffects of the recession created a massive wealth transfer to the top (through r>g, regulatory capture, campaign finance laws, etc), and that helped create the conditions for this election that the above two then ran with. We talk about wealth inequality as an abstract concept but do almost nothing structurally to resolve it, and now it bites. Our expectation was we'd continue the growth path and opportunities of post-war America, and the reality is that we didn't, and we have no new broadly-accessible paradigm to pivot to.

There are many more takeaways from this election, but I think these are the most novel ones that come to mind. All three of them are about the mismatch of reality and expectation. We've clung to our 20th century safety blanket for too long into this century, and now it's been taken away.

Socialfly: Why We’re Here

I wrote this post as an introduction to my upcoming Facebook/iPhone app Socialfly, originally appearing on the Socialfly blog on 10/15/2008.

Now a decade later, I still believe that software can and should do a lot more to improve the quality of connections between people, and that the last decade's efforts in social software has been disappointingly anti-social and pro-growth. Our decidedly non-viral product positioning (launched in the era of viral Facebook apps) limited our business prospects, but I think is nonetheless the right approach to fulfill this promise.


We’re excited to announce today that Socialfly has been chosen as one of 25 recipients of Facebook’s Round I fbFund grant. We look forward to developing a great partnership with Facebook to provide the best user experience possible for Socialfly users.

We chose to participate in the fbFund competition because we think Facebook is the ideal platform for Socialfly’s coming launch. Over the past year we’ve seen both an incredible rise in the capability of the Facebook platform, and an evolving user dynamic that shows Facebook has become not just a mainstream success, but a leader in redefining how everybody, everywhere communicates.

Social is Changing

Have you noticed something recently? Lines are blurring between personal and professional, between casual acquaintances and close friends or family, and between nearly every other possible distinction we draw among our connections. They’re all starting to appear side by side, even while social norms are still highly ambiguous. What’s happening?

Social networks are changing

Facebook has become the mainstream social network. Your parents, coworkers, old friends, and the local barista may all be on it right now. However, while the social graph has widened to include this huge quantity of connections, an expanding social graph dilutes what it means to be connected. The role of applications may very well be to simply make sense of these connections - defining what it means to be connected, and the implicit and explicit rules of interaction.

People are changing

We who enter the workforce today are expected to change our jobs 7 to 10 times in our careers. As young professionals, we can no longer rely on pre-defined social circles to tap into, because we relocate and switch jobs so frequently. A greater burden is now on all of us to build our own networks, because we wind up meeting a greater number of people for a shorter amount of time.

Where Socialfly Comes In

We’re building Socialfly to fill in what we see as a crucial missing piece in this redefinition of social. While changes in social networks and social conditions are driving a greater quantity of connections, Socialfly is about increasing the quality of connections. We believe true relationships are measured by the times you spend and interests you share together: the ideas you bond over, the details you share in common, and your regular interactions. We want to do this with all the people we like, and we think you do too.

What Next?

The Socialfly team is working hard for our first release in November. In the mean time, take a look at the Socialfly preview application, which will keep you up to date and help you set yourself up for our launch. You can also follow us on twitter, and subscribe to our blog’s RSS feed.

Thanks,

The Socialfly Team