start working on dark mode

hawkrives · Oct 17, 2018 · 79ac5ec · 79ac5ec
1 parent 51fa665
commit 79ac5ec
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 19 deletions.
diff --git a/modules/gob-web/app.js b/modules/gob-web/app.js
@@ -17,8 +17,6 @@ let GlobalStyle = createGlobalStyle`
 
     html {
         font-family: var(--sans-font-stack);
-        color: var(--text-color);
-
         box-sizing: border-box;
 
         min-height: 100vh;
@@ -31,6 +29,7 @@ let GlobalStyle = createGlobalStyle`
 
     body {
         background: var(--background);
+        color: var(--text-color);
         height: 100%;
     }
 

diff --git a/modules/gob-web/components/button.js b/modules/gob-web/components/button.js
@@ -59,7 +59,8 @@ export const RaisedButton = styled(BaseButton)`
 
 	&[disabled] {
 		cursor: default;
-		color: var(--gray-500);
+		background-color: var(--disabled-background);
+		color: var(--disabled-foreground);
 	}
 `
 
@@ -80,7 +81,7 @@ export const FlatButton = styled(BaseButton)`
 
 	&[disabled] {
 		cursor: default;
-		color: var(--disabled-foreground--light);
+		color: var(--disabled-foreground);
 
 		&:hover,
 		&:focus,

diff --git a/modules/gob-web/components/card.js b/modules/gob-web/components/card.js
@@ -4,6 +4,6 @@ import styled from 'styled-components'
 
 export const Card = styled.div`
 	box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
-	background-color: white;
+	background-color: var(--card-background);
 	border-radius: var(--base-border-radius);
 `
diff --git a/modules/gob-web/index.scss b/modules/gob-web/index.scss
diff --git a/modules/gob-web/modules/course-table/semester.js b/modules/gob-web/modules/course-table/semester.js
@@ -44,7 +44,7 @@ const Container = styled.div`
 
 	--background-color: var(--white);
 	--background-color-hover: var(--gray-200);
-	--separator-color: var(--gray-200);
+	--separator-color: rgba(0,0,0,0.4);
 
 	&.loading {
 	}

diff --git a/modules/gob-web/modules/student/student-summary.scss b/modules/gob-web/modules/student/student-summary.scss
@@ -2,22 +2,29 @@
 	text-align: center;
 	hyphens: none;
 	font-variant-numeric: oldstyle-nums tabular-nums;
-	text-shadow: 0 1px rgba(white, 0.5);
 	font-size: 0.85em;
 	padding: calc(var(--block-edge-padding) * 2);
 
 	&.cannot-graduate .graduation-message {
-		color: var(--deep-orange-500);
+		body:not(.dark) & {
+			color: var(--deep-orange-500);
+		}
 	}
 
 	&.can-graduate .graduation-message {
-		color: var(--light-green-800);
+		body:not(.dark) & {
+			color: var(--light-green-800);
+		}
 	}
 
 	&.can-graduate {
-		background-color: var(--light-green-50);
+		body:not(.dark) & {
+			background-color: var(--light-green-50);
+		}
 		&::selection {
-			background-color: var(--light-green-900);
+			body:not(.dark) & {
+				background-color: var(--light-green-900);
+			}
 		}
 	}
 
@@ -31,6 +38,9 @@
 
 	.student-summary--header {
 		color: var(--black);
+		body.dark & {
+			color: var(--inherit);
+		}
 
 		margin-bottom: calc(var(--block-edge-padding) * 2);
 		font-style: italic;

diff --git a/modules/gob-web/styles/css-variables.scss b/modules/gob-web/styles/css-variables.scss
@@ -30,4 +30,19 @@
 	--semester-spacing: 4px;
 	--semester-side-padding: calc(var(--block-edge-padding) * 1.5);
 	--semester-padding: var(--block-edge-padding) var(--semester-side-padding);
+
+	--disabled-foreground: var(--disabled-foreground--light);
+	--disabled-background: var(--disabled-background--light);
+
+	--card-background: var(--white);
+}
+
+body.dark {
+	--background: #0e1e25;
+	--text-color: rgb(250,250,250);
+
+	--disabled-foreground: var(--disabled-foreground--dark);
+	--disabled-background: var(--disabled-background--dark);
+
+	--card-background: #717e83;
 }
diff --git a/modules/gob-web/styles/mixins.scss b/modules/gob-web/styles/mixins.scss
@@ -7,7 +7,7 @@
 
 @mixin card() {
 	box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
-	background-color: var(--background-color, white);
+	background-color: var(--card-background);
 	border-radius: var(--base-border-radius);
 }
 

diff --git a/modules/gob-web/theme/mixins.js b/modules/gob-web/theme/mixins.js
@@ -8,7 +8,7 @@ export const materialShadow = `
 `
 
 export const baseCard = css`
-	background-color: var(--background-color, white);
+	background-color: var(--card-background);
 	border-radius: var(--base-border-radius);
 `
 

diff --git a/modules/gob-web/webpack.config.js b/modules/gob-web/webpack.config.js
@@ -35,7 +35,9 @@ const html = ({cssHref, scriptSrc}) => {
 ${cssLink}
 <script async type="module" src="${scriptSrc}"></script>
 
+<body class="dark">
 <main id="gobbldygook"></main>
+</body>
 </html>
 `.trim()
 }