most dark mode done, need select and toggle created

cli/index.ts

@@ -394,21 +394,159 @@ async function getPageHTML(
         `
           <style>
             :root {
+              --middle-panel-bg-color: unset;
               --sidebar-bg-color: #F9FBFA;
-              --darken-tenth-sidebar-bg-color: #dae7e1;
-              --lighten-tenth-border-bottom: #aaaaaa; // wrong
-              --search-input-border-bottom: #dae7e1;
+              --right-panel-bg-color: #001E2B;
               --sidebar-text-color: black;
               --text-primary-color: #1C2D38;
+              --text-secondary-color: #3e647c;
+              --api-header-color: #00684A;
+
+              --resource-version-pill-bg: #E8EDEB;
+              --resource-version-pill-color: #001E2B;
+              --download-btn-border-color: #000000;
+
+              --colors-primary-main: #001E2B;
+              --colors-primary-main-light: #006591;
+              --colors-primary-main-dark: #000000;
+
+              --colors-success-main: #1d8127;
+              --colors-success-main-light: #86e490;
+              --colors-success-main-dark: #0a2e0e;
+
+              --absolute-border-color: none;
+
+              --sidebar-hover: #E8EDEB;
+              --sidebar-active-bg: #E3FCF7;
+              --sidebar-active-color: #023430;
+              --sidebar-hl: #E7EEEC;
+              --back-btn-label-color: #5C6C75;
+
+              --underlined-header-color: rgba(38, 50, 56, 0.5);
+              --underlined-header-border-color: rgba(38, 50, 56, 0.3);
+              --link-blue: #016BF8;
+              --schema-lines-color: #001E2B;
+
+              --type-name-color: #1C2D38;
+              --type-prefix-color: rgba(28, 45, 56, 0.9);
+
+              --responses-success-color: #00684A;
+              --responses-success-bg: #E3FCF7;
+
+              --responses-error-color: #DB3030;
+              --responses-error-bg: #FFEAE5;
+
+              --http-get-bg: #E1F7FF;
+              --http-get-border: #C3E7FE;
+              --http-get-color: #1254B7;
+
+              --http-post-bg: #E3FCF7;
+              --http-post-border: #C0FAE6;
+              --http-post-color: #00684A;
+
+              --http-patch-bg: #FEF7DB;
+              --http-patch-border: #FFEC9E;
+              --http-patch-color: #944F01;
+
+              --http-put-bg: #FEF7DB;
+              --http-put-border: #FFEC9E;
+              --http-put-color: #944F01;
+
+              --http-delete-bg: #FFEAE5;
+              --http-delete-border: #FFCDC7;
+              --http-delete-color: #970606;
+
+              --gray-pill-bg: #F9FBFA;
+              --gray-pill-border: #E8EDEB;
+              --gray-pill-color: #1C2D38;
+
+              --blue-pill-bg: #E1F7FF;
+              --blue-pill-border: #C3E7FE;
+              --blue-pill-color: #016BF8;
+
+              --require-label-color: #DB3030;
+              --securities-col-bg: rgb(245, 245, 245);
+
+              --typography-code-color: #1C2D38;
+              --typography-code-bg: #F9FBFA;
             }
 
             .dark-theme {
+              --middle-panel-bg-color: #001E2B;
               --sidebar-bg-color: #112733;
-              --darken-tenth-sidebar-bg-color: #040a0d;
-              --lighten-tenth-sidebar-bg-color: #1e4459;
-              --search-input-border-bottom: #1e4459;
+              --right-panel-bg-color: #001E2B;
               --sidebar-text-color: #E8EDEB;
-              --text-primary-color: #C1C7C6;
+              --text-primary-color: #E8EDEB;
+              --text-secondary-color: #f7f7f7;
+              --api-header-color: #E8EDEB;
+
+              --resource-version-pill-bg: #1C2D38;
+              --resource-version-pill-color: #E8EDEB;
+              --download-btn-border-color: #5C6C75;
+
+              --colors-primary-main: #E8EDEB;
+              --colors-primary-main-light: #afc0b9;
+              --colors-primary-main-dark: #fff;
+
+              --colors-success-main: #71F6BA;
+              --colors-success-main-light: #00684A;
+              --colors-success-main-dark: #023430;
+
+              --absolute-border-color: #3D4F58;
+
+              --sidebar-hover: #1C2D38;
+              --sidebar-active-bg: #023430;
+              --sidebar-active-color: #E3FCF7;
+              --sidebar-hl: #3D4F58;
+              --back-btn-label-color: #889397;
+
+              --underlined-header-color: #C1C7C6;
+              --underlined-header-border-color: #C1C7C6;
+              --link-blue: #0498EC;
+              --schema-lines-color: #889397;
+
+              --type-name-color: #E8EDEB;
+              --type-prefix-color: rgba(232,237,235,0.9);
+
+              --responses-success-color: #C0FAE6;
+              --responses-success-bg: #023430;
+
+              --responses-error-color: #FFCDC7;
+              --responses-error-bg: #5B0000;
+
+              --http-get-bg: #083C90;
+              --http-get-border: #1254B7;
+              --http-get-color: #C3E7FE;
+
+              --http-post-bg: #023430;
+              --http-post-border: #00684A;
+              --http-post-color: #00ED64;
+
+              --http-patch-bg: #4C2100;
+              --http-patch-border: #944F01;
+              --http-patch-color: #FFEC9E;
+
+              --http-put-bg: #4C2100;
+              --http-put-border: #944F01;
+              --http-put-color: #FFEC9E;
+
+              --http-delete-bg: #5B0000;
+              --http-delete-border: #970606;
+              --http-delete-color: #FFCDC7;
+
+              --gray-pill-bg: #5c6c75;
+              --gray-pill-border: #889397;
+              --gray-pill-color: #f9fbfa;
+
+              --blue-pill-bg: #083C90;
+              --blue-pill-border: #1254B7;
+              --blue-pill-color: #C3E7FE;
+
+              --require-label-color: #FF6960;
+              --securities-col-bg: #1C2D38;
+
+              --typography-code-color: #f9fbfa;
+              --typography-code-bg: #5c6c75;
             }
           </style>
           `

src/common-elements/Dropdown/styled.ts

@@ -96,5 +96,5 @@ export const MimeLabel = styled.span`
   margin-left: 10px;
   text-transform: none;
   font-size: 0.929em;
-  color: black;
+  color: var(--text-primary-color);
 `;

src/common-elements/fields.ts

@@ -1,6 +1,3 @@
-import { transparentize } from 'polished';
-import { palette } from '@leafygreen-ui/palette';
-
 import styled, { extensionsHook, css } from '../styled-components';
 import { PropertyNameCell } from './fields-layout';
 import { ShelfIcon } from './shelfs';
@@ -56,7 +53,7 @@ export const FieldLabel = styled.span`
 `;
 
 export const TypePrefix = styled(FieldLabel)`
-  color: ${props => transparentize(0.1, props.theme.schema.typeNameColor)};
+  color: var(--type-prefix-color);
 `;
 
 export const TypeName = styled(FieldLabel)`
@@ -88,7 +85,7 @@ export const RecursiveLabel = styled(FieldLabel)`
 `;
 
 export const PatternLabel = styled(FieldLabel)`
-  color: ${palette.gray.dark3};
+  color: var('--text-primary-color');
   &::before,
   &::after {
     font-weight: bold;
@@ -99,11 +96,11 @@ export const ExampleValue = styled(FieldLabel)`
   border-radius: 2px;
   word-break: break-word;
   ${({ theme }) => `
-    background-color: ${palette.gray.light3};
-    color: ${palette.gray.dark3};
+    background-color: var(--gray-pill-bg);
+    color: var(--gray-pill-color);
 
     padding: 0 ${theme.spacing.unit}px;
-    border: 1px solid ${palette.gray.light2};
+    border: 1px solid var(--gray-pill-border);
     font-family: ${theme.typography.code.fontFamily};
 }`};
   & + & {
@@ -117,12 +114,12 @@ export const ExtensionValue = styled(ExampleValue)``;
 export const ConstraintItem = styled(FieldLabel)`
   border-radius: 2px;
   ${({ theme }) => `
-    background-color: ${palette.blue.light3};
-    color: ${palette.blue.base};
+    background-color: var(--blue-pill-bg);
+    color: var(--blue-pill-color);
 
     margin: 0 ${theme.spacing.unit}px;
     padding: 0 ${theme.spacing.unit}px;
-    border: 1px solid ${palette.blue.light2};
+    border: 1px solid var(--blue-pill-border);
 }`};
   & + & {
     margin-left: 0;

src/common-elements/headers.ts

@@ -48,9 +48,9 @@ export const RightPanelHeader = styled.h3`
 `;
 
 export const UnderlinedHeader = styled.h5`
-  border-bottom: 1px solid rgba(38, 50, 56, 0.3);
+  border-bottom: 1px solid var(--underlined-header-border-color);
   margin: 1em 0 1em 0;
-  color: rgba(38, 50, 56, 0.5);
+  color: var(--underlined-header-color);
   font-weight: normal;
   text-transform: uppercase;
   font-size: 0.929em;

src/common-elements/panels.ts

@@ -4,6 +4,7 @@ import styled, { media } from '../styled-components';
 export const MiddlePanel = styled.div<{ compact?: boolean }>`
   width: calc(100% - ${props => props.theme.rightPanel.width});
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
+  background: var(--middle-panel-bg-color);
 
   ${({ compact, theme }) =>
     media.lessThan('medium', true)`

src/common-elements/schema.ts

@@ -1,5 +1,5 @@
 import styled from '../styled-components';
-import { darken } from 'polished';
+import { darken, cssVar } from 'polished';
 import { deprecatedCss } from './mixins';
 
 export const OneOfList = styled.div`
@@ -38,7 +38,7 @@ export const OneOfButton = styled.button<{ active: boolean; deprecated: boolean
       background-color: ${props.theme.colors.primary.main};
       &:focus {
         box-shadow: none;
-        background-color: ${darken(0.15, props.theme.colors.primary.main)};
+        background-color: ${darken(0.15, cssVar('--colors-primary-main', '#001E2B') as string)};
       }
       `;
     } else {

src/components/ApiInfo/ApiInfo.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { AppStore } from '../../services/AppStore';
 
-import { MiddlePanel, Row, Section } from '../../common-elements/';
+import { DarkRightPanel, MiddlePanel, Row, Section } from '../../common-elements/';
 import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Markdown } from '../Markdown/Markdown';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';
@@ -115,6 +115,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
             <Markdown source={store.spec.info.description} data-role="redoc-description" />
             {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
           </MiddlePanel>
+          <DarkRightPanel></DarkRightPanel>
         </Row>
       </Section>
     );

src/components/ApiInfo/styled.elements.ts

@@ -1,4 +1,3 @@
-import { palette } from '@leafygreen-ui/palette';
 import { H1, MiddlePanel } from '../../common-elements';
 import styled, { extensionsHook } from '../../styled-components';
 
@@ -9,7 +8,7 @@ export const ApiInfoWrap = MiddlePanel;
 export const ApiHeader = styled(H1)`
   margin-top: 0;
   margin-bottom: 0.5em;
-  color: ${palette.green.dark2};
+  color: var(--api-header-color);
   font-family: 'MongoDB Value Serif';
   font-size: 32px;
   font-weight: 400;
@@ -21,12 +20,13 @@ export const ApiHeader = styled(H1)`
 export const ResourceVersionPill = styled.p`
   width: fit-content;
   padding: 1px 10px;
-  background-color: ${palette.gray.light2};
+  background-color: var(--resource-version-pill-bg);
+  color: var(--resource-version-pill-color);
   border-radius: 0.5rem;
 `;
 
 export const DownloadButton = styled.a`
-  border: 1px solid ${props => props.theme.colors.primary.main};
+  border: 1px solid var(--download-btn-border-color);
   color: ${props => props.theme.colors.primary.main};
   font-weight: normal;
   margin-left: 0.5em;

src/components/Redoc/Redoc.tsx

@@ -12,6 +12,7 @@ import { ContentItems } from '../ContentItems/ContentItems';
 import { SideMenu, SideMenuBackButton } from '../SideMenu';
 import { StickyResponsiveSidebar } from '../StickySidebar/StickyResponsiveSidebar';
 import {
+  AbsoluteBorder,
   ApiContentWrap,
   BackgroundStub,
   DarkModeSwitchContainer,
@@ -152,6 +153,7 @@ export class Redoc extends React.Component<RedocProps, { darkMode: boolean }> {
                 />
                 <ContentItems items={menu.items as any} />
               </ApiContentWrap>
+              <AbsoluteBorder />
               <BackgroundStub />
             </RedocWrap>
             <UnifiedFooter hideLocale={true} />

src/components/Redoc/styled.elements.tsx

@@ -58,6 +58,7 @@ export const ApiContentWrap = styled.div`
   position: relative;
   overflow: hidden;
   width: calc(100% - ${props => props.theme.sidebar.width});
+  background: var(--middle-panel-bg-color);
   ${media.lessThan('small', true)`
     width: 100%;
   `};
@@ -83,3 +84,23 @@ export const BackgroundStub = styled.div`
     display: none;
   `};
 `;
+
+export const AbsoluteBorder = styled.div`
+  background: ${({ theme }) => theme.rightPanel.backgroundColor};
+  position: absolute;
+  top: 0;
+  border-left: 1px solid var(--absolute-border-color);
+  height: 100%;
+  z-index: 2;
+  right: ${({ theme }) => {
+    if (theme.rightPanel.width.endsWith('%')) {
+      const percents = parseInt(theme.rightPanel.width, 10);
+      return `calc((100% - ${theme.sidebar.width}) * ${percents / 100})`;
+    } else {
+      return theme.rightPanel.width;
+    }
+  }};
+  ${media.lessThan('medium', true)`
+    display: none;
+  `};
+`;

src/components/SearchBox/styled.elements.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { darken } from 'polished';
+import { cssVar, darken } from 'polished';
 import styled from '../../styled-components';
 import { MenuItemLabel } from '../SideMenu/styled.elements';
 
@@ -17,7 +17,7 @@ export const SearchInput = styled.input.attrs(() => ({
   padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
     ${props => props.theme.spacing.unit * 4}px;
   border: 0;
-  border-bottom: 1px solid var(--search-input-border-bottom);
+  border-bottom: 1px solid var(--sidebar-hl);
   font-family: ${({ theme }) => theme.typography.fontFamily};
   font-weight: bold;
   font-size: 13px;
@@ -56,8 +56,8 @@ export const SearchResultsBox = styled.div`
   color: ${props => props.theme.sidebar.textColor};
   min-height: 150px;
   max-height: 250px;
-  border-top: var(--darken-tenth-sidebar-bg-color);
-  border-bottom: var(--darken-tenth-sidebar-bg-color);
+  border-top: ${darken(0.1, cssVar('--sidebar-bg-color', '#F9FBFA') as string)};
+  border-bottom: ${darken(0.1, cssVar('--sidebar-bg-color', '#F9FBFA') as string)};
   margin-top: 10px;
   line-height: 1.4;
   font-size: 0.9em;
@@ -72,7 +72,7 @@ export const SearchResultsBox = styled.div`
 
     &:hover,
     &.active {
-      background-color: var(--darken-tenth-sidebar-bg-color);
+      background-color: ${darken(0.1, cssVar('--sidebar-bg-color', '#F9FBFA') as string)};
     }
 
     > svg {