dark mode styling fixes (#138)

jcockbain · Jan 18, 2021 · 8b57adb · 8b57adb
1 parent 3a6d65c
commit 8b57adb
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 15 deletions.
diff --git a/src/components/contactForm.tsx b/src/components/contactForm.tsx
@@ -14,6 +14,7 @@ const StyledForm = styled.form`
     border: 2px solid ${props => props.theme.formBorder};
     background-color: ${props => props.theme.surface};
     color: ${props => props.theme.onBackground};
+    opacity: ${props => props.theme.textOpacity};
     border-radius: 4px;
     margin: 8px 0;
   }
@@ -25,12 +26,14 @@ const StyledForm = styled.form`
     border: 2px solid ${props => props.theme.formBorder};
     background-color: ${props => props.theme.surface};
     color: ${props => props.theme.onBackground};
+    opacity: ${props => props.theme.textOpacity};
     border-radius: 4px;
     margin: 8px 0;
   }
 
   label {
     color: ${props => props.theme.onBackground};
+    opacity: ${props => props.theme.headerOpacity};
   }
 `
 

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -9,6 +9,7 @@ const FooterContainer = styled.div`
   width: 100%;
   margin-top: 2rem;
   color: ${props => props.theme.onBackground};
+  opacity: ${props => props.theme.headerOpacity};
 `
 
 const Footer = () => {

diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
@@ -31,7 +31,7 @@ const FormContainer = styled.div`
     border-radius: 8px;
     padding: 12px 20px;
     color: ${props => props.theme.onPrimary};
-    background-color: ${props => props.theme.primary};
+    background-color: ${props => props.theme.button};
 
     &:enabled {
       cursor: pointer;

diff --git a/src/styles/components/blog.scss b/src/styles/components/blog.scss
@@ -16,15 +16,4 @@
   background: #f5f2f0 !important;
   color: black;
   font-weight: bold;
-}
-
-.filename {
-  background: black;
-  padding: 0.5rem 1rem 0.75rem;
-  font-size: 0.8rem;
-  color: white;
-  font-weight: bold;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-  margin-bottom: -0.8rem;
-}
+}
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
@@ -18,14 +18,13 @@ interface Props extends PageRendererProps {
 const Date = styled.p`
   margin: 0.5rem 0;
 `
-
 const BlogContent = styled.div`
   margin-top: 1rem;
 
   blockquote {
     padding: 20px;
     margin: 20px 0;
-    border: 1px solid ${props => props.theme.formBorder};
+    border: 1.5px solid ${props => props.theme.formBorder};
     border-radius: 3px;
 
     border-left: 4px solid ${props => props.theme.calloutBorder};
@@ -48,6 +47,18 @@ const BlogContent = styled.div`
   blockquote + blockquote {
     margin-top: -5px;
   }
+
+  .filename {
+    background: black;
+    padding: 0.5rem 1rem 0.75rem;
+    font-size: 0.8rem;
+    color: white;
+    opacity: ${props => props.theme.headerOpacity};
+    font-weight: bold;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    margin-bottom: -0.8rem;
+  }
 `
 
 const BlogPostTemplate = (props: Props) => {

diff --git a/src/themes/dark.ts b/src/themes/dark.ts
@@ -7,6 +7,7 @@ export default {
   onPrimary: `#000000`,
   onSecondary: `#000000`,
   surface: "#1b191f",
+  button: "#616161",
   formBorder: "black",
   navbarColor: "#1b191f",
   onNavbar: `white`,

diff --git a/src/themes/light.ts b/src/themes/light.ts
@@ -7,6 +7,7 @@ export default {
   onPrimary: `#2d2d2d`,
   onSecondary: `#000000`,
   surface: "fafafa",
+  button: "#ffffff",
   formBorder: "#ccc",
   navbarColor: "#fafafa",
   onNavbar: `rgba(0, 0, 0, 0.87)`,