feat(client): add webpack and babel themes

Author: hiroppy

packages/client/assets/style/code.css

@@ -1,6 +1,9 @@
-@import './variable';
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
 
+:root {
+  --color-white: #f5f5f5;
+}
+
 pre {
   background: var(--color-white);
   border-radius: 10px;

packages/client/assets/style/commentsList.css

@@ -1,5 +1,3 @@
-@import './variable';
-
 .comments-list {
   background: #333;
   height: 100vh;

packages/client/assets/style/common.css

@@ -1,13 +1,12 @@
 @import 'modern-normalize/modern-normalize.css';
 @import 'swiper/swiper.min.css';
 @import 'swiper/components/a11y/a11y.min.css';
-@import './variable.css';
 @import './customize.css';
 @import './sidebar.css';
 @import './grid.css';
 
 html {
-  color: var(--color-black);
+  color: #333;
   font-size: 62.5%;
 }
 

packages/client/assets/style/host.css

@@ -1,4 +1,8 @@
-@import './variable';
+:root {
+  --color-main: #3498db;
+  --color-white: #f5f5f5;
+  --color-black: #333;
+}
 
 .disabled {
   pointer-events: none;

packages/client/assets/style/sidebar.css

@@ -1,7 +1,7 @@
-@import './variable';
-
 :root {
   --color-cyan: #7bb7fa;
+  --color-white: #f5f5f5;
+  --color-black: #373a47;
 }
 
 .btn-sidebar {
@@ -21,7 +21,7 @@
 }
 
 .bm-menu {
-  background: #373a47;
+  background: var(--color-black);
   padding: 16px;
 }
 

packages/client/assets/style/themes/babel.css

@@ -0,0 +1,8 @@
+/* https://babeljs.io/ */
+
+:root {
+  --title-color: #f5da55;
+  --base-color: hsla(0, 0%, 100%, 0.8);
+  --background-color: #3b3c38;
+  --link-color: rgba(245, 218, 85, 0.15);
+}

packages/client/assets/style/themes/default.css

@@ -0,0 +1,6 @@
+:root {
+  --title-color: #464646;
+  --base-color: #545454;
+  --background-color: #f5f5f5;
+  --link-color: #3498db;
+}

packages/client/assets/style/themes/webpack.css

@@ -0,0 +1,8 @@
+/* https://webpack.js.org/ */
+
+:root {
+  --title-color: #8dd6f9;
+  --base-color: #fff;
+  --background-color: #2b3a42;
+  --link-color: #86a5ba;
+}

packages/client/assets/style/variable.css

@@ -1,5 +1,3 @@
-@import './variable.css';
-
 .fusuma-presenter-view {
   height: 100vh;
   width: 100vw;

packages/client/assets/style/view.css

@@ -1,25 +1,42 @@
-:root {
-  --color-white: #f5f5f5;
-  --color-black: #333;
-  --color-cyan: #7bb7fa;
-}
+/* themes */
+@import '@fusuma/client/assets/style/themes/default.css';
+/* @import '@fusuma/client/assets/style/themes/babel.css'; */
+/* @import '@fusuma/client/assets/style/themes/webpack.css'; */
+
+/* set custom colors */
+/* :root {
+} */
 
 html {
   /* set the base font-size */
   font-size: 62.5%;
 }
 
+h1,
+h2 {
+  color: var(--title-color);
+}
+
+a {
+  color: var(--link-color);
+}
+
 .slide-background {
   /* set the default background */
-  background: var(--color-white);
+  background: var(--background-color);
 
   /* set the default font-color */
-  color: var(--color-black);
+  color: var(--base-color);
 }
 
-a {
-  /* set the default link color */
-  color: var(--color-cyan);
+.slide-box {
+  /* set the default align */
+  text-align: center;
+
+  & > * {
+    /* set the slide width: the default is 80% */
+    /* width: 100px; */
+  }
 }
 
 /* https://hiroppy.github.io/fusuma/docs/guides/slide-syntax#declaring-section-title */

packages/fusuma/src/configs/templates/style.css

@@ -1,10 +1,15 @@
+/* @import '../../packages/client/assets/style/themes/default.css'; */
+@import '../../packages/client/assets/style/themes/webpack.css';
+
 @font-face {
   font-family: Stratum;
   src: url('./assets/StratumNo1.ttf');
 }
 
+/* background: #f5f5f5; */
 .slide-background {
-  background: #f5f5f5;
+  background: var(--background-color);
+  color: var(--base-color);
 }
 
 .slide-box {
@@ -15,6 +20,15 @@
   }
 }
 
+h1,
+h2 {
+  color: var(--title-color);
+}
+
+a {
+  color: var(--link-color);
+}
+
 .file-loader-font {
   font-family: Stratum;
   font-size: 2rem;