Tema dosyaları güncellemesi, logo ignore

ForFansubs · Feb 15, 2020 · 9192e88 · 9192e88
1 parent 6e9bdba
commit 9192e88
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 176 deletions.
diff --git a/src/config/theming/dark/extra.js b/src/config/theming/dark/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/theming/dark/index.js b/src/config/theming/dark/index.js
@@ -1,107 +1,111 @@
-const palette = {
-    primary: { main: '#212121' },
-    secondary: { main: 'rgb(255,127,80)' },
-    background: {
-        default: "#121212",
-        level1: "#212121",
-        level2: "#333",
-        paper: "#424242"
-    },
-    contrastThreshold: 3,
-    type: "dark"
-}
+//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 props = {
-    MuiTypography: {
-        variantMapping: {
-            body2: 'span',
-        },
-    },
-}
+import custom from './extra'
+import merge from 'lodash-es/merge'
 
-const typography = {
-    h1: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: "4.8rem",
-        lineHeight: 1.2
-    },
-    h2: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: "3rem",
-        lineHeight: 1.2
-    },
-    h3: {
-        fontFamily: `'Rubik', sans-serif`,
-        fontWeight: "bold",
-        fontSize: "2.4rem",
-        lineHeight: 1.2
-    },
-    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
+const theme = {
+    palette: {
+        primary: { main: '#212121' },
+        secondary: { main: 'rgb(255,127,80)' },
+        background: {
+            default: "#121212",
+            level1: "#212121",
+            level2: "#333",
+            paper: "#424242"
+        },
+        contrastThreshold: 3,
+        type: "dark"
     },
-    subtitle1: {
-        lineHeight: 1.25
-    }
-}
-
-const overrides = {
-    // Style sheet name ⚛️
-    MuiPaper: {
-        root: {
-            backgroundColor: palette.background.level1
-        }
+    props: {
+        MuiTypography: {
+            variantMapping: {
+                body2: 'span',
+            },
+        },
     },
-    MuiAppBar: {
-        colorPrimary: {
-            backgroundColor: palette.background.level2,
-            color: "white"
+    typography: {
+        h1: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: "4.8rem",
+            lineHeight: 1.2
+        },
+        h2: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: "3rem",
+            lineHeight: 1.2
+        },
+        h3: {
+            fontFamily: `'Rubik', sans-serif`,
+            fontWeight: "bold",
+            fontSize: "2.4rem",
+            lineHeight: 1.2
+        },
+        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
         }
     },
-    MuiButton: {
-        outlinedSecondary: {
-            color: palette.secondary.main
+    overrides: {
+        MuiPaper: {
+            root: {
+                backgroundColor: '#212121'
+            }
+        },
+        MuiAppBar: {
+            colorPrimary: {
+                backgroundColor: '#333',
+                color: "white"
+            }
+        },
+        MuiButton: {
+            outlinedSecondary: {
+                color: 'rgb(255,127,80)'
+            }
+        },
+        MuiCircularProgress: {
+            svg: {
+                color: '#333'
+            }
         }
     },
-    MuiCircularProgress: {
-        svg: {
-            color: palette.background.level2
+    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';
-
-const data = { palette, typography, overrides, transitions, props, themeName }
+merge(theme, custom)
 
-export default data
+export default theme
diff --git a/src/config/theming/light/extra.js b/src/config/theming/light/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