feat(theme): Add new modern theme

Intent to ship new 'modern' theme
naver · Oct 19, 2023 · b0f1aa7 · b0f1aa7
1 parent 18b2b66
commit b0f1aa7
Show file tree

Hide file tree

Showing 5 changed files with 443 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -98,7 +98,6 @@ You can download the compressed files for production
 - https://naver.github.io/billboard.js/release/latest/dist/theme/datalab.css
 - https://naver.github.io/billboard.js/release/latest/dist/theme/datalab.min.css
 
-
 #### dark
 - https://naver.github.io/billboard.js/release/latest/dist/theme/dark.css
 - https://naver.github.io/billboard.js/release/latest/dist/theme/dark.min.css
@@ -111,6 +110,10 @@ You can download the compressed files for production
 - https://naver.github.io/billboard.js/release/latest/dist/theme/graph.css
 - https://naver.github.io/billboard.js/release/latest/dist/theme/graph.min.css
 
+#### modern
+- https://naver.github.io/billboard.js/release/latest/dist/theme/modern.css
+- https://naver.github.io/billboard.js/release/latest/dist/theme/modern.min.css
+
 </details>
 
 ### Nightly version

diff --git a/config/webpack/development.cjs b/config/webpack/development.cjs
@@ -42,6 +42,10 @@ module.exports = (common, env) => {
 		config.entry = plugin.entry;
 		config.output = plugin.output;
 		config.externals = plugin.externals;
+	} else {
+		config.entry = {
+			billboard: "./src/index.ts"
+		};
 	}
 
 	return env.PLUGIN ? mergeWithCustomize({

diff --git a/demo/index.html b/demo/index.html
@@ -102,6 +102,7 @@ <h2 class="sidebar-brand">billboard.js</h2>
                 <option value="dark">dark</option>
                 <option value="insight">insight</option>
                 <option value="graph">graph</option>
+                <option value="modern">modern</option>
             </select>
         </form>
         <p id="launch" title="To open as new window, hold the 'Alt(Win)/option(Mac)' key while clicking.">

diff --git a/demo/themes/index.html b/demo/themes/index.html
@@ -24,7 +24,8 @@ <h1>Themes Colors</h1>
 			insight: "#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;",
 			graph: "#65CFC2;#D0A45F;#64A4F5;#EF65A2;#A377FE;#8AAEC7;#FF7E5A;#898EFE;#FFAC35;#70B0FF;",
 			datalab: "#2ac4b3;#feaf29;#ff617b;#73a2ef;#b180d0;#3064cf;#d0a45f;#8aaec7;#ef65a2;#8aaec7;",
-			dark: "#4a7fff;#b02c2c;#1ca46c;#b47300;#49baf3;#ed7e13;#cfaa00;#a6cd19;#dccb52;#f5d194;"
+			dark: "#4a7fff;#b02c2c;#1ca46c;#b47300;#49baf3;#ed7e13;#cfaa00;#a6cd19;#dccb52;#f5d194;",
+			modern: "#7ea9fa;#ffcd1e;#d33043;#41c464;#c86b74;#006bc2;#2a7e41;#f27c00;#c159ff;#bed017;"
 		}
 
 		let html = "";