(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
/******************************************************************************* | |
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 |
import React from 'react' | |
import styled from 'styled-components' | |
function flex(name, defaultValue) { | |
return (props) => { | |
let value = props[name] | |
if (!value && typeof defaultValue === 'undefined') return '' | |
if (!value) value = defaultValue | |
return `flex-${name}: ${value};` | |
} |
/* | |
Generates EightShapes Contrast Grid or Christopher Geary's "Contrast" tool | |
URLs from InVision DSM or Brand.ai. | |
Usage for Contrast Grid URL: | |
node contrast-grid-url.js [URL] | |
Usage for Contrast URL: |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
syntax "gitcommit" "COMMIT_EDITMSG$" | |
color white "#.*" | |
color green "#.(modified|deleted).*" | |
color yellow start="# Changes.*" end="# Changed.*" | |
color cyan start="# Untracked.*" end="diff" | |
color cyan start="# Untracked.*" end="$$" | |
color brightred "^deleted file mode .*" | |
color brightgreen "^\+.*" | |
color brightred "^-.*" | |
color brightyellow "^(diff|index|---|\+\+\+).*" |