From cdf95f64d60d203ec0157b939f012b4ea80c754f Mon Sep 17 00:00:00 2001
From: Falon Darville <falon.darville@konghq.com>
Date: Wed, 6 Oct 2021 12:11:17 -0700
Subject: [PATCH] Add Dark Colorblind core theme (#4081)

---
 .../ui/css/components/request-url-bar.less    |  2 +-
 .../insomnia-components/src/toggle-switch.tsx |  8 ++-
 plugins/insomnia-plugin-core-themes/index.js  |  1 +
 .../themes/dark-colorblind.js                 | 55 +++++++++++++++++++
 4 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 plugins/insomnia-plugin-core-themes/themes/dark-colorblind.js

diff --git a/packages/insomnia-app/app/ui/css/components/request-url-bar.less b/packages/insomnia-app/app/ui/css/components/request-url-bar.less
index f74d07b8cf..b023fa4bd8 100644
--- a/packages/insomnia-app/app/ui/css/components/request-url-bar.less
+++ b/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 {
diff --git a/packages/insomnia-components/src/toggle-switch.tsx b/packages/insomnia-components/src/toggle-switch.tsx
index 95c0151582..2f5faea0da 100644
--- a/packages/insomnia-components/src/toggle-switch.tsx
+++ b/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;
diff --git a/plugins/insomnia-plugin-core-themes/index.js b/plugins/insomnia-plugin-core-themes/index.js
index d996c3222b..fb742960de 100644
--- a/plugins/insomnia-plugin-core-themes/index.js
+++ b/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')
 ];
diff --git a/plugins/insomnia-plugin-core-themes/themes/dark-colorblind.js b/plugins/insomnia-plugin-core-themes/themes/dark-colorblind.js
new file mode 100644
index 0000000000..c17d3eb932
--- /dev/null
+++ b/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
+				}
+			}
+		}
+	}
+}