feature(themes): introduce dagbladet dark theme

src/atoms/Body.js

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { getColor, getVariable } from '../utils';
 
 const Body = styled.body`
+	background: ${getColor('background')};
 	color: ${getColor('type')};
 	font-family: ${getVariable('mainFont')};
 	font-size: ${getVariable('uiRegularSize')};

src/molecules/ThemeSwitcher.js

@@ -86,6 +86,14 @@ class ThemeSwitcher extends React.Component {
 					>
 						Dagbladet
 					</Button>
+					<Button
+						textColor={colors.skinColors.splashText}
+						onClick={e => this.handleButtonClick(e)}
+						isActive={selected === 'dagbladetDark'}
+						value="dagbladetDark"
+					>
+						Dagbladet Dark
+					</Button>
 					<Button
 						textColor={colors.skinColors.splashText}
 						onClick={e => this.handleButtonClick(e)}

src/themes/dagbladet-dark/index.js

@@ -0,0 +1,35 @@
+import { merge } from 'aurora-deep-slice-merge';
+import { darken, lighten } from 'polished';
+import dagbladet from '../dagbladet';
+
+const darkness = '#1c1d25';
+
+const colors = merge(dagbladet.colors, {
+	type: '#ffffff',
+	darkness,
+	darknessDark: darken(0.2, darkness),
+	darknessLight: lighten(0.15, darkness),
+	darknessLighter: lighten(0.3, darkness),
+
+	skinColors: Object.assign({}, dagbladet.colors.skinColors, {
+		background: 'darkness',
+		type: 'type',
+		typeLight: 'grayTint',
+		typeLighter: 'grayTintDark',
+		typeDisabled: 'darknessLighter',
+
+		splashBackground: 'primaryDark',
+		splashText: 'white',
+
+		calmBackground: 'darknessLight',
+		calmText: 'type',
+		link: 'type',
+	}),
+});
+
+const theme = {
+	name: 'Dagbladet Dark',
+	colors,
+};
+
+export default theme;

src/themes/index.js

@@ -3,6 +3,7 @@ import lightTheme from './light-theme';
 
 import aller from './aller';
 import dagbladet from './dagbladet';
+import dagbladetDark from './dagbladet-dark';
 import dinside from './dinside';
 import kk from './kk';
 import mat from './mat';
@@ -20,6 +21,7 @@ const themes = {
 
 	aller,
 	dagbladet,
+	dagbladetDark,
 	dinside,
 	kk,
 	seher,

src/themes/pregenerate.js

@@ -3,10 +3,10 @@ import path from 'path';
 import { themes } from './index';
 
 const themeNames = Object.keys(themes).filter(
-	theme => !['defaultTheme', 'lightTheme'].includes(theme)
+	theme => !['defaultTheme', 'lightTheme', 'dagbladetDark'].includes(theme)
 );
 
-const themeFolderNames = [...themeNames, 'default-theme', 'light-theme'];
+const themeFolderNames = [...themeNames, 'default-theme', 'light-theme', 'dagbladet-dark'];
 
 const prefix = 'module.exports = ';
 const themeLibDir = path.join(__dirname, '..', '..', 'lib', 'themes');
@@ -26,6 +26,9 @@ function getThemeName(folder) {
 	if (folder === 'light-theme') {
 		return 'lightTheme';
 	}
+	if (folder === 'dagbladet-dark') {
+		return 'dagbladetDark';
+	}
 	return folder;
 }