diff --git a/packages/create-vivliostyle-theme/src/cli.ts b/packages/create-vivliostyle-theme/src/cli.ts
index 4847665..45d5300 100644
--- a/packages/create-vivliostyle-theme/src/cli.ts
+++ b/packages/create-vivliostyle-theme/src/cli.ts
@@ -8,7 +8,7 @@ const templateRoot = resolve(__dirname, '../templates');
 
 const caveat = ({ name }: AfterHookOptions) => `
 ${chalk.gray('1.')} cd ${chalk.bold.green(name)}
-${chalk.gray('2.')} edit ${chalk.bold.green('scss/*.scss')}
+${chalk.gray('2.')} edit ${chalk.bold.green('theme.css')}
 ${chalk.gray('3.')} publish to npm (${chalk.cyan('$ npm publish')})
 `;
 
diff --git a/packages/create-vivliostyle-theme/templates/default/.gitignore b/packages/create-vivliostyle-theme/templates/default/.gitignore
index 2df5bfa..c0fbff9 100644
--- a/packages/create-vivliostyle-theme/templates/default/.gitignore
+++ b/packages/create-vivliostyle-theme/templates/default/.gitignore
@@ -1,2 +1,6 @@
 example/*.html
 node_modules
+themes/
+.vivliostyle/
+book/
+book.pdf
diff --git a/packages/create-vivliostyle-theme/templates/default/README.md b/packages/create-vivliostyle-theme/templates/default/README.md
index 9daa1a6..1bcf495 100644
--- a/packages/create-vivliostyle-theme/templates/default/README.md
+++ b/packages/create-vivliostyle-theme/templates/default/README.md
@@ -6,14 +6,6 @@
 
 {{description}}
 
-## Install
-
-```bash
-npm install --save {{kebab name}}
-# or
-yarn add {{kebab name}}
-```
-
 ## Use
 
 In `vivliostyle.config.js`:
@@ -36,16 +28,7 @@ module.exports = {
 │   ├── default.html       // auto generated
 │   └── default.md         // 🖋
 ├── package.json
-├── scss                   // 🖋
-│   ├── theme_common.scss
-│   ├── theme_print.scss
-│   └── theme_screen.scss
-├── theme_common.css       // auto generated
-├── theme_common.css.map   // auto generated
-├── theme_print.css        // auto generated
-├── theme_print.css.map    // auto generated
-├── theme_screen.css       // auto generated
-├── theme_screen.css.map   // auto generated
+├── theme.css              // 🖋
 └── vivliostyle.config.js
 ```
 
@@ -71,8 +54,7 @@ You can specify your CSS file and manuscript file for preview in vivliostyle.con
 ```js
 module.exports = {
   language: 'en',
-  theme: 'theme_print.css',
-  // theme: 'theme_screen.css',
+  theme: ['node_modules/@vivliostyle/theme-base', '.'],
   entry: [
       'example/default.md',
       // and more...
diff --git a/packages/create-vivliostyle-theme/templates/default/package.json b/packages/create-vivliostyle-theme/templates/default/package.json
index fab1859..8ec11c6 100644
--- a/packages/create-vivliostyle-theme/templates/default/package.json
+++ b/packages/create-vivliostyle-theme/templates/default/package.json
@@ -4,24 +4,27 @@
   "version": "0.1.0",
   "author": "{{contact}}",
   "scripts": {
-    "build": "run-p build:scss build:vivliostyle",
-    "build:scss": "sass scss:.",
-    "build:vivliostyle": "vivliostyle build",
-    "dev": "run-p preview watch:scss",
+    "build": "vivliostyle build",
     "preview": "vivliostyle preview",
-    "validate": "vivliostyle-theme-scripts validate",
-    "watch:scss": "sass --watch scss:."
+    "validate": "vivliostyle-theme-scripts validate"
+  },
+  "dependencies": {
+    "@vivliostyle/theme-base": "beta"
   },
   "devDependencies": {
-    "@vivliostyle/cli": "latest",
-    "sass": "^1.32.8",
-    "npm-run-all": "^4.1.5",
-    "vivliostyle-theme-scripts": "^0.3.1"
+    "@vivliostyle/cli": "^7.2.3",
+    "vivliostyle-theme-scripts": "^0.3.5"
+  },
+  "peerDependencies": {
+    "@vivliostyle/cli": ">=7"
+  },
+  "peerDependenciesMeta": {
+    "@vivliostyle/cli": {
+      "optional": true
+    }
   },
   "files": [
     "*.css",
-    "*.css.map",
-    "scss",
     "example",
     "vivliostyle.config.js"
   ],
@@ -34,7 +37,7 @@
     "theme": {
       "name": "{{capital name space=true}}",
       "author": "{{contact}}",
-      "style": "./theme_print.css",
+      "style": "./theme.css",
       "category": "{{category}}",
       "topics": []
     }
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_variables.scss b/packages/create-vivliostyle-theme/templates/default/scss/_variables.scss
deleted file mode 100644
index e39b243..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_variables.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color--gray: #e6e6e6;
-$color--gray-light: #f6f6f6;
-$color--red-light: #ff8989;
-$color--red: #de3e3e;
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_code.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_code.scss
deleted file mode 100644
index 9f6b537..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_code.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// Syntax highlighting
-// https://prismjs.com
-@import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css';
-
-code {
-  background-color: $color--gray-light;
-  padding: 0 3pt;
-}
-
-figure[class^='language-'] {
-  margin: 0.5em 0;
-
-  figcaption {
-    background-color: $color--gray;
-  }
-
-  pre {
-    margin: 0pt;
-  }
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_footnotes.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_footnotes.scss
deleted file mode 100644
index 242b535..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_footnotes.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.footnote-ref sup {
-  background-color: $color--red-light;
-}
-
-.footnote-back {
-  background-color: $color--red-light;
-}
-
-.footnotes {
-  font-size: 8pt;
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_frontmatter.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_frontmatter.scss
deleted file mode 100644
index 37fd032..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_frontmatter.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.foo.bar {
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_hard_new_line.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_hard_new_line.scss
deleted file mode 100644
index cc1c77a..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_hard_new_line.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-p {
-  margin: 0;
-  text-align: justify;
-  text-indent: 3em;
-
-  &:first-of-type {
-    text-indent: 0;
-  }
-
-  :root:lang(ja) & {
-    text-indent: 1em;
-  }
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_image.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_image.scss
deleted file mode 100644
index 8574fdc..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_image.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-img {
-  max-width: 100%;
-}
-
-figure {
-  img {
-  }
-
-  figcaption {
-    text-align: center;
-
-    // counter
-    counter-increment: figure;
-
-    &:before {
-      margin-right: 1rem;
-      content: 'Figure' counter(figure) '.';
-
-      :root:lang(ja) & {
-        content: '図' counter(figure) '.';
-      }
-    }
-  }
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_math_equation.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_math_equation.scss
deleted file mode 100644
index 9264026..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_math_equation.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.math.inline {
-}
-
-.math.display {
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_raw_html.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_raw_html.scss
deleted file mode 100644
index 12f443e..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_raw_html.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.custom {
-  color: $color--red;
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_ruby.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_ruby.scss
deleted file mode 100644
index 19e9e48..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_ruby.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-ruby {
-  rt {
-    color: $color--red;
-  }
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_sectionization.scss b/packages/create-vivliostyle-theme/templates/default/scss/_vfm_sectionization.scss
deleted file mode 100644
index 34eab59..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/_vfm_sectionization.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-body > section {
-  margin: 10px auto;
-}
-
-html {
-  // counter
-  counter-reset: section subsection figure;
-}
-
-section > {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    padding: 0;
-    font-weight: bold;
-    break-after: avoid;
-  }
-
-  h1 {
-    margin: 10pt auto 5pt;
-    font-size: 14pt;
-    line-height: 1.5;
-
-    // counter
-    counter-increment: section;
-    counter-reset: subsection;
-
-    &:before {
-      margin-right: 1rem;
-      content: counter(section) '.';
-    }
-  }
-
-  h2 {
-    margin: 8pt auto 4pt;
-    font-size: 12pt;
-
-    // counter
-    counter-increment: subsection;
-
-    &:before {
-      margin-right: 1rem;
-      content: counter(section) '.' counter(subsection) '.';
-    }
-  }
-}
-
-section.title {
-  color: $color--red;
-}
-
-blockquote > h1 {
-  font-size: inherit;
-}
-
-.level1 {
-}
-.level2 {
-}
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/theme_common.scss b/packages/create-vivliostyle-theme/templates/default/scss/theme_common.scss
deleted file mode 100644
index f0bdc1e..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/theme_common.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * For all media (print, screen)
- */
-
-/* you can import partial SCSS files */
-/* @import '_variables'; */
-/* @import '_toc'; */
-/* ... */
-
-html {
-  orphans: 1;
-  widows: 1;
-  font-family: sans-serif;
-  font-size: 10pt;
-}
-
-title {
-  // Named strings
-  // https://vivliostyle.github.io/vivliostyle_doc/ja/events/vivliostyle-css-paged-media-20210410/slide.html#named-strings
-  string-set: doc-title content();
-}
-
-@page {
-  size: A5;
-}
-
-// Left/right page layout
-// https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol1/shinyu/index.html#%E5%B7%A6%E5%8F%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88-page-left-%E3%81%A8-page-right
-
-// Page header/footer (page margin box)
-// https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol1/shinyu/index.html#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%EF%BC%8F%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%EF%BC%88%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%9E%E3%83%BC%E3%82%B8%E3%83%B3%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%EF%BC%89
-
-@page :left {
-  @top-left {
-    content: counter(page) '　' string(doc-title);
-  }
-}
-
-@page :right {
-  @top-right {
-    content: counter(page);
-  }
-}
-
-@import '_variables';
-@import '_vfm_code';
-@import '_vfm_footnotes';
-@import '_vfm_frontmatter';
-@import '_vfm_hard_new_line';
-@import '_vfm_image';
-@import '_vfm_math_equation';
-@import '_vfm_raw_html';
-@import '_vfm_ruby';
-@import '_vfm_sectionization';
-
-/* and more... 🖋 */
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/theme_print.scss b/packages/create-vivliostyle-theme/templates/default/scss/theme_print.scss
deleted file mode 100644
index 4ef6602..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/theme_print.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * For PDF publications or Vivliostyle Viewer:
- * load this style in PDF publicatoins (format: pdf)
- */
-
-/* common styles */
-@import 'theme_common';
-
-@page {
-  /* show bleeds */
-  marks: crop cross;
-  bleed: 3mm;
-
-  /* if you open the publication on Vivliostyle Viewer, this message will be shown */
-  @top-left {
-    content: 'theme_print';
-  }
-}
-
-/* and more... 🖋 */
diff --git a/packages/create-vivliostyle-theme/templates/default/scss/theme_screen.scss b/packages/create-vivliostyle-theme/templates/default/scss/theme_screen.scss
deleted file mode 100644
index 0333c5a..0000000
--- a/packages/create-vivliostyle-theme/templates/default/scss/theme_screen.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * For browser viewing:
- * load this style in Web publications (format: webpub)
- */
-
-/* common styles */
-@import 'theme_common';
-
-@page {
-  /* if you open the publication on Vivliostyle Viewer, this message will be shown */
-  @top-left {
-    content: 'theme_screen';
-  }
-}
-
-/* for wide screen */
-body {
-  max-width: 800px;
-  margin: 2rem auto 2rem;
-}
-
-/* highlight footnote */
-.footnote {
-  vertical-align: super;
-  background-color: aliceblue;
-  color: gray;
-
-  a {
-    word-break: break-all;
-  }
-}
-
-/* and more... 🖋 */
diff --git a/packages/create-vivliostyle-theme/templates/default/theme.css b/packages/create-vivliostyle-theme/templates/default/theme.css
new file mode 100644
index 0000000..9d30142
--- /dev/null
+++ b/packages/create-vivliostyle-theme/templates/default/theme.css
@@ -0,0 +1,62 @@
+@import url(../@vivliostyle/theme-base/theme-all.css);
+
+/*
+ * Import extra modules
+ * https://github.com/vivliostyle/themes/tree/main/packages/%40vivliostyle/theme-base#prism-code-highlighting
+ */
+@import url(../@vivliostyle/theme-base/css/lib/prism/base.css);
+@import url(../@vivliostyle/theme-base/css/lib/prism/theme-okaidia.css);
+
+:root {
+  /*
+   * Basic customization of Vivliostyle Theme
+   * https://github.com/vivliostyle/themes/tree/main/packages/%40vivliostyle/theme-base#basic
+   */
+  --vs-font-family: 'Times New Roman', serif;
+  --vs-font-size: 12px;
+  --vs--heading-line-height: 1.3;
+  --vs--h1-font-size: 2.5em;
+
+  /*
+   * Customize styles about cross-reference of figure, table and citation
+   * https://github.com/vivliostyle/themes/tree/main/packages/%40vivliostyle/theme-base#cross-reference
+   */
+  --vs-crossref--counter-style: upper-roman;
+  --vs-crossref--marker-cite-content: target-counter(attr(href), cite) '.';
+
+  /*
+   * Customize styles about endnotes
+   * https://github.com/vivliostyle/themes/tree/main/packages/%40vivliostyle/theme-base#cross-reference
+   */
+  --vs-endnote--call-font-size: 90%;
+  --vs-endnote--section-ol-list-style-type: lower-latin;
+
+  /*
+   * Customize styles about footnotes
+   * https://github.com/vivliostyle/themes/tree/main/packages/%40vivliostyle/theme-base#footnotes
+   */
+   --vs-footnote--call-content: '[' counter(footnote) ']';
+   --vs-footnote--area-before-margin-inline: 0 80%;
+
+  /*
+   * Customize styles about paged media
+   * https://github.com/vivliostyle/themes/tree/main/packages/%40vivliostyle/theme-base#page-layout
+   */
+  --vs-page--mbox-content-bottom-center: counter(page);
+  --vs-page--mbox-content-top-left: env(doc-title);
+
+  /*
+   * Customize styles about heading counters and section reference
+   * https://github.com/vivliostyle/themes/tree/main/packages/%40vivliostyle/theme-base#section-references
+   */
+  --vs-section--marker-display: inline;
+  --vs-section--call-content: 'Sec. ' target-counters(attr(href), sections, '.');
+
+  /*
+   * Customize styles about table of contents (TOC) pages
+   * https://github.com/vivliostyle/themes/tree/main/packages/%40vivliostyle/theme-base#table-of-contents
+   */
+  --vs-toc--marker-margin-inline: 8rem;
+}
+
+/* Start writing... 🖋 */
diff --git a/packages/create-vivliostyle-theme/templates/default/vivliostyle.config.js b/packages/create-vivliostyle-theme/templates/default/vivliostyle.config.js
index 0e18647..cec38db 100644
--- a/packages/create-vivliostyle-theme/templates/default/vivliostyle.config.js
+++ b/packages/create-vivliostyle-theme/templates/default/vivliostyle.config.js
@@ -1,7 +1,8 @@
 module.exports = {
   language: 'en',
-  theme: 'theme_print.css',
+  theme: ['node_modules/@vivliostyle/theme-base', '.'],
   entry: ['example/default.md'],
+  workspaceDir: '.vivliostyle',
   output: [
     'book.pdf',
     {