Merge pull request #187 from microsoft/dark

Adds dark mode to the site

packages/sandbox/src/index.ts

@@ -1,6 +1,6 @@
 import { createCompilerHost } from './createCompilerHost'
 import { detectNewImportsToAcquireTypeFor } from './typeAcquisition'
-import { sandboxTheme } from './theme'
+import { sandboxTheme, sandboxThemeDark } from './theme'
 import { TypeScriptWorker } from './tsWorker'
 import {
   getDefaultSandboxCompilerOptions,
@@ -105,6 +105,7 @@ export const createTypeScriptSandbox = (
 
   const model = monaco.editor.createModel(defaultText, language, filePath)
   monaco.editor.defineTheme('sandbox', sandboxTheme)
+  monaco.editor.defineTheme('sandbox-dark', sandboxThemeDark)
   monaco.editor.setTheme('sandbox')
 
   const monacoSettings = Object.assign({ model }, sharedEditorOptions, config.monacoSettings || {})

packages/sandbox/src/theme.ts

@@ -1,13 +1,7 @@
 const blue = '3771EF'
 const darkerBlue = '1142AF'
-const darkestBlue = '09235D'
-
-const yellow = 'F3DF51'
-const darkYellow = 'AEA811'
-const darkerYellow = '65610A'
 
 const grey = '84864d'
-const green = '12CD0E'
 const greenDark = '10990D'
 const greenLight = '54F351'
 
@@ -69,3 +63,18 @@ export const sandboxTheme: import('monaco-editor').editor.IStandaloneThemeData =
     editorSelectionHighlight: '#ADD6FF4D',
   },
 }
+
+export const sandboxThemeDark: import('monaco-editor').editor.IStandaloneThemeData = {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    { token: 'constant', foreground: '44ee11' },
+    { token: 'comment', foreground: grey },
+    { token: 'number', foreground: greenDark },
+    { token: 'regexp', foreground: greenLight },
+    { token: 'type', foreground: darkerBlue },
+  ],
+  colors: {
+    // 'editor.background': '#313131',
+  },
+}

packages/typescriptlang-org/backstop.json

@@ -1,24 +1,10 @@
 {
   "id": "backstop_default",
   "viewports": [
-    {
-      "label": "phone",
-      "width": 320,
-      "height": 480
-    },
-    {
-      "label": "tablet",
-      "width": 1024,
-      "height": 768
-    },
-    {
-      "label": "computer",
-      "width": 1280,
-      "height": 900
-    }
+    { "label": "phone", "width": 320, "height": 480 },
+    { "label": "tablet", "width": 1024, "height": 768 },
+    { "label": "computer", "width": 1280, "height": 900 }
   ],
-  "onBeforeScript": "puppet/onBefore.js",
-  "onReadyScript": "puppet/onReady.js",
   "scenarios": [
     {
       "label": "Index",
@@ -36,7 +22,13 @@
       "misMatchThreshold": 0.1,
       "selectors": ["viewport"]
     },
-
+    {
+      "label": "Old Handbook Example Dark",
+      "url": "file:///Users/orta/dev/typescript/new-typescript-website/packages/typescriptlang-org/public/docs/handbook/functions.html",
+      "misMatchThreshold": 0.1,
+      "selectors": ["viewport"],
+      "onReadyScript": "../../../scripts/backstop/makeDarkMode.js"
+    },
     {
       "label": "TSConfig Example",
       "url": "file:///Users/orta/dev/typescript/new-typescript-website/packages/typescriptlang-org/public/en/tsconfig/index.html",
@@ -53,9 +45,7 @@
   },
   "report": ["browser"],
   "engine": "puppeteer",
-  "engineOptions": {
-    "args": ["--no-sandbox"]
-  },
+  "engineOptions": { "args": ["--no-sandbox"] },
   "asyncCaptureLimit": 5,
   "asyncCompareLimit": 50,
   "debug": false,

packages/typescriptlang-org/gatsby-ssr.js

@@ -14,5 +14,5 @@ export const replaceRenderer = ({
 
   replaceBodyHTMLString(html)
 
-  setHeadComponents([<style dangerouslySetInnerHTML={{ __html: css }} />])
+  // setHeadComponents([<style dangerouslySetInnerHTML={{ __html: css }} />])
 }

packages/typescriptlang-org/package.json

@@ -9,7 +9,7 @@
     "develop": "gatsby develop",
     "clean": "gatsby clean",
     "bootstrap": "echo 'NOOP'",
-    "update-snapshots": "backstop test; backstop approve",
+    "update-snapshots": "node scripts/updateBackstopJSON.js && backstop test && backstop approve",
     "update-static-assets": "node scripts/downloadPlaygroundAssets.js && node scripts/downloadSearchAssets.js",
     "start": "npm run develop",
     "serve": "gatsby serve",

packages/typescriptlang-org/scripts/backstop/makeDarkMode.js

@@ -0,0 +1,11 @@
+module.exports = async (page, scenario) => {
+  console.log("SWITCHING TO DARK for " + scenario.label)
+
+  // await page.emulateMediaFeatures([
+  //   {
+  //     name: "prefers-color-scheme",
+  //     value: "dark",
+  //   },
+  // ])
+  // await wait()
+}

packages/typescriptlang-org/scripts/updateBackstopJSON.js

@@ -0,0 +1,26 @@
+// @ts-check
+
+// The backstop JSON file requires setting the right paths for
+// screenshots - this updates them to your computer. A bit lossy
+// for the git history but acceptable given that mainly orta will
+// be running the snapshots.
+
+const { writeFileSync, readFileSync } = require("fs")
+const { join } = require("path")
+const { format } = require("prettier")
+
+const backstopPath = join(__dirname, "..", "backstop.json")
+const backstopJSON = JSON.parse(readFileSync(backstopPath, "utf8"))
+
+// e.g. file:///Users/ortatherox/dev/typescript/new-website/packages/typescriptlang-org/public/index.html
+const newPublicRoot = join(__dirname, "..", "public")
+backstopJSON.scenarios.forEach(scenario => {
+  const fileToCheck = scenario.url.split("/public/")[1]
+  const newFileURL = `file://${newPublicRoot}/${fileToCheck}`
+  scenario.url = newFileURL
+})
+
+writeFileSync(
+  backstopPath,
+  format(JSON.stringify(backstopJSON), { filepath: backstopPath })
+)

packages/typescriptlang-org/src/components/ShowExamples.scss

@@ -1,13 +1,21 @@
+@import "../style/globals.scss";
+
 // This is the visual aspect of the popover ( the white bit )
 // the non-visible layout is above in #playground-samples-popover
 .examples {
-  background-color: white;
+  background-color: $ts-light-bg-grey-highlight-color;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $ts-dark-bg-for-foreground-color;
+    color: white;
+  }
+
   padding: 20px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   height: 450px;
 
   a {
-    color: #187abf;
+    color: $ts-main-blue-color;
   }
 
   // The titles of the sections
@@ -36,13 +44,16 @@
       padding-left: 0;
       margin-top: 0;
       padding-top: 0;
-      margin-right: 1em;
+      // margin-right: 1em;
       border: none;
       background-color: transparent;
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
 
     button.section-name.selected {
-      border-bottom: #187abf 2px solid;
+      border-bottom: $ts-main-blue-color 2px solid;
     }
   }
 
@@ -58,15 +69,15 @@
 
     > p > a {
       display: inline-block;
-      color: #187abf;
+      color: $ts-main-blue-color;
       padding: 0;
     }
 
     // Each smaller section inside the largest subsection
     .section-list {
       display: flex;
       flex-direction: column;
-      width: 240px;
+      width: 260px;
       margin-top: 1.5em;
 
       h4 {
@@ -81,6 +92,7 @@
           padding: 0;
           margin: 0;
           position: relative;
+          width: auto !important;
 
           .section-list a {
             display: block;
@@ -96,7 +108,7 @@
             }
 
             &.highlight {
-              border-left: #187abf 2px solid;
+              border-left: $ts-main-blue-color 2px solid;
               padding-left: 8px;
             }
           }
@@ -110,10 +122,10 @@
             border-radius: 0.5em;
 
             &.done {
-              background-color: #187abf;
+              background-color: $ts-main-blue-color;
             }
             &.changed {
-              border: #187abf 1px solid;
+              border: $ts-main-blue-color 1px solid;
             }
           }
         }

packages/typescriptlang-org/src/components/layout.tsx

@@ -8,6 +8,8 @@ type LayoutProps = Props & {
   children: any
 }
 
+import "./layout/main.scss"
+
 export const Layout = (props: LayoutProps) => {
   const { children, locale } = props
   let messages = require("../copy/en").lang

packages/typescriptlang-org/src/components/layout/Sidebar.scss

@@ -1,14 +1,18 @@
-$width-for-small-devices: 800px;
-$z-index-for-site-nav: 101;
-$z-index-for-handbook-nav: 100;
+@import "../../style/globals.scss";
 
 #small-device-button-sidebar {
   display: none;
 }
 
 nav#sidebar {
   min-width: 16rem;
-  background-color: #eeeeee;
+  background-color: $ts-light-bg-grey;
+  color: black;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $ts-dark-bg-secondary;
+    color: white;
+  }
 
   /* "Basically a section of documentation */
   > ul {
@@ -21,6 +25,10 @@ nav#sidebar {
       padding: 0;
       min-height: 2.5rem;
       border-bottom: 1px solid #dfdfdf;
+
+      @media (prefers-color-scheme: dark) {
+        border-color: #3e3e3e;
+      }
       font-weight: 400;
       font-size: 1rem;
 
@@ -38,10 +46,27 @@ nav#sidebar {
         border: none;
         font-weight: 500;
 
+        color: black;
+        @media (prefers-color-scheme: dark) {
+          color: white;
+        }
+
+        @media (prefers-color-scheme: dark) {
+          .open path,
+          .closed path {
+            stroke: white;
+          }
+        }
+
         &:active,
         &:focus {
           color: black;
           background-color: #dfdfdf;
+
+          @media (prefers-color-scheme: dark) {
+            color: white;
+            background-color: $ts-bg-selection-grey;
+          }
         }
 
         span {
@@ -55,10 +80,14 @@ nav#sidebar {
   // Still looking at the highest level of navigation
   > ul > li {
     &.highlighted {
-      background-color: #e3e8ec;
+      background-color: $ts-barely-blue-highlight;
 
       svg path {
-        stroke: #187abf;
+        stroke: $ts-main-blue-color;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        background-color: $ts-dark-barely-blue-highlight;
       }
     }
 
@@ -95,6 +124,10 @@ nav#sidebar {
       padding-top: 0.5rem;
       padding-left: 1rem;
       padding-bottom: 0.5rem;
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
 
     > li {
@@ -108,21 +141,25 @@ nav#sidebar {
       a:focus,
       a:hover {
         border-left: 2px solid black;
+
+        @media (prefers-color-scheme: dark) {
+          border-color: white;
+        }
         margin-left: 0.5rem;
         margin-right: -0.5rem;
       }
 
       &.highlight a {
-        color: #187abf;
-        border-left: 2px solid #187abf;
+        color: $ts-main-blue-color;
+        border-left: 2px solid $ts-main-blue-color;
         margin-left: 0.5rem;
         margin-right: -0.5rem;
       }
     }
   }
 }
 
-@media (max-width: $width-for-small-devices) {
+@media (max-width: $screen-sm) {
   // This is a button which will scroll off and on with the na
   button#small-device-button-sidebar {
     display: block;
@@ -145,7 +182,7 @@ nav#sidebar {
     padding-top: 2px;
     padding-left: 9px;
 
-    z-index: $z-index-for-site-nav;
+    z-index: $z-index-for-handbook-nav;
 
     // Reset the button
     -webkit-appearance: none;