SASS - subtle dark mode

subtle-dark-mode.sass

// dark mode options...

$invert: true

// differences between dark grays are more visible when inverted into light grays...

$pushInvertedBrightness: 0.01

// color functions...

@function mono($l)
	@return hsl(0,0%,$l)
  
// this exponential function will "push" light grays toward white...

@function getMono($l)
	@if $invert
		@return hsl( 0, 0%, 100 - ($l * ( 1 - ( (100-$l) *  $pushInvertedBrightness ) ) ) )
	@else
		@return hsl( 0, 0%, $l )

// theme...

$color: #EE3987
$darkest: getMono(10)
$dark: getMono(30)
$midGray: getMono(60)
$midGray2: getMono(70)
$light: getMono(90)
$lightest: getMono(96)
$white: getMono( 100 )