Add Dark Colorblind core theme (#4081)

packages/insomnia-app/app/ui/css/components/request-url-bar.less

@@ -30,7 +30,7 @@
     min-width: 5em;
     text-align: center;
     background: var(--color-surprise);
-    color: #fff;
+    color: var(--color-font-surprise);
   }
 
   form {

packages/insomnia-components/src/toggle-switch.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent, ReactNode, useCallback, useEffect, useState } from 'react';
 import Switch from 'react-switch';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export interface ToggleSwitchProps {
   labelClassName?: string;
@@ -14,6 +14,12 @@ export interface ToggleSwitchProps {
 const ThemedSwitch = styled(Switch)<{ checked: boolean }>`
   .react-switch-bg {
     background: ${({ checked }) => (checked ? 'var(--color-surprise)' : 'var(--hl-xl)')} !important;
+    
+    ${({ checked }) => checked && css`
+    path {
+      fill: var(--color-font-surprise) !important
+    }
+    `}
   }
 
   vertical-align: middle;

plugins/insomnia-plugin-core-themes/index.js

@@ -15,4 +15,5 @@ module.exports.themes = [
   require('./themes/solarized'),
   require('./themes/solarized-dark'),
   require('./themes/high-contrast-light'),
+  require('./themes/dark-colorblind')
 ];

plugins/insomnia-plugin-core-themes/themes/dark-colorblind.js

@@ -0,0 +1,55 @@
+module.exports = {
+	name: 'Dark Colorblind',
+	displayName: 'Dark Colorblind',
+	theme: {
+		background: {
+			default:    '#21262D', 	// primary background color
+			success:    '#1F6FEB', 	// POST request, 200 OK, parameter names
+			notice:     '#E8F086', 	// SEND button, GET request
+			warning:    '#A691AE', 	// PUT request
+			danger:     '#FF4242', 	// DELETE request
+			surprise:   '#FFC20A', 	// accent (Dashboard link, branch button, add plugin button)
+			info:       '#58A6FF' 	// OPTIONS AND HEAD request
+		},
+		foreground: {
+			default:     '#fff',    // primary font color
+			success:     '#fff', 	// secondary font color for success background
+			notice:      '#000', 	// secondary font color for notice background
+			warning:     '#fff', 	// secondary font color for warning background
+			danger:      '#fff', 	// secondary font color for danger background
+			surprise:    '#000', 	// secondary font color for surprise background
+			info:        '#000' 	// secondary font color for info background
+		},
+		highlight: {
+			default: '#D3D3D3'      // sidebar highlight color
+		},
+		styles: {
+			appHeader: {
+				foreground: {
+					surprise:   '#000'      // branch button font color
+				}
+			},
+			paneHeader: {
+				foreground: {
+					surprise:   '#000', 	// accent font color
+					info:       '#000' 		// response font color
+				}
+			},
+			editor: {
+				foreground: {
+					default:    '#000', 	// primary editor font color
+					surprise:   '#000', 	// accent font color
+					info:       '#000' 		// response font color
+				}
+			},
+			dialog: {
+				background: {
+					default:    '#2E4052' 	// modal primary background color
+				},
+				foreground: {
+					default:    '#fff' 	    // primary font color for modals
+				}
+			}
+		}
+	}
+}