
I developed a dark and light theme for this site and built a toggle to switch between them. Also I used media queries to set the default theme to match the visitors operating system choice.

![Sun and moon icons](DarkModeToggle-1.svg)

## Tl;dr
* [Introduction](#introduction): I am dark mode obsessed. Every app I use I attempt to make it dark themed. 😎
* [Theme Switch](#theme-switch): I built a switch to allow a visitor to toggle between light and dark theme.
* [Styles](#styles): I nested the styles for both light and dark theme together. You may want to separate them so that you can selectively download.
* [Media Query](#media-query): You can set the theme based on the visitor's operating system choice!
* [React Component](#react-component): Bundling everything up into a nice component.
* [Github Repo](#github-repo): You can roll your own dark theme using my toggle.

## Introduction
I've been obsessed with dark themes for a while now. To the point were I will essentially boycott an app or service if I cannot find a way to theme it dark. Just the thought of staring into a blinding white screen is giving me a headache right now.

Ever since a very early iteration I have had my personal website styled with a dark theme. But as I get further into my career as a software developer the thought that anyone but myself might actually look at my website is a looming fear. Is it ready for that? Perhaps in software development this may be skewed just a bit but I think in general people prefer the more expected light colours of the internet. Google is light, Amazon is light, nothing popular is dark.

## Theme Switch
I decided to implement a theme switch. After reading a bit into how others accomplished this it turned out to be quite simple. The hard part is actually designing a light theme for my site.

Essentially all you need to do is create a toggle, checkbox, or button that will apply or remove a class from the HTML `body`. Depending on how your site (or app) is designed you could apply this class to some other parent component, but since I was using the body background I decided to just use the body.

I built a button based toggle switch. The onClick method will do

```javascript
document.body.classList.toggle("dark-mode");
```

## Styles
Now, in your CSS, whatever styles you want overridden when this theme is toggled just add the `dark-mode` class selector.

For example

```css
body {
  background-color: #fff;
  color: #222;
}

body.dark-mode {
  background-color: #333;
  color: #eee;
}
```

or some SCSS

```scss
h1 {
  color: #222;
}

.dark-mode {
  h1 {
    color: #eee;
  }
}
```

I prefer having the dark and light styles right next to each other in the file, but some might notice that you are always downloading both styles even if only one is being used. Maybe if I ever decide to separate them I'll write another article about how that worked.

## Media Query
A piece of functionality I really wanted was rather than choosing light or dark as the default for everyone and forcing them to press the switch I wanted to default to their OS theme choice. MacOS, Windows 10, iOS, and Android all have dark-mode support so wouldn't it be nice if you could just set the theme based on that? You can!

```css
@media (prefers-color-scheme: dark) {
  // styles
}
```

You can query for either `dark` or `light`. You can use this media query directly in your styles to make your site completely reactive to the user OS choice. The issue with that is that it greatly complicates being able to switch between the themes.

I opted to just write my styles around the theme class I created for `body`. Then in my javascript I use the media query to set the initial mode of my switch component.

```javascript
componentDidMount() {
  const userPrefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
  if (!userPrefersDarkMode && !this.state.darkMode) {
    this.themeToggleOnClick()
  }
}
```

If your default theme is light, this `componentDidMount` will automatically switch it to dark on page load if the user has their OS set to dark.

## React Component
Since I a working in React I bundled the logic and layout for the switch into a `ThemeToggle` component. I personally used the Icon and Tooltip components from the [Ant Design](https://ant.design) library to simplify a few things and provide a nice tooltip if someone doesnt understand what the icon represents.

```jsx
import React from "react";
import "./themeToggle.scss";
import { Tooltip, Icon } from "antd";

export default class ThemeToggle extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      lightMode: false
    };
  }
  
  componentDidMount() {
    const userPrefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
    if (!userPrefersDarkMode && !this.state.lightMode) {
      this.toggleTheme()
    }
  }

  toggleTheme = async () => {
    await this.setState({
      lightMode: !this.state.lightMode
    });
    document.body.classList.toggle("light-mode");
  };

  MoonSvg = () => {
    return (
      <svg className="toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
        <path className="moon-icon"/> // EXCLUDED SVG PATH FOR BREVITY
      </svg>
    )
  };

  SunSvg = () => {
    return (
      <svg className="toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
        <path className="sun-icon"/> // EXCLUDED SVG PATH FOR BREVITY
      </svg>
    )
  };

  render() {
    return (
      <Tooltip
        title={`Toggle ${!this.state.lightMode ? "Light" : "Dark"} Mode`}
        placement="bottomRight"
        arrowPointAtCenter
        mouseEnterDelay={0.2}
      >
        <div className="toggle-container">
        {
          (this.state.lightMode) ?
            <Icon component={this.MoonSvg} onClick={this.toggleTheme} />
            :
            <Icon component={this.SunSvg} onClick={this.toggleTheme} />
        }
        </div>
      </Tooltip>
    );
  }
}
```

And here are the styles I used for this button

```scss
@import "../../colors.scss";

.toggle-container {
  width: 60px;
  height: 60px;
  font-size: 40px;
  line-height: 66px;
  top: 16px;
  right: 21px;
  position: fixed;
  z-index: 3;
  border-radius: 30px;
  background-color: rgba($color-main-bg, 0.9);
  text-align: center;

  @media (min-width: 375px) and (max-width: 812px) {
    line-height: 64px;
  }

  .toggle-icon {
    width: 1em;
    height: 1em;

    .sun-icon {
      fill: $color-main-text;
    }

    .moon-icon {
      fill: $color-main-text-light-theme;
    }
  }
}

.light-mode {
  .toggle-container {
    background-color: rgba($color-main-bg-light-theme, 0.9);
  }
}
```

You can see I ended up also storing the toggle state in the component state. That way I can easily conditionally switch between the sun and moon icon.

Also switched things around a bit. For my website I still treat the dark theme as default and the light theme as the exception. Therefore I am tracking the state as lightTheme = true/false rather than darkTheme. Same thing, just do whatever works best in your brain.

## Github Repo
In addition to the source here which is specific to my implementation and also uses Ant Design I have posted a [Github repository](https://github.com/tyrelh/dark-mode-react-toggle) with a more generic React component that lets you have theme switch.

All you need to do is include the component and then create your own styles for a dark theme nested within a `.dark-theme` class on the `body`.

Have a nice day! 😎

Dark Mode React Toggle


During a recent project to convert my JavaScript & Node [Battlesnake](https://play.battlesnake.com/) over to TypeScript & [Deno](https://deno.land/), I decided I would also create a more robust suite of tests for it.

![Deno and Github logos with an addition symbol between them](DenoTestsAndGithubActionsCI.png)

If you are unfamiliar with [Battlesnake](https://play.battlesnake.com/), it is an online and in-person programming competition where you build a AI in the form of a REST API that can play a multiplayer version of the classic game [Snake](https://en.wikipedia.org/wiki/Snake_(video_game_genre). You can check out details on their [website](https://play.battlesnake.com/) to learn more, and even watch some past events on their [Twitch channel](https://www.twitch.tv/BattlesnakeOfficial).

## Tl;dr
* [Deno Tests](#deno-tests): Deno includes a very simple test runner framework.
* [Github Actions](#github-actions): Github actions allow you to automate tasks based on triggers within your Github repo.
* [Create the workflow](#create-the-workflow): A .yml file describes a series of actions you would like to perform based on a trigger.
* [Automate Deno tests](#automate-deno-tests): Just add a `run: deno test` command to your workflow .yml.

## Deno Tests
[Deno](https://deno.land/) includes a simple test runner for tests in js, ts, jsx, or tsx files. It can be run with:

```bash
deno test
```

To create tests, all you need to use is use the `Deno.test()` method included with Deno within files ending in *test* (`{*_,}test.{js,ts,jsx,tsx}`) anywhere in your project structure. I put mine in *tests/*.

Example of a basic test:

```typescript
import { assert } from "https://deno.land/std/testing/asserts.ts";
import { root } from "../app/main.ts";

Deno.test("Root response contains expected fields", () => {
  // when
  const result = root();
  // then
  assert(result?.apiversion);
  assert(result?.author);
  assert(result?.head);
  assert(result?.tail);
  assert(result?.color);
});
```

This test is simply asserting that values exist for these specified fields.

You can add many tests to single files by calling `Deno.test()` over and over again. You can also make as many test files as you like, Deno will automatically execute all the files it recognizes ending in *test* (`{*_,}test.{js,ts,jsx,tsx}`).

Visit the [Deno Testing docs](https://deno.land/manual/testing) for more info about creating tests.

Easy! So now I can create a robust set of unit tests for my Battlesnake AI.

Since the game Battlesnake works by [sending you the entire game state for every move](https://docs.battlesnake.com/references/api), I can also save the game state JSON from particularly tricky moves and use them within their own tests. The output can be compared against the single best move, or even a set of equally good moves if their are multiple. Creating tests like this tests the behaviour of the AI overall and ensures that changes to the behaviour aren't making the AI perform worse on moves it previously was able to do correctly.

So now that I have tests up and working, I wanted to automate them using Github Actions.

## Github Actions
Github Actions are still quite new to me and I hadn't touched them at all before this project. I just assumed it would be complicated to set up.

For what I wanted to do for this project it was actually trivial. Couldn't have been easier.

What I wanted was to run these tests automatically whenever pushing to my repository. I figured this Deno app is pretty simple all things considered, so I shouldn't have to mess around with Docker or anything like that.

I'll step you through what I did.

## Create the workflow
Github Actions are based around these things called workflows. They are essentially .yml scripts that describe the series of events you want to perform in your action.

If you click the Actions tab within the repo you want to create the Action you will be presented with a Get started with GitHub Actions page. This page has many example actions you get you started for so many different languages, frameworks, and platforms. It will even suggest actions to you based on the contents of your repo. I chose the *Skip this asn set up a workflow yourself* option.

![Get started with Github Actions](DenoAndGithubActions-get-started-with-github-actions.png)

This plops you into a web editor and gives you a basic example workflow .yml file to start with. It looks something like this:

```yaml
# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2

    # Runs a single command using the runners shell
    - name: Run a one-line script
      run: echo Hello, world!

    # Runs a set of commands using the runners shell
    - name: Run a multi-line script
      run: |
        echo Add other actions to build,
        echo test, and deploy your project.

```

With this you can actually click the *Start commit* button and that will guide you to commit this .yml file to your repo within the *.github/workflows/* directory.

You can see near the top of that file that there are triggers for `on push` and `on pull_request` attached to the master branch. You can try to push something to master and see it work!

If you visit the Actions tab of your repo now you will see your Actions and the history of all the times they have run. You can click into them for more details and to see the console outputs. Also by default it will email your Github account email whenever an action fails. I imagine this can be changed somewhere if you don't like that.

![Github Actions](DenoAndGithubActions-github-actions.png)

## Automate Deno tests
Now I wanted to try to run my tests using Deno. I knew this would involve installing Deno somehow so I searched around.

I found [this repo](https://github.com/denolib/setup-deno) from [denolib](https://github.com/denolib) with exactly what I wanted.

Really all you need to do is add the `uses` line pointing to this repo to your workflow .yml file under the `steps` section. You can also include the Deno version you prefer. Then within the `run` section you now have access to `deno` and all of its functions.

So now my workflow .yml file looks like this:

```yaml
name: CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master
    - uses: denolib/setup-deno@master
      with:
        deno-version: v1.x
    - run: deno run https://deno.land/std/examples/welcome.ts
```

One really cool feature of Deno is that you can run scripts from the web right in the terminal, and you can also do this right within Github Actions. That is what the URL is doing in

```yaml
- run: deno run https://deno.land/std/examples/welcome.ts
```

You can run this and then look within your Github Actions for the console output from this example *welcome.ts* file.

So now to run my tests, all I needed to do was change that `deno run` command to `deno test`. My final .yml workflow looks something like this:

```yaml
name: CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  run-tests:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master
    - uses: denolib/setup-deno@master
      with:
        deno-version: v1.x
    - run: deno test
```

Now every time I push to my master branch all my tests will be run, including any new tests I just committed, and I will be notified both on the Github UI and in my email if any tests fail. I can then log into Github and look at the output to see what failed.

I hope this small guide helped you out and showed you just how simple both Deno and Github Actions are!

Deno Tests & GitHub Actions CI


I started this project in 2018 to help teach myself better object-oriented programming structure, game update/draw loops, and JavaScript in general.

Implemented using the P5.js framework for the draw loop and canvas drawing functionality with nothing else but vanilla JavaScript.

[![Screenshot of game with triangle representing the ship in the center and white asteroids all around](lightshift-game-2.png)](https://tyrelh.github.io/lightshift-game/)

You can [play the game](/lightshift-game/index.html) right now!

Controls:

* Left & Right Arrows: Turn
* Up & Down Arrows: Boost
* Shift: Shoot
* Control: Jump

## Basic Overview

Overall there is a game object that contains many layers of the game for title screen, end screen, and game functionality.

Each game layer contains objects associated with its purpose. For example the game layer contains a ship object representing you and an asteroids layer which itself contains many asteroid objects.

All layers and objects implement `update` and `draw` methods. The `update` method will update the state of a particular object for that frame, and then the `draw` method will draw it with the new state.

The layers serve to group similar objects as well as delegate calls to `update` and `draw`. For example each frame `game.update()` is called. This call simply causes `game` to loop through all the layers it contains and call `update` on them, and so forth. Until finally a layer calls `update` on a base object that contains state. That state is then updated!

## Future Updates

1. A couple portions of spaghetti code associated with collisions that needs to be cleaned up.
2. AI ships that maybe enter after a particular point  and try to ruin your day. A simple following mechanism with collision avoidance for the asteroids seems sufficient enough to start.
3. New items that allow for ship upgrades like weapons or shields. Currently every 1000 pts a one-time use shield drops from an asteroid. Perhaps it would make more sense to have the items drop from enemy ships rather than asteroids.
4. The lightshift RGB effect on all the assets isnt being drawn very efficiently. Improvements could be made.
5. Touch controls for mobile.

## Github Repo

The code for this is available on [Github](https://www.github.com/tyrelh/lightshift-game).

Any feedback or comments are welcome! This is very much in an alpha state.



#javascript

Dark Mode React Toggle

June 28, 2020 6 Minute Read

Deno Tests & GitHub Actions CI

May 23, 2020 6 Minute Read

Lightshift Game

Feb 1, 2020 1 Minute Read

Get in touch