Tema dosyaları güncellemesi, logo ignore

ForFansubs · Feb 15, 2020 · 5b0f86e · 5b0f86e
1 parent 0fcff6f
commit 5b0f86e
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 86 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@
 .pnp.js
 /src/static/logo.png
 /src/static/fullLogo.png
+/src/static/fullLogo-dark.png
 /public/*.png
 /public/*.html
 /public/*.json

diff --git a/src/config/theme/extra.js b/src/config/theme/extra.js
@@ -0,0 +1,17 @@
+//Bu dosyayı temanızı kendi değerlerinizle değiştirmek için kullanabilirsiniz.
+//Değerleri değiştirmek için MUI paketindeki theme objesine bağlı kalarak değişiklik
+//yapmanız gerektiğini unutmayın.
+//Theme object: https://material-ui.com/customization/default-theme/
+//      ÖRNEK
+//      theme = {
+//          palette: {
+//              primary: {
+//                  main: COLORHEXCODE
+//              }
+//          }
+//      }
+const theme = {
+
+}
+
+export default theme
diff --git a/src/config/theme/index.js b/src/config/theme/index.js
@@ -1,100 +1,106 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+//Temayı oluştururken MUI Theme objesi değerlerini kullanarak değişiklikler yapıyoruz. Aşağıda custom olarak
+//değiştirdiğimiz değerler yer alıyor. Custom olarak değişmeyen değerler, index.js'te theme objesi oluşturulurken
+//otomatik olarak oluşturuluyor. Eğer bu değerlerden farklı değerler kullanmak isterseniz ./extra.js içerisinde,
+//anlatıldığı şekilde değişiklik yapabilirsiniz.
 
-const palette = {
-    primary: { main: '#90caf9' },
-    secondary: { main: '#f48fb1' },
-    background: {
-        default: "#121212",
-        level1: "#212121",
-        level2: "#333",
-        paper: "#424242"
-    },
-    contrastThreshold: 3,
-    type: "dark"
-}
+import custom from './extra'
+import merge from 'lodash-es/merge'
+import { createMuiTheme } from '@material-ui/core/styles'
 
-const props = {
-    MuiTypography: {
-        variantMapping: {
-            body2: 'span',
+const theme = {
+    palette: {
+        primary: { main: '#90caf9' },
+        secondary: { main: '#f48fb1' },
+        background: {
+            default: "#121212",
+            level1: "#212121",
+            level2: "#333",
+            paper: "#424242"
         },
+        contrastThreshold: 3,
+        type: "dark"
     },
-}
-
-const typography = {
-    h1: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: "4.8rem",
-        lineHeight: 1.25
-    },
-    h2: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: "3rem"
-    },
-    h3: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: "2.4rem"
-    },
-    h4: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: "1.7rem"
-    },
-    h5: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: "1rem"
-    },
-    h6: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: ".8rem"
-    },
-    body2: {
-        fontFamily: "'Rubik', sans-serif",
-        fontSize: ".8rem",
-        fontWeight: "bold",
-        letterSpacing: "0.0075em",
-        lineHeight: 1.6
+    props: {
+        MuiTypography: {
+            variantMapping: {
+                body2: 'span',
+            },
+        },
     },
-    subtitle1: {
-        lineHeight: 1.25
-    }
-}
-
-const overrides = {
-    // Style sheet name ⚛️
-    MuiPaper: {
-        root: {
-            backgroundColor: palette.background.level1
+    typography: {
+        h1: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: "4.8rem",
+            lineHeight: 1.25
+        },
+        h2: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: "3rem"
+        },
+        h3: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: "2.4rem"
+        },
+        h4: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: "1.7rem"
+        },
+        h5: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: "1rem"
+        },
+        h6: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: ".8rem"
+        },
+        body2: {
+            fontFamily: "'Rubik', sans-serif",
+            fontSize: ".8rem",
+            fontWeight: "bold",
+            letterSpacing: "0.0075em",
+            lineHeight: 1.6
+        },
+        subtitle1: {
+            lineHeight: 1.25
         }
     },
-    MuiFormControl: {
-        root: {
-            marginBottom: "5px"
+    overrides: {
+        // Style sheet name ⚛️
+        MuiPaper: {
+            root: {
+                backgroundColor: "#212121"
+            }
+        },
+        MuiFormControl: {
+            root: {
+                marginBottom: "5px"
+            }
+        },
+        MuiButton: {
+            root: {
+                marginBottom: "5px",
+                marginRight: "5px"
+            }
         }
     },
-    MuiButton: {
-        root: {
-            marginBottom: "5px",
-            marginRight: "5px"
+    transitions: {
+        duration: {
+            short: 400,
+            shorter: 300
+        },
+        easing: {
+            ease: "ease"
         }
-    }
-}
-
-const transitions = {
-    duration: {
-        short: 400,
-        shorter: 300
     },
-    easing: {
-        ease: "ease"
-    }
+    themeName: 'ForFansubs Dark Theme'
 }
 
-const themeName = 'ForFansubs Dark Theme';
+merge(theme, custom)
 
-export default createMuiTheme({ palette, typography, transitions, props, overrides, themeName });
+export default createMuiTheme(theme);