Merge pull request #723 from estruyf/dev

Version 9.4.0
2026-03-28 17:42:40 +01:00 · 2023-12-12 16:29:45 +01:00
195 changed files with 15414 additions and 6195 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,11 +1,5 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "workbench.colorCustomizations": {
-    "titleBar.activeBackground": "#15c2cb",
-    "titleBar.inactiveBackground": "#44ffd299",
-    "titleBar.activeForeground": "#0E131F",
-    "titleBar.inactiveForeground": "#0E131F99"
-  },
  "files.exclude": {
    "out": false // set this to true to hide the "out" folder with the compiled JS files
  },
@@ -14,6 +8,8 @@
  },
  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
  "typescript.tsc.autoDetect": "off",
+  "eliostruyf.writingstyleguide.terms.isDisabled": true,
+  "eliostruyf.writingstyleguide.biasFree.isDisabled": true,
  "squarl.groups": [
    {
      "id": "dashboard",
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,31 +1,5 @@
 # Change Log

-## [9.5.0] - 2024-xx-xx
-
-### ✨ New features
-
- [#731](https://github.com/estruyf/vscode-front-matter/issues/731): Added the ability to map/unmap taxonomy to multiple pages at once
- [#749](https://github.com/estruyf/vscode-front-matter/issues/749): Ability to set your own filters on the content dashboard with the `frontMatter.content.filters` setting
-
-### 🎨 Enhancements
-
- [#673](https://github.com/estruyf/vscode-front-matter/pull/673): Added git settings to the welcome view and settings view
- [#727](https://github.com/estruyf/vscode-front-matter/pull/727): Updated Japanese translations thanks to [mayumihara](https://github.com/mayumih387)
- [#737](https://github.com/estruyf/vscode-front-matter/issues/737): Optimize the grid layout of the content and media dashboards
- [#741](https://github.com/estruyf/vscode-front-matter/issues/741): Added message on the content dashboard when content is processed
- [#747](https://github.com/estruyf/vscode-front-matter/issues/747): The `@frontmatter/extensibility` dependency now supports scripts for placeholders
-
-### ⚡️ Optimizations
-
-### 🐞 Fixes
-
- [#721](https://github.com/estruyf/vscode-front-matter/issues/721): Fix keywords regex to support unicode characters
- [#725](https://github.com/estruyf/vscode-front-matter/issues/725): Fix for opening menu of pinned items
- [#730](https://github.com/estruyf/vscode-front-matter/issues/730): Add debounce to the input fields
- [#738](https://github.com/estruyf/vscode-front-matter/issues/738): Fix when re-opening the preview after closing it
- [#743](https://github.com/estruyf/vscode-front-matter/issues/743): Fix for storing data in YAML data files
- [#745](https://github.com/estruyf/vscode-front-matter/issues/745): Fix for date field values in `block` field type
-
 ## [9.4.0] - 2023-12-12 - [Release notes](https://beta.frontmatter.codes/updates/v9.4.0)

 ### ✨ New features
--- a/e2e/src/command.test.ts
+++ b/e2e/src/command.test.ts
@@ -0,0 +1,78 @@
+import { By, VSBrowser, EditorView, WebView, Workbench, Notification, StatusBar, NotificationType } from "vscode-extension-tester";
+import { expect } from "chai";
+import { sleep } from "./utils";
+import { join } from "path";
+
+// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/index.ts
+// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/command.test.ts
+
+describe("Initialization testing", function() {
+  this.timeout(2 * 60 * 1000 /*ms*/);
+
+  let workbench: Workbench;
+  let view: WebView;
+
+  before(async function() {
+    await VSBrowser.instance.openResources(join(__dirname, '../sample'));
+    await sleep(3000);
+    workbench = new Workbench();
+
+    await workbench.executeCommand("frontMatter.dashboard");
+    await sleep(3000);
+
+    await new EditorView().openEditor(`FrontMatter Dashboard`);
+
+    view = new WebView();
+    await view.switchToFrame();
+  });
+
+  it("1. Open welcome dashboard", async function() {
+    const element = await view.findWebElement(By.css('h1'));
+
+    const title = await element.getText();
+
+    expect(title).has.string(`Front Matter`);
+  });
+
+  it("2. Initialize project", async function() {
+    const btn = await view.findWebElement(By.css('[data-test="welcome-init"] button'));
+    expect(btn).to.exist;
+
+    await btn.click();
+
+    await sleep(1000);
+
+    await VSBrowser.instance.driver.wait(() => {
+      return notificationExists(workbench, 'Front Matter:');
+    }, 2000) as Notification;
+
+    const notifications = await workbench.getNotifications();
+
+    let notification!: Notification;
+    for (const not of notifications) {
+      console.log(not);
+
+      // const message = await not.get;
+      // console.log(message);
+      // if (message.includes('Front Matter:')) {
+      //   notification = not;
+      // }
+    }
+
+    expect(await notification.getMessage()).has.string(`Project initialized successfully.`);
+  });
+
+  it("3. Check if project file is created", async function() {});
+});
+
+
+async function notificationExists(workbench: Workbench, text: string): Promise<Notification | undefined> {
+  const notifications = await (await (new StatusBar()).openNotificationsCenter()).getNotifications(NotificationType.Info);
+
+  for (const notification of notifications) {
+    const message = await notification.getMessage();
+    if (message.indexOf(text) >= 0) {
+      return notification;
+    }
+  }
+}
--- a/e2e/src/runTests.ts
+++ b/e2e/src/runTests.ts
@@ -0,0 +1,33 @@
+import * as path from 'path'
+import * as semver from 'semver'
+import { ExTester, ReleaseQuality } from 'vscode-extension-tester'
+
+async function main(): Promise<void> {
+  const vsCodeVersion: semver.SemVer = new semver.SemVer(`1.66.0`)
+  const version = vsCodeVersion.version
+
+  const storageFolder = path.join(__dirname, '..', 'storage')
+  const extFolder = path.join(__dirname, '..', 'extensions')
+
+  try {
+    const testPath = path.join(__dirname, 'command.test.js')
+
+    const exTester = new ExTester(storageFolder, ReleaseQuality.Stable, extFolder)
+    await exTester.downloadCode(version)
+    await exTester.installVsix({ useYarn: false })
+    // await exTester.installFromMarketplace("eliostruyf.vscode-front-matter");
+    await exTester.downloadChromeDriver(version)
+    // await exTester.setupRequirements({vscodeVersion: version});
+    const result = await exTester.runTests(testPath, {
+      vscodeVersion: version,
+      resources: [storageFolder],
+    })
+
+    process.exit(result)
+  } catch (err) {
+    console.log(err)
+    process.exit(1)
+  }
+}
+
+main()
--- a/e2e/src/utils/index.ts
+++ b/e2e/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './sleep';
--- a/e2e/src/utils/sleep.ts
+++ b/e2e/src/utils/sleep.ts
@@ -0,0 +1,3 @@
+export async function sleep(time: number) {
+  await new Promise((resolve) => setTimeout(resolve, time));
+}
--- a/l10n/bundle.l10n.ja.json
+++ b/l10n/bundle.l10n.ja.json
@@ -4,7 +4,6 @@
  "common.delete": "削除",
  "common.cancel": "キャンセル",
  "common.clear": "クリア",
-  "common.apply": "適用",
  "common.clear.value": "値をクリア",
  "common.search": "検索",
  "common.save": "保存",
@@ -21,85 +20,38 @@
  "common.slug": "スラッグ",
  "common.support": "サポート",
  "common.remove.value": "{0}を削除",
-  "common.filter": "絞り込み",
-  "common.filter.value": "{0}で絞り込み",
  "common.error.message": "申し訳ありません。エラーが発生しました。",
-  "common.openOnWebsite": "ウェブサイトで開く",
-  "common.settings": "設定",
-  "common.refreshSettings": "設定の再読み込み",
-  "common.pin": "ピン留めする",
-  "common.unpin": "ピン留めを外す",
-  "common.noResults": "結果なし",
-  "common.error": "申し訳ありません。エラーが発生しました。",
-  "common.yes": "はい",
-  "common.no": "いいえ",
-  "common.openSettings": "設定を開く",
-  "common.back": "戻る",
-
-  "notifications.outputChannel.link": "出力ウィンドウ",
-  "notifications.outputChannel.description": "詳細は{0}を確認してください。",
-
-  "settings.view.common": "一般",
-  "settings.view.contentFolders": "記事フォルダー",
-  "settings.view.astro": "Astro",
-  "settings.openOnStartup": "起動時にダッシュボードを開く",
-  "settings.contentTypes": "記事タイプ",
-  "settings.contentFolders": "記事フォルダー",
-  "settings.diagnostic": "診断",
-  "settings.diagnostic.description": "診断プログラムを実行して、Front Matter CMS構成全体を確認できます。",
-  "settings.diagnostic.link": "完全診断を実行する",
-
-  "settings.commonSettings.website.title": "ウェブサイトとSSGの設定",
-  "settings.commonSettings.previewUrl": "プレビュー用URL",
-  "settings.commonSettings.websiteUrl": "ウェブサイトのURL",
-  "settings.commonSettings.startCommand": "SSG/フレームワーク起動コマンド",
-
  "developer.title": "開発モード",
  "developer.reload.title": "ダッシュボードを再読み込み",
  "developer.reload.label": "再読み込み",
  "developer.devTools.title": "開発ツールを開く",
  "developer.devTools.label": "開発ツール",
-
  "field.required": "必須フィールド",
  "field.unknown": "不明なフィールド",
-
  "dashboard.chatbot.answer.answer": "回答",
  "dashboard.chatbot.answer.resources": "参考",
  "dashboard.chatbot.answer.warning": "回答が正しくない場合もあります。内容がおかしいと思われる場合には、公式ドキュメントを確認してください。",
-
  "dashboard.chatbot.chatbot.loading": "アシスタントを起動中",
  "dashboard.chatbot.chatbot.ready": "準備ができました。何について知りたいですか？",
-
  "dashboard.chatbot.chatbox.placeholder": "Front Matterの設定方法は？",
-
  "dashboard.chatbot.header.heading": "Front Matter AIに質問する",
  "dashboard.chatbot.header.description": "このAIはmendable.aiをベースに公式ドキュメントがチューニングされており、Front Matter関連のクエリを理解してあなたをアシストします。何でも聞いてください！",
-
  "dashboard.common.choiceButton.open": "オプションを開く",
-
  "dashboard.contents.contentActions.actionMenuButton.title": "メニュー",
  "dashboard.contents.contentActions.menuItem.view": "開く",
  "dashboard.contents.contentActions.alert.title": "削除: {0}",
  "dashboard.contents.contentActions.alert.description": "本当に\"{0}\"を削除しますか？",
-
  "dashboard.contents.item.invalidTitle": "<無効なタイトル>",
  "dashboard.contents.item.invalidDescription": "<無効なディスクリプション>",
-
  "dashboard.contents.list.title": "タイトル",
  "dashboard.contents.list.date": "日付",
  "dashboard.contents.list.status": "ステータス",
-
  "dashboard.contents.overview.noMarkdown": "Markdownファイルはありません",
  "dashboard.contents.overview.noFolders": "プロジェクト内の記事用フォルダーを登録して、Front Matterが記事を見つけられるようにしてください。",
-  "dashboard.contents.overview.pinned": "ピン留めアイテム",
-
  "dashboard.contents.status.draft": "下書き",
  "dashboard.contents.status.published": "公開済み",
-  "dashboard.contents.status.scheduled": "予約済み",
-
  "dashboard.dataView.dataForm.modify": "エントリーを編集",
  "dashboard.dataView.dataForm.add": "エントリーを作成",
-
  "dashboard.dataView.dataView.select": "データタイプを選択",
  "dashboard.dataView.dataView.title": "\"{0}\"のエントリー",
  "dashboard.dataView.dataView.add": "新規エントリーを追加",
@@ -108,50 +60,34 @@
  "dashboard.dataView.dataView.getStarted": "データタイプを選択して開始する",
  "dashboard.dataView.dataView.noDataFiles": "データファイルが見つかりませんでした",
  "dashboard.dataView.dataView.getStarted.link": "データファイルの利用方法について確認する",
-
  "dashboard.dataView.emptyView.heading": "最初にデータタイプを選んでください",
-
  "dashboard.dataView.sortableItem.editButton.title": "\"{0}\"を編集する",
  "dashboard.dataView.sortableItem.deleteButton.title": "\"{0}\"を削除する",
  "dashboard.dataView.sortableItem.alert.title": "データアイテムを削除",
  "dashboard.dataView.sortableItem.alert.description": "本当にこのデータアイテムを削除しますか？",
-
  "dashboard.errorView.description": "ダッシュボードを一旦閉じてからやり直してください。",
-
  "dashboard.header.breadcrumb.home": "ホーム",
-
-  "dashboard.header.clearFilters.title": "絞り込み・グループ・並べ替えを解除",
-
+  "dashboard.header.clearFilters.title": "フィルター・グループ・並べ替えを解除",
  "dashboard.header.filter.default": "なし",
-
  "dashboard.header.folders.default": "全ての記事タイプ",
  "dashboard.header.folders.menuButton.showing": "表示",
-
  "dashboard.header.grouping.option.none": "なし",
  "dashboard.header.grouping.option.year": "公開年",
  "dashboard.header.grouping.option.draft": "下書き/公開済み",
  "dashboard.header.grouping.menuButton.label": "グループ",
-
  "dashboard.header.navigation.allArticles": "全ての記事",
  "dashboard.header.navigation.published": "公開済み",
-  "dashboard.header.navigation.scheduled": "予約済み",
  "dashboard.header.navigation.draft": "下書き",
-
  "dashboard.header.header.createContent": "新しい記事を作成",
  "dashboard.header.header.createByContentType": "記事タイプから作成",
  "dashboard.header.header.createByTemplate": "テンプレートから作成",
-
  "dashboard.header.pagination.first": "最初",
  "dashboard.header.pagination.previous": "前へ",
  "dashboard.header.pagination.next": "次へ",
  "dashboard.header.pagination.last": "最後",
-
  "dashboard.header.paginationStatus.text": "{0}～{1}件目（全{2}件中）を表示中",
-
  "dashboard.header.projectSwitcher.label": "プロジェクト",
-
  "dashboard.header.refreshDashboard.label": "ダッシュボードを再読み込み",
-
  "dashboard.header.sorting.lastModified.asc": "最終更新日（昇順）",
  "dashboard.header.sorting.lastModified.desc": "最終更新日（降順）",
  "dashboard.header.sorting.filename.asc": "ファイル名（昇順）",
@@ -165,27 +101,21 @@
  "dashboard.header.sorting.alt.asc": "代替テキスト（昇順）",
  "dashboard.header.sorting.alt.desc": "代替テキスト（降順）",
  "dashboard.header.sorting.label": "並べ替え",
-
  "dashboard.header.startup.label": "起動時に表示",
-
  "dashboard.header.tabs.contents": "記事",
  "dashboard.header.tabs.media": "メディア",
  "dashboard.header.tabs.snippets": "スニペット",
  "dashboard.header.tabs.data": "データ",
  "dashboard.header.tabs.taxonomies": "タクソノミー",
-
  "dashboard.header.viewSwitch.toGrid": "グリッド表示",
  "dashboard.header.viewSwitch.toList": "リスト表示",
-
  "dashboard.layout.sponsor.support.msg": "Front Matterをサポートする",
  "dashboard.layout.sponsor.review.label": "評価する",
  "dashboard.layout.sponsor.review.msg": "Front Matterを評価する",
-
  "dashboard.media.common.title": "タイトル",
  "dashboard.media.common.caption": "キャプション",
  "dashboard.media.common.alt": "代替テキスト",
  "dashboard.media.common.size": "サイズ",
-
  "dashboard.media.dialog.title": "ファイルの詳細",
  "dashboard.media.panel.close": "パネルを閉じる",
  "dashboard.media.metadata.panel.title": "メタデータを編集",
@@ -197,10 +127,8 @@
  "dashboard.media.metadata.panel.form.information.modifiedDate": "最終更新日",
  "dashboard.media.metadata.panel.form.information.dimensions": "ディメンション",
  "dashboard.media.metadata.panel.form.information.folder": "フォルダー",
-
  "dashboard.media.folderCreation.hexo.create": "Assetフォルダーを作成",
  "dashboard.media.folderCreation.folder.create": "新規フォルダーを作成",
-
  "dashboard.media.item.quickAction.insert.field": "この画像を\"{0}\"フィールドに追加",
  "dashboard.media.item.quickAction.insert.markdown": "画像をMarkdown記法で挿入",
  "dashboard.media.item.quickAction.copy.path": "ファイルパスをコピー",
@@ -210,7 +138,6 @@
  "dashboard.media.item.menuItem.reveal.media": "メディアの場所を表示",
  "dashboard.media.item.infoDialog.snippet.description": "このメディアに適用するメディア用スニペットを選択してください。",
  "dashboard.media.item.alert.delete.description": "本当にこのファイルを {0} から削除しますか？",
-
  "dashboard.media.media.description": "記事に挿入するメディアファイルを選択してください。",
  "dashboard.media.media.dragAndDrop": "デスクトップから画像をドラッグ＆ドロップして、アップロード後に選択することもできます。",
  "dashboard.media.media.folder.upload": "{0}にアップロードする",
@@ -218,17 +145,13 @@
  "dashboard.media.media.placeholder": "メディアファイルはありません。Shiftキーを押しながら、新規ファイルをドラック＆ドロップで追加することができます。",
  "dashboard.media.media.contentFolder": "記事フォルダー",
  "dashboard.media.media.publicFolder": "Publicフォルダー",
-
  "dashboard.media.mediaHeaderTop.searchbox.placeholder": "フォルダー内を検索",
-
  "dashboard.media.mediaSnippetForm.formDialog.title": "メディアを挿入: {0}",
  "dashboard.media.mediaSnippetForm.formDialog.description": "メディアファイル\"{0}\"を現在の記事に挿入する",
-
  "dashboard.preview.input.placeholder": "URLを入力",
  "dashboard.preview.button.navigate.title": "ナビゲーション",
  "dashboard.preview.button.refresh.title": "更新",
  "dashboard.preview.button.open.title": "開く",
-
  "dashboard.snippetsView.item.quickAction.editSnippet": "スニペットを編集",
  "dashboard.snippetsView.item.quickAction.deleteSnippet": "スニペットを削除",
  "dashboard.snippetsView.item.quickAction.viewSnippet": "スニペットファイルの表示",
@@ -238,7 +161,6 @@
  "dashboard.snippetsView.item.edit.formDialog.description": "\"{0}\"スニペットの編集",
  "dashboard.snippetsView.item.alert.title": "\"{0}\"スニペットを削除",
  "dashboard.snippetsView.item.alert.description": "本当に\"{0}\"スニペットを削除しますか？",
-
  "dashboard.snippetsView.newForm.snippetInput.title.placeholder": "スニペットのタイトル",
  "dashboard.snippetsView.newForm.snippetInput.description.label": "概要",
  "dashboard.snippetsView.newForm.snippetInput.description.placeholder": "スニペットの概要",
@@ -249,14 +171,12 @@
  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.description": "このスニペットをメディアファイル挿入時に利用",
  "dashboard.snippetsView.newForm.snippetInput.docsButton.title": "メディア用スニペットのプレースホルダーについて読む",
  "dashboard.snippetsView.newForm.snippetInput.docsButton.description": "スニペットに設定可能なプレースホルダーをドキュメントで確認",
-
  "dashboard.snippetsView.snippets.ariaLabel": "スニペット ヘッダー",
  "dashboard.snippetsView.snippets.button.create": "新規スニペットを作成",
  "dashboard.snippetsView.snippets.select.description": "挿入するスニペットを選択してください。",
  "dashboard.snippetsView.snippets.empty.message": "スニペットはありません",
  "dashboard.snippetsView.snippets.readMore": "スニペットの使い方を読む",
  "dashboard.snippetsView.snippets.formDialog.title": "新規スニペットを作成",
-
  "dashboard.steps.stepsToGetStarted.button.addFolder.title": "Front Matterに記事フォルダーとして登録",
  "dashboard.steps.stepsToGetStarted.initializeProject.name": "プロジェクトの初期設定",
  "dashboard.steps.stepsToGetStarted.initializeProject.description": "Front Matter CMSに必要な設定ファイルを作成します。クリックして開始してください。",
@@ -264,32 +184,20 @@
  "dashboard.steps.stepsToGetStarted.framework.description": "静的サイトジェネレーターまたはフレームワークを選択して、必要なセッティングを追加します。",
  "dashboard.steps.stepsToGetStarted.framework.select": "フレームワークを選択",
  "dashboard.steps.stepsToGetStarted.framework.select.other": "その他",
-  "dashboard.steps.stepsToGetStarted.assetsFolder.name": "アセットフォルダーを登録",
-  "dashboard.steps.stepsToGetStarted.assetsFolder.description": "記事のメディアファイルを保存するためのフォルダーを選択してください。",
-  "dashboard.steps.stepsToGetStarted.assetsFolder.public.title": "'public'フォルダーを使用する",
-  "dashboard.steps.stepsToGetStarted.assetsFolder.assets.title": "Astroアセットフォルダー(src/assets)を使用する",
-  "dashboard.steps.stepsToGetStarted.assetsFolder.other.description": "別のフォルダーを指定する場合は、frontmatter.jsonファイルへ手動で設定可能です。",
  "dashboard.steps.stepsToGetStarted.contentFolders.name": "記事ファイルのフォルダーを登録",
-  "dashboard.steps.stepsToGetStarted.contentFolders.description": "記事ファイルの保存フォルダーを追加してください。フォルダーが設定されると、フォルダー内の記事ファイルがFront Matterでリスト化され、新規の記事ファイルを追加できるようになります。",
+  "dashboard.steps.stepsToGetStarted.contentFolders.description": "記事ファイルの保存フォルダーを追加してください。フォルダーが設定されると、フォルダー内の記事ファイルがFront Matterでリスト化され、新規記事ファイルを追加できるようになります。",
  "dashboard.steps.stepsToGetStarted.contentFolders.label": "記事ファイルを含むフォルダー",
-  "dashboard.steps.stepsToGetStarted.contentFolders.information.description": "エクスプローラーでフォルダー名を右クリックして「フォルダーを登録」を選択する方法でも、フォルダーの登録が可能です。",
+  "dashboard.steps.stepsToGetStarted.contentFolders.information.description": "フォルダーの登録は、エクスプローラーでフォルダー名を右クリックして「フォルダーを登録」を選択することでも可能です。",
  "dashboard.steps.stepsToGetStarted.tags.name": "全てのタグとカテゴリーをインポート（オプション）",
  "dashboard.steps.stepsToGetStarted.tags.description": "Front Matterに記事用フォルダーが登録されました。記事から全てのタグとカテゴリーをインポートしますか？",
  "dashboard.steps.stepsToGetStarted.showDashboard.name": "ダッシュボードを開く",
  "dashboard.steps.stepsToGetStarted.showDashboard.description": "全ての設定が終わると、ダッシュボードが表示できるようになります。",
-  "dashboard.steps.stepsToGetStarted.template.name": "設定用のテンプレートを使用する",
-  "dashboard.steps.stepsToGetStarted.template.description": "おすすめの設定のテンプレートを選択して、frontmatter.jsonに反映させます。",
-  "dashboard.steps.stepsToGetStarted.template.warning": "選択によりプロジェクトの構成にテンプレートが適用され、この設定画面は終了します。",
-  "dashboard.steps.stepsToGetStarted.astroContentTypes.name": "Astroコンテンツコレクションのコンテンツタイプを作成する",
-
  "dashboard.taxonomyView.button.add.title": "\"{0}\"をタクソノミーに追加",
  "dashboard.taxonomyView.button.edit.title": "\"{0}\"を編集",
  "dashboard.taxonomyView.button.merge.title": "\"{0}\"をマージ",
  "dashboard.taxonomyView.button.move.title": "他のタクソノミーへ移行",
  "dashboard.taxonomyView.button.delete.title": "\"{0}\"を削除",
-
  "dashboard.taxonomyView.taxonomyLookup.button.title": "{1}\"{0}\"の記事一覧を表示",
-
  "dashboard.taxonomyView.taxonomyManager.description": "サイト内{0}の新規作成・編集・コマンド",
  "dashboard.taxonomyView.taxonomyManager.button.create": "新規{0}を作成",
  "dashboard.taxonomyView.taxonomyManager.table.heading.name": "名前",
@@ -297,25 +205,17 @@
  "dashboard.taxonomyView.taxonomyManager.table.heading.action": "コマンド",
  "dashboard.taxonomyView.taxonomyManager.table.row.empty": "{0}はありません",
  "dashboard.taxonomyView.taxonomyManager.table.unmapped.title": "設定ファイルに見つかりません",
-  "dashboard.taxonomyView.taxonomyManager.filterInput.placeholder": "絞り込み",
-
-  "dashboard.taxonomyView.taxonomyTagging.pageTitle": "タクソノミー {0} をリマッピング",
-  "dashboard.taxonomyView.taxonomyTagging.checkbox": "ページにタクソノミー{0}を付ける",
-
  "dashboard.taxonomyView.taxonomyView.navigationBar.title": "タクソノミーを選択",
  "dashboard.taxonomyView.taxonomyView.button.import": "タクソノミーをインポート",
  "dashboard.taxonomyView.taxonomyView.navigationItem.tags": "タグ",
  "dashboard.taxonomyView.taxonomyView.navigationItem.categories": "カテゴリー",
-
  "dashboard.unkownView.title": "表示出来る画面がありません",
  "dashboard.unkownView.description": "存在しない画面で終了してしまったようです。ダッシュボードを再度開きなおしてください。",
-
  "dashboard.welcomeScreen.title": "Front Matterで静的サイトを管理しよう",
  "dashboard.welcomeScreen.thanks": "Front Matterをお使いいただきありがとうございます！",
  "dashboard.welcomeScreen.description": "私たちはFront Matterをより使いやすくするため、日々努力しています。ご質問やご提案など、GitHubまでお気軽にお問い合わせください。",
  "dashboard.welcomeScreen.link.github.title": "GitHub",
-  "dashboard.welcomeScreen.link.github.label": "GitHub",
-  "dashboard.welcomeScreen.link.documentation.label": "ドキュメント",
+  "dashboard.welcomeScreen.link.github.label": "GitHub / ドキュメント",
  "dashboard.welcomeScreen.link.sponsor.title": "スポンサーになる",
  "dashboard.welcomeScreen.link.sponsor.label": "スポンサー",
  "dashboard.welcomeScreen.link.review.title": "評価する",
@@ -323,66 +223,41 @@
  "dashboard.welcomeScreen.actions.heading": "以下の手順に従って、この拡張機能をスタートさせてください。",
  "dashboard.welcomeScreen.actions.description": "サイドパネルからもFront Matterを利用できます。サイドパネルでは、各コンテンツに合った具体的なコマンドが実行可能です。",
  "dashboard.welcomeScreen.actions.thanks": "Front Matterをお楽しみください！",
-
-  "dashboard.media.detailsSlideOver.unmapped.description": "未割り当てのファイルのメタデータを再マップしますか？",
-
-  "dashboard.configuration.astro.astroContentTypes.empty": "Astroコンテンツコレクションが見つかりません。",
-  "dashboard.configuration.astro.astroContentTypes.description": "以下のAstroコンテンツコレクションは、コンテンツタイプを生成するために使用できます。",
-
  "panel.contentType.contentTypeValidator.title": "記事タイプ",
  "panel.contentType.contentTypeValidator.hint": "記事タイプのフィールドは設定と異なります。この記事の記事タイプを、作成・更新または設定しますか？",
  "panel.contentType.contentTypeValidator.button.create": "新しい記事タイプを作成",
  "panel.contentType.contentTypeValidator.button.add": "この記事タイプの設定にないフィールドを追加",
  "panel.contentType.contentTypeValidator.button.change": "このファイルの記事タイプを変更",
-
  "panel.dataBlock.dataBlockField.group.selected.edit": "編集: {0}",
  "panel.dataBlock.dataBlockField.group.selected.create": "新規{0}を作成",
  "panel.dataBlock.dataBlockField.group.select": "グループを選択",
  "panel.dataBlock.dataBlockField.add": "{0}を追加",
-
  "panel.dataBlock.dataBlockRecord.edit": "レコードを編集",
  "panel.dataBlock.dataBlockRecord.delete": "レコードを削除",
-
  "panel.dataBlock.dataBlockRecords.label": "レコード",
-
  "panel.dataBlock.dataBlockSelector.label": "ブロックタイプ",
-
  "panel.errorBoundary.fieldBoundary.label": "フィールドの表示に失敗しました",
-
  "panel.fields.choiceField.select": "{0}を選択",
  "panel.fields.choiceField.clear": "値をクリア",
-
  "panel.fields.contentTypeRelationshipField.loading": "読み込み中...",
-
  "panel.fields.dateTimeField.button.pick": "日付を選択",
  "panel.fields.dateTimeField.time": "時刻",
-
  "panel.fields.fieldMessage.required": "{0}は必須フィールドです",
-
  "panel.fields.fileField.delete": "ファイルを削除",
  "panel.fields.fileField.add": "{0}を追加",
-
  "panel.fields.imageFallback.label": "画像を読み込めませんでした。",
-
  "panel.fields.listField.edit": "レコードを編集",
  "panel.fields.listField.delete": "レコードを削除",
-
  "panel.fields.previewImage.remove": "画像を削除",
-
  "panel.fields.previewImageField.add": "{0}を追加",
-
  "panel.fields.slugField.update": "更新が可能",
  "panel.fields.slugField.generate": "スラッグを生成",
-
  "panel.fields.textField.ai.message": "Front Matter AIに{0}を提案してもらう",
  "panel.fields.textField.ai.generate": "提案を生成中...",
  "panel.fields.textField.loading": "読み込み中",
  "panel.fields.textField.limit": "値が上限を超えています。{0}",
-
  "panel.fields.wrapperField.unknown": "不明なフィールド: {0}",
-
  "panel.actions.title": "コマンド",
-
  "panel.articleDetails.title": "詳細",
  "panel.articleDetails.type": "項目",
  "panel.articleDetails.total": "数",
@@ -391,18 +266,15 @@
  "panel.articleDetails.internalLinks": "内部リンク",
  "panel.articleDetails.externalLinks": "外部リンク",
  "panel.articleDetails.images": "画像",
-
  "panel.baseView.initialize": "プロジェクトの初期設定",
  "panel.baseView.actions.title": "コマンド",
  "panel.baseView.action.openDashboard": "ダッシュボードを開く",
+  "panel.baseView.action.openPreview": "プレビューを開く",
  "panel.baseView.action.createContent": "新しい記事を作成",
  "panel.baseView.empty": "他の操作を見るには、ファイルを開いてください。",
-
  "panel.fileList.label.singular": "ファイル",
  "panel.fileList.label.plural": "ファイル",
-
  "panel.folderAndFiles.title": "最近の更新",
-
  "panel.globalSettings.title": "一般設定",
  "panel.globalSettings.action.modifiedDate.label": "最終更新日",
  "panel.globalSettings.action.modifiedDate.description": "最終更新日を自動で更新",
@@ -412,9 +284,7 @@
  "panel.globalSettings.action.preview.placeholder": "例: {0}",
  "panel.globalSettings.action.server.label": "ローカルサーバーのコマンド",
  "panel.globalSettings.action.server.placeholder": "例: {0}",
-
  "panel.metadata.title": "メタデータ",
-
  "panel.otherActions.title": "他のコマンド",
  "panel.otherActions.writingSettings.enabled": "ライティング設定が有効",
  "panel.otherActions.writingSettings.disabled": "ライティング設定を有効化",
@@ -425,23 +295,17 @@
  "panel.otherActions.documentation": "ドキュメントを開く",
  "panel.otherActions.settings": "設定方法の概要",
  "panel.otherActions.issue": "問題を報告",
-
  "panel.preview.title": "プレビューを表示",
-
  "panel.publishAction.publish": "公開",
  "panel.publishAction.unpublish": "下書きに戻す",
-
  "panel.seoDetails.recommended": "推奨",
-
  "panel.seoKeywordInfo.density": "キーワード出現率 {0} *",
  "panel.seoKeywordInfo.validInfo.label": "見出しへの利用",
  "panel.seoKeywordInfo.validInfo.content": "本文",
-
  "panel.seoKeywords.title": "キーワード",
  "panel.seoKeywords.header.keyword": "キーワード",
  "panel.seoKeywords.header.details": "詳細",
  "panel.seoKeywords.density": "* キーワード出現率は通常1~1.5%で十分です。",
-
  "panel.seoStatus.title": "推奨項目",
  "panel.seoStatus.header.property": "項目",
  "panel.seoStatus.header.length": "長さ",
@@ -451,270 +315,50 @@
  "panel.seoStatus.seoFieldInfo.article": "記事の長さ",
  "panel.seoStatus.collapsible.title": "SEO対策",
  "panel.seoStatus.required": "{0}か{1}は必須です。",
-
  "panel.slugAction.title": "スラッグを最適化",
-
  "panel.spinner.loading": "読み込み中...",
-
  "panel.startServerbutton.start": "サーバーを起動",
  "panel.startServerbutton.stop": "サーバーを停止",
-
  "panel.tag.add": "\"{0}\"を設定に追加",
-
  "panel.tagPicker.inputPlaceholder.empty": "{0}を選択",
  "panel.tagPicker.inputPlaceholder.disabled": "{0}の上限数に達しました",
  "panel.tagPicker.ai.suggest": "Front Matter AIに{0}を提案してもらう",
  "panel.tagPicker.ai.generating": "提案を生成中...",
  "panel.tagPicker.limit": "上限数: {0}",
  "panel.tagPicker.unkown": "不明なタグを追加",
-
  "panel.tags.tag.warning": "\"{0}\"は設定に保存されていません。削除すると復元できませんのでご注意ください。",
-
  "panel.viewPanel.mediaInsert": "ダッシュボードのメディア管理画面から、利用したい画像を選択してください。",
-
-  "commands.article.setDate.error": "日付の表示形式の解析中に何らかの問題が発生しました。\"{0}\"の設定を確認してください。",
-  "commands.article.updateSlug.error": "ファイル名を変更できませんでした。: {0}",
-
-  "commands.cache.cleared": "キャッシュがクリアされました。",
-
-  "commands.chatbot.title": "何でも聞いてください",
-
-  "commands.content.option.contentType.label": "記事タイプから記事を作成",
-  "commands.content.option.contentType.description": "設定済みの記事タイプを選択して記事を作成",
-  "commands.content.option.template.label": "テンプレートから記事を作成",
-  "commands.content.option.template.description": "設定済みのテンプレートを選択して記事を作成",
-  "commands.content.quickPick.title": "記事の作成",
-  "commands.content.quickPick.placeholder": "記事の作成方法を選択してください。",
-
-  "commands.dashboard.title": "ダッシュボード",
-
-  "commands.folders.addMediaFolder.inputBox.title": "メディアフォルダーの追加",
-  "commands.folders.addMediaFolder.inputBox.prompt": "新規作成するフォルダー名を入力してください。(\"/\"で多階層のフォルダーを作成可能です)",
-  "commands.folders.addMediaFolder.noFolder.warning": "フォルダー名が入力されていません。",
-  "commands.folders.create.folderExists.warning": "フォルダーは既に登録済です。",
-  "commands.folders.create.input.title": "フォルダーを登録する",
-  "commands.folders.create.input.prompt": "登録するフォルダー名を指定してください。",
-  "commands.folders.create.input.placeholder": "フォルダー名",
-  "commands.folders.create.success": "フォルダーが登録されました。",
-  "commands.folders.getWorkspaceFolder.workspaceFolderPick.placeholder": "Front Matterを利用するメインのワークスペースのフォルダーを選択してください。",
-  "commands.folders.get.notificationError.title": "\"{0}\"フォルダーが存在しません。このフォルダーを設定から削除してください。",
-  "commands.folders.get.notificationError.remove.action": "フォルダー設定を削除",
-  "commands.folders.get.notificationError.create.action": "フォルダーを作成",
-
-  "commands.preview.panel.title": "プレビュー: {0}",
-  "commands.preview.askUserToPickFolder.title": "プレビュー用の記事フォルダーを選択してください。",
-
-  "commands.project.initialize.success": "プロジェクトが初期化されました。",
-  "commands.project.switchProject.title": "どのプロジェクトに切り替えますか？",
-  "commands.project.createSampleTemplate.info": "テンプレートサンプルを作成しました。",
-
-  "commands.settings.create.input.prompt": "設定に追加したい{0}の値を入力してください。",
-  "commands.settings.create.input.placeholder": "{0}の名前",
-  "commands.settings.create.warning": "入力された {0} は既に存在しています。",
-  "commands.settings.create.quickPick.placeholder": "新規{0}をページに追加しますか？",
-  "commands.settings.export.progress.title": "{0}: タグとカテゴリーをエクスポートしています。",
-  "commands.settings.export.progress.success": "エクスポートが完了しました。タグ: {0} - カテゴリー: {1}",
-  "commands.settings.remap.quickpick.title": "再構成",
-  "commands.settings.remap.quickpick.placeholder": "何を再構成しますか？",
-  "commands.settings.remap.noTaxonomy.warning": "編集可能な{0}が存在しません。",
-  "commands.settings.remap.selectTaxonomy.placeholder": "編集したい{0}を選択してください。",
-  "commands.settings.remap.newOption.input.prompt": "\"{1}\"を再構成します。変更したい{0}値を入力してください。全ての記事から{0}を削除する場合は空欄にしてください。",
-  "commands.settings.remap.newOption.input.placeholder": "{0}名",
-  "commands.settings.remap.delete.placeholder": "{1} {0}を削除しますか？",
-
-  "commands.statusListener.verifyRequiredFields.diagnostic.emptyField": "フィールド {0} は必須です。値を入力してください。",
-  "commands.statusListener.verifyRequiredFields.notification.error": "以下の必須のフィールドに値が入力されていません。: {0}",
-
-  "commands.template.generate.input.title": "テンプレート名",
-  "commands.template.generate.input.prompt": "テンプレート名を入力してください。",
-  "commands.template.generate.input.placeholder": "article",
-  "commands.template.generate.noTitle.warning": "テンプレート名が入力されていません。",
-  "commands.template.generate.keepContents.title": "記事本文の反映",
-  "commands.template.generate.keepContents.placeholder": "記事本文をテンプレートにそのまま残しますか？",
-  "commands.template.generate.keepContents.noOption.warning": "記事本文を残すかどうかの選択がされませんでした。",
-  "commands.template.generate.keepContents.success": "{0}フォルダー内にテンプレートが作成されました。",
-  "commands.template.getTemplates.warning": "テンプレートがありません。",
-  "commands.template.create.folderPath.warning": "取得されたプロジェクトフォルダーのパスが不正です。",
-  "commands.template.create.noTemplates.warning": "テンプレートがありません。",
-  "commands.template.create.selectTemplate.title": "テンプレートの選択",
-  "commands.template.create.selectTemplate.placeholder": "記事テンプレートを選択してください。",
-  "commands.template.create.selectTemplate.noTemplate.warning": "テンプレートが選択されていません。",
-  "commands.template.create.selectTemplate.notFound.warning": "記事テンプレートが見つかりません。",
-  "commands.template.create.success": "新規記事が有効になりました。",
-
-  "commands.wysiwyg.command.unorderedList.label": "順序なしリスト",
-  "commands.wysiwyg.command.unorderedList.detail": "順序なしリストを追加",
-  "commands.wysiwyg.command.orderedList.label": "順序付きリスト",
-  "commands.wysiwyg.command.orderedList.detail": "順序付きリストを追加",
-  "commands.wysiwyg.command.taskList.label": "タスクリスト",
-  "commands.wysiwyg.command.taskList.detail": "タスクリストを追加",
-  "commands.wysiwyg.command.code.label": "コード",
-  "commands.wysiwyg.command.code.detail": "インラインコードスニペットを追加",
-  "commands.wysiwyg.command.codeblock.label": "コードブロック",
-  "commands.wysiwyg.command.codeblock.detail": "コードブロックを追加",
-  "commands.wysiwyg.command.blockquote.label": "ブロック引用要素",
-  "commands.wysiwyg.command.blockquote.detail": "ブロック引用要素を追加",
-  "commands.wysiwyg.command.strikethrough.label": "取り消し線",
-  "commands.wysiwyg.command.strikethrough.detail": "取り消し線付きテキストを追加",
-  "commands.wysiwyg.quickPick.title": "WYSIWYG オプション",
-  "commands.wysiwyg.quickPick.placeholder": "どのマークアップ要素を挿入しますか？",
-  "commands.wysiwyg.addHyperlink.hyperlinkInput.title": "WYSIWYG ハイパーリンク",
-  "commands.wysiwyg.addHyperlink.hyperlinkInput.prompt": "URLを入力",
-  "commands.wysiwyg.addHyperlink.textInput.title": "WYSIWYG テキスト",
-  "commands.wysiwyg.addHyperlink.textInput.prompt": "ハイパーリンクのテキストを入力",
-  "commands.wysiwyg.insertText.heading.input.title": "見出し",
-  "commands.wysiwyg.insertText.heading.input.placeholder": "見出しのレベルを選択",
-
-  "helpers.articleHelper.createContent.pageBundle.error": "{0}という名称のページバンドルは、既に {1} に存在しています。",
-  "helpers.articleHelper.createContent.contentExists.warning": "同タイトルの記事が存在します。別のタイトルを付けてください。",
-  "helpers.articleHelper.processCustomPlaceholders.placeholder.error": "プレースホルダー{0}の生成中にエラーが発生しました。",
-  "helpers.articleHelper.parseFile.diagnostic.error": "{0}のfront matterの解析中にエラーが発生しました。",
-
-  "helpers.contentType.generate.noFrontMatter.error": "記事タイプの生成に必要なfront matterデータがありません。",
-  "helpers.contentType.generate.override.quickPick.title": "デフォルトの記事タイプを上書き",
-  "helpers.contentType.generate.override.quickPick.placeholder": "この記事のフィールド設定を、デフォルトの記事タイプのフィールド設定に上書きしますか？",
-  "helpers.contentType.generate.contentTypeInput.title": "記事タイプを生成",
-  "helpers.contentType.generate.contentTypeInput.prompt": "新規作成したい記事タイプ名を入力してください。",
-  "helpers.contentType.generate.contentTypeInput.validation.enterName": "記事タイプ名を入力してください。",
-  "helpers.contentType.generate.contentTypeInput.validation.nameExists": "この記事タイプ名は既に存在しています。",
-  "helpers.contentType.generate.noContentTypeName.warning": "記事タイプが選択されませんでした。",
-  "helpers.contentType.generate.pageBundle.quickPick.title": "ページバンドルとして使用",
-  "helpers.contentType.generate.pageBundle.quickPick.placeHolder": "この記事タイプをページバンドルとして使用しますか？",
-  "helpers.contentType.generate.updated.success": "記事タイプ {0} を更新しました。",
-  "helpers.contentType.generate.generated.success": "記事タイプ {0} を生成しました。",
-  "helpers.contentType.addMissingFields.noFrontMatter.warning": "追加すべきfront matterデータはありません。",
-  "helpers.contentType.addMissingFields.updated.success": "記事タイプ {0} を更新しました。",
-  "helpers.contentType.setContentType.noFrontMatter.warning": "記事タイプの設定が必要なfront matterデータが見つかりません。",
-  "helpers.contentType.setContentType.quickPick.title": "記事タイプを選択",
-  "helpers.contentType.setContentType.quickPick.placeholder": "どの記事タイプを使用しますか？",
-  "helpers.contentType.create.allowSubContent.title": "サブコンテンツとしての要否",
-  "helpers.contentType.create.allowSubContent.placeHolder": "新規記事をサブコンテンツとして作成しますか？",
-  "helpers.contentType.create.allowSubContent.showOpenDialog.openLabel": "フォルダーを選択",
-  "helpers.contentType.create.allowSubContent.showOpenDialog.title": "新規記事用のフォルダーを選択してください。",
-  "helpers.contentType.create.pageBundle.title": "ページバンドルとして要否",
-  "helpers.contentType.create.pageBundle.placeHolder": "ページバンドルとして記事を作成しますか？",
-  "helpers.contentType.create.progress.title": "{0}: 記事ファイルを作成中...",
-  "helpers.contentType.create.success": "記事ファイルを作成しました。",
-  "helpers.contentType.verify.warning": "記事タイプ・コマンドは、このモードでは有効になっていません。",
-
-  "helpers.customScript.executing": "実行中: {0}",
-  "helpers.customScript.singleRun.article.warning": "{0}: Article couldn't be retrieved.",
-  "helpers.customScript.bulkRun.noFiles.warning": "{0}: ファイルが見つかりません。",
-  "helpers.customScript.runMediaScript.noFolder.warning": "{0}: フォルダーまたはメディアへのパスの指定がされていません。",
-  "helpers.customScript.showOutput.frontMatter.success": "{0}: front matter updated.",
-  "helpers.customScript.showOutput.copyOutput.action": "出力結果をコピー",
-  "helpers.customScript.showOutput.success": "{0}: カスタムスクリプトを実行しました。",
-  "helpers.customScript.validateCommand.error": "不正なコマンド: {0}",
-
-  "helpers.dataFileHelper.process.error": "データファイルの実行中に何らかの問題が発生しました。",
-
-  "helpers.extension.getVersion.changelog": "変更履歴を確認する",
-  "helpers.extension.getVersion.starIt": "⭐️を付ける",
-  "helpers.extension.getVersion.update.notification": "{0} が v{1} に更新されました！新機能をチェックしてください！",
-  "helpers.extension.migrateSettings.deprecated.warning": "\"{0}\"及び\"{1}\"の設定は非推奨になりました。代わりに\"isPublishDate\"と\"isModifiedDate\"の日付フィールドを使用してください。",
-  "helpers.extension.migrateSettings.deprecated.warning.hide": "非表示にする",
-  "helpers.extension.migrateSettings.deprecated.warning.seeGuide": "移行ガイドを読む",
-  "helpers.extension.migrateSettings.templates.quickPick.title": "{0} - テンプレート",
-  "helpers.extension.migrateSettings.templates.quickPick.placeholder": "テンプレート機能の使用を継続しますか？",
-  "helpers.extension.checkIfExtensionCanRun.warning": "Front MatterのBETA版は安定版がインストールされている場合は利用できません。BETA版のみがインストールされていることを確認してください。",
-
-  "helpers.mediaHelper.saveFile.folder.error": "選択されたフォルダーが見つかりません。",
-  "helpers.mediaHelper.saveFile.file.uploaded.success": "ファイル{0}が{1}へアップロードされました。",
-  "helpers.mediaHelper.saveFile.file.uploaded.failed": "申し訳ありません、{0}のアップロード中にエラーが発生しました。",
-  "helpers.mediaHelper.deleteFile.file.deletion.failed": "申し訳ありません、{0}の削除中にエラーが発生しました。",
-
-  "helpers.mediaLibrary.remove.warning": "その場所にはファイル\"{0}\"が既に存在しています。",
-  "helpers.mediaLibrary.remove.error": "申し訳ありません、\"{0}\"を\"{1}\"へのアップロード中にエラーが発生しました。",
-
-  "helpers.openFileInEditor.error": "ファイルを開けません。",
-
-  "helpers.questions.contentTitle.aiInput.title": "タイトルまたはディスクリプション",
-  "helpers.questions.contentTitle.aiInput.prompt": "どんな内容について書きたいですか？",
-  "helpers.questions.contentTitle.aiInput.placeholder": "どんな内容について書きたいですか？",
-  "helpers.questions.contentTitle.aiInput.quickPick.title.separator": "タイトル/ディスクリプション",
-  "helpers.questions.contentTitle.aiInput.quickPick.ai.separator": "AI生成によるタイトル",
-  "helpers.questions.contentTitle.aiInput.select.title": "タイトルを選択",
-  "helpers.questions.contentTitle.aiInput.select.placeholder": "記事に付けるタイトルを選択",
-  "helpers.questions.contentTitle.aiInput.failed": "AIタイトルの取得に失敗しました。自分で作成するか、後からもう一度試してください。",
-  "helpers.questions.contentTitle.aiInput.warning": "記事タイトルの入力がされていません。",
-  "helpers.questions.contentTitle.titleInput.title": "記事タイトル",
-  "helpers.questions.contentTitle.titleInput.prompt": "新しい記事のタイトルを入力してください。",
-  "helpers.questions.contentTitle.titleInput.placeholder": "タイトル",
-  "helpers.questions.contentTitle.titleInput.warning": "記事タイトルの入力がされていません。",
-  "helpers.questions.selectContentFolder.quickPick.title": "フォルダーを選択",
-  "helpers.questions.selectContentFolder.quickPick.placeholder": "記事の保存先を選択してください。",
-  "helpers.questions.selectContentFolder.quickPick.noSelection.warning": "記事の保存先が選択されていません。",
-  "helpers.questions.selectContentType.noContentType.warning": "記事タイプが見つかりません。先に記事タイプを作成してから記事を作成してください。",
-  "helpers.questions.selectContentType.quickPick.title": "記事タイプ",
-  "helpers.questions.selectContentType.quickPick.placeholder": "新規作成する記事の記事タイプを選択してください。",
-  "helpers.questions.selectContentType.noSelection.warning": "記事タイプが選択されていません。",
-
-  "helpers.seoHelper.checkLength.diagnostic.message": "記事{0}の文字数が{1}文字を超えています（現在の文字数: {2}）。SEOの観点上、{1}文字以内に収めることが推奨されます。",
-
-  "helpers.settingsHelper.checkToPromote.message": "ローカル設定が存在します。この設定をグローバル設定(\"frontmatter.json\")に昇格させますか？",
-  "helpers.settingsHelper.promote.success": "全ての設定をチームレベルに昇格しました。",
-  "helpers.settingsHelper.readConfig.progress.title": "{0}: 動的な設定ファイルを読み込んでいます...",
-  "helpers.settingsHelper.readConfig.error": "設定の読み込みでエラーが発生しました。",
-  "helpers.settingsHelper.refreshConfig.success": "設定を再読み込みしました。",
-
-  "helpers.taxonomyHelper.rename.input.title": "タクソノミー名を変更 {0}",
-  "helpers.taxonomyHelper.rename.validate.equalValue": "現在のファイル名とは別のファイル名を入力してください。",
-  "helpers.taxonomyHelper.rename.validate.noValue": "新しいファイル名を入力してください。",
-  "helpers.taxonomyHelper.merge.quickPick.title": "\"{0}\"を別の{1}にマージ",
-  "helpers.taxonomyHelper.merge.quickPick.placeholder": "マージする{0}を選択してください。",
-  "helpers.taxonomyHelper.delete.quickPick.title": "\"{0}\"を{1}から削除",
-  "helpers.taxonomyHelper.delete.quickPick.placeholder": "本当に\"{0}\"を{1}から削除しますか？",
-  "helpers.taxonomyHelper.createNew.input.title": "{0}に新規タクソノミーを作成",
-  "helpers.taxonomyHelper.createNew.input.placeholder": "作成したいタクソノミー名を入力してください。",
-  "helpers.taxonomyHelper.createNew.input.validate.noValue": "タクソノミー名は必須です。",
-  "helpers.taxonomyHelper.createNew.input.validate.exists": "このタクソノミー名は既に存在しています。",
-  "helpers.taxonomyHelper.process.insert": "{0}: 選択した記事に \"{1}\" を追加しています。",
-  "helpers.taxonomyHelper.process.edit": "{0}: {2}内の\"{1}\"を{3}に変更しています。",
-  "helpers.taxonomyHelper.process.merge": "{0}: {2}内の\"{1}\"を{3}にマージしています。",
-  "helpers.taxonomyHelper.process.delete": "{0}: \"{1}\"を{2}から削除しています。",
-  "helpers.taxonomyHelper.process.insert.success": "追加しました。",
-  "helpers.taxonomyHelper.process.edit.success": "変更しました。",
-  "helpers.taxonomyHelper.process.merge.success": "マージしました。",
-  "helpers.taxonomyHelper.process.delete.success": "削除しました。",
-  "helpers.taxonomyHelper.move.quickPick.title": "\"{0}\"を別のタクソノミータイプに移行",
-  "helpers.taxonomyHelper.move.quickPick.placeholder": "移行先のタクソノミータイプを選択してください。",
-  "helpers.taxonomyHelper.move.progress.title": "{0}: \"{1}\"を{2}から\"${3}\"へ移行しています。",
-  "helpers.taxonomyHelper.move.success": "移行しました。",
-
-  "listeners.dashboard.dashboardListener.openConfig.notification": "設定内容を確認するには\"frontmatter.json\"を開いてください。",
-  "listeners.dashboard.dashboardListener.pinItem.noPath.error": "パスが指定されていません。",
-  "listeners.dashboard.dashboardListener.pinItem.coundNotPin.error": "ピン留めができませんでした。",
-  "listeners.dashboard.dashboardListener.pinItem.coundNotUnPin.error": "ピン留めの解除ができませんでした。",
-
+  "dashboard.steps.stepsToGetStarted.assetsFolder.name": "アセットフォルダーの場所はどこですか？",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.description": "記事のメディアファイルを保存するためのフォルダーを選択してください。",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.public.title": "'public'フォルダーを使用する",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.assets.title": "Astroアセットフォルダー(src/assets)を使用する",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.other.description": "別のフォルダを設定する場合は、frontmatter.jsonファイルで手動で行うことができます。",
+  "dashboard.steps.stepsToGetStarted.template.name": "設定テンプレートを使用する",
+  "dashboard.steps.stepsToGetStarted.template.description": "おすすめの設定でfrontmatter.jsonファイルを事前に埋めるテンプレートを選択します。",
  "listeners.dashboard.settingsListener.triggerTemplate.notification": "テンプレートファイルがコピーされました。",
-  "listeners.dashboard.settingsListener.triggerTemplate.progress.title": "テンプレートをダウンロードして初期化しています...",
-  "listeners.dashboard.settingsListener.triggerTemplate.download.error": "テンプレートのダウンロードに失敗しました。",
-  "listeners.dashboard.settingsListener.triggerTemplate.init.error": "テンプレートの初期化に失敗しました。",
-
-  "listeners.dashboard.snippetListener.addSnippet.missingFields.warning": "スニペットのタイトルまたはbodyが空です。",
-  "listeners.dashboard.snippetListener.addSnippet.exists.warning": "同じタイトルのスニペットが既に存在しています。",
-  "listeners.dashboard.snippetListener.updateSnippet.noSnippets.warning": "更新が必要なスニペットはありません。",
-
-  "listeners.general.gitListener.push.error": "submoduleのpushに失敗しました。",
-
-  "listeners.panel.dataListener.aiSuggestTaxonomy.noEditor.error": "アクティブなエディターがありません。",
-  "listeners.panel.dataListener.aiSuggestTaxonomy.noData.error": "記事データがありません。",
-  "listeners.panel.dataListener.getDataFileEntries.noDataFiles.error": "データファイルのエントリーが見つかりませんでした。",
-
-
-  "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noEditor.error": "アクティブなエディターがありません。",
-  "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noData.error": "記事データがありません。",
-
-  "services.modeSwitch.switchMode.quickPick.placeholder": "モードを選択してください。",
-  "services.modeSwitch.switchMode.quickPick.title": "{0}: モードの選択",
-  "services.modeSwitch.setText.mode": "モード: {0}",
-
-  "services.pagesParser.parsePages.statusBar.text": "読み込み中...",
-  "services.pagesParser.parsePages.file.error": "ファイルエラー: {0}",
-
-  "services.sponsorAi.getTitles.warning": "AIによるタイトル生成に時間がかかりすぎています。後でもう一度試してください。",
-  "services.sponsorAi.getDescription.warning": "AIによるディスクリプション生成に時間がかかりすぎています。後でもう一度試してください。",
-  "services.sponsorAi.getTaxonomySuggestions.warning": "AIによるタクソノミー生成に時間がかかりすぎています。後でもう一度試してください。",
-
-  "services.terminal.openLocalServerTerminal.terminalOption.message": "ローカルサーバーを起動"
+  "common.openOnWebsite": "ウェブサイトで開く",
+  "common.filter.value": "{0} でフィルタリング",
+  "dashboard.media.detailsSlideOver.unmapped.description": "未割り当てのファイルのメタデータを再マップしますか",
+  "common.settings": "設定",
+  "common.refreshSettings": "設定の更新",
+  "common.pin": "ピン",
+  "common.unpin": "解除",
+  "settings.view.common": "コモン",
+  "settings.view.contentFolders": "コンテンツ フォルダー",
+  "settings.view.astro": "アストロ",
+  "settings.openOnStartup": "起動時にダッシュボードを開く",
+  "settings.contentTypes": "コンテンツ タイプ",
+  "settings.contentFolders": "コンテンツ フォルダー",
+  "settings.diagnostic": "診断",
+  "settings.diagnostic.description": "診断プログラムを実行して、フロントマター CMS 構成全体を確認できます。",
+  "settings.diagnostic.link": "完全診断を実行する",
+  "settings.commonSettings.website.title": "ウェブサイトとSSGの設定",
+  "settings.commonSettings.previewUrl": "URL のプレビュー",
+  "settings.commonSettings.websiteUrl": "ウェブサイトの URL",
+  "settings.commonSettings.startCommand": "SSG/フレームワーク起動コマンド",
+  "dashboard.contents.overview.pinned": "固定",
+  "dashboard.steps.stepsToGetStarted.astroContentTypes.name": "Astroコンテンツコレクションのコンテンツタイプを作成する",
+  "dashboard.welcomeScreen.link.documentation.label": "ドキュメンテーション",
+  "dashboard.configuration.astro.astroContentTypes.empty": "Astroコンテンツコレクションが見つかりません。",
+  "dashboard.configuration.astro.astroContentTypes.description": "以下のAstroコンテンツコレクションは、コンテンツタイプを生成するために使用できます。"
 }
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -3,7 +3,6 @@
  "common.edit": "Edit",
  "common.delete": "Delete",
  "common.cancel": "Cancel",
-  "common.apply": "Apply",
  "common.clear": "Clear",
  "common.clear.value": "Clear value",
  "common.search": "Search",
@@ -21,7 +20,6 @@
  "common.slug": "Slug",
  "common.support": "Support",
  "common.remove.value": "Remove {0}",
-  "common.filter": "Back",
  "common.filter.value": "Filter by {0}",
  "common.error.message": "Sorry, something went wrong.",
  "common.openOnWebsite": "Open on website",
@@ -34,9 +32,6 @@
  "common.yes": "yes",
  "common.no": "no",
  "common.openSettings": "Open settings",
-  "common.back": "Back",
-
-  "loading.initPages": "Loading content",

  "notifications.outputChannel.link": "output window",
  "notifications.outputChannel.description": "Check the {0} for more details.",
@@ -50,11 +45,6 @@
  "settings.diagnostic": "Diagnostic",
  "settings.diagnostic.description": "You can run the diagnostics to check the whole Front Matter CMS configuration.",
  "settings.diagnostic.link": "Run full diagnostics",
-  "settings.git": "Git synchronization",
-  "settings.git.enabled": "Enable Git synchronization to easily sync your changes with your repository.",
-  "settings.git.commitMessage": "Commit message",
-  "settings.git.submoduleInfo": "When working with Git submodules, you can refer to the submodule settings in the documentation.",
-  "settings.git.submoduleLink": "Read more about Git submodules",

  "settings.commonSettings.website.title": "Website and SSG settings",
  "settings.commonSettings.previewUrl": "Preview URL",
@@ -115,7 +105,6 @@
  "dashboard.dataView.dataView.getStarted": "Select a data type to get started",
  "dashboard.dataView.dataView.noDataFiles": "No data files found",
  "dashboard.dataView.dataView.getStarted.link": "Read more to get started using data files",
-  "dashboard.dataView.dataView.update.message": "Updated your data entries",

  "dashboard.dataView.emptyView.heading": "Select your date type first",

@@ -223,7 +212,7 @@
  "dashboard.media.media.dragAndDrop": "You can also drag and drop images from your desktop and select them once uploaded.",
  "dashboard.media.media.folder.upload": "Upload to {0}",
  "dashboard.media.media.folder.default": "No folder selected, files you drop will be added to the {0} folder",
-  "dashboard.media.media.placeholder": "No media files to show. You can drag&drop new files by holding your [shift] key.",
+  "dashboard.media.media.placeholder": "No media files to show. You can drag &amp; drop new files by holding your [shift] key.",
  "dashboard.media.media.contentFolder": "Content folder",
  "dashboard.media.media.publicFolder": "Public folder",

@@ -283,8 +272,6 @@
  "dashboard.steps.stepsToGetStarted.contentFolders.information.description": "You can also perform this action by right-clicking on the folder in the explorer view, and selecting register folder",
  "dashboard.steps.stepsToGetStarted.tags.name": "Import all tags and categories (optional)",
  "dashboard.steps.stepsToGetStarted.tags.description": "Now that Front Matter knows all the content folders. Would you like to import all tags and categories from the available content?",
-  "dashboard.steps.stepsToGetStarted.git.name": "Do you want to enable Git synchronization?",
-  "dashboard.steps.stepsToGetStarted.git.description": "Enable Git synchronization to eaily sync your changes with your repository.",
  "dashboard.steps.stepsToGetStarted.showDashboard.name": "Show the dashboard",
  "dashboard.steps.stepsToGetStarted.showDashboard.description": "Once all actions are completed, the dashboard can be loaded.",
  "dashboard.steps.stepsToGetStarted.template.name": "Use a configuration template",
@@ -307,10 +294,6 @@
  "dashboard.taxonomyView.taxonomyManager.table.heading.action": "Action",
  "dashboard.taxonomyView.taxonomyManager.table.row.empty": "No {0} found",
  "dashboard.taxonomyView.taxonomyManager.table.unmapped.title": "Missing in your settings",
-  "dashboard.taxonomyView.taxonomyManager.filterInput.placeholder": "Filter",
-
-  "dashboard.taxonomyView.taxonomyTagging.pageTitle": "Map your content with: {0}",
-  "dashboard.taxonomyView.taxonomyTagging.checkbox": "Tag page with {0}",

  "dashboard.taxonomyView.taxonomyView.navigationBar.title": "Select the taxonomy",
  "dashboard.taxonomyView.taxonomyView.button.import": "Import taxonomy",
@@ -482,6 +465,8 @@

  "panel.viewPanel.mediaInsert": "Continue in the media dashboard to select the image you want to insert.",

+  "commands.article.notification.noTaxonomy": "No {0} configured.",
+  "commands.article.quickPick.placeholder": "Select your {0} to insert.",
  "commands.article.setDate.error": "Something failed while parsing the date format. Check your \"{0}\" setting.",
  "commands.article.updateSlug.error": "Failed to rename file: {0}",

@@ -653,6 +638,7 @@
  "helpers.questions.contentTitle.titleInput.warning": "You did not specify a title for your content.",
  "helpers.questions.selectContentFolder.quickPick.title": "Select a folder",
  "helpers.questions.selectContentFolder.quickPick.placeholder": "Select where you want to create your content",
+  "helpers.questions.selectContentFolder.quickPick.noFolders.warning": "No page folders were configured.",
  "helpers.questions.selectContentFolder.quickPick.noSelection.warning": "You didn't select a place where you wanted to create your content.",
  "helpers.questions.selectContentType.noContentType.warning": "No content types found. Please create a content type first.",
  "helpers.questions.selectContentType.quickPick.title": "Content type",
@@ -678,11 +664,9 @@
  "helpers.taxonomyHelper.createNew.input.placeholder": "Enter the value you want to add",
  "helpers.taxonomyHelper.createNew.input.validate.noValue": "A value must be provided.",
  "helpers.taxonomyHelper.createNew.input.validate.exists": "The value already exists.",
-  "helpers.taxonomyHelper.process.insert": "{0}: Inserting \"{1}\" to your selected pages.",
  "helpers.taxonomyHelper.process.edit": "{0}: Renaming \"{1}\" from {2} to {3}.",
  "helpers.taxonomyHelper.process.merge": "{0}: Merging \"{1}\" from {2} to {3}.",
  "helpers.taxonomyHelper.process.delete": "{0}: Deleting \"{1}\" from {2}.",
-  "helpers.taxonomyHelper.process.insert.success": "Insert completed.",
  "helpers.taxonomyHelper.process.edit.success": "Edit completed.",
  "helpers.taxonomyHelper.process.merge.success": "Merge completed.",
  "helpers.taxonomyHelper.process.delete.success": "Deletion completed.",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
  "displayName": "Front Matter CMS",
  "description": "Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice like: Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and many more...",
  "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "9.5.0",
+  "version": "9.4.0",
  "preview": false,
  "publisher": "eliostruyf",
  "galleryBanner": {
@@ -492,31 +492,6 @@
          "markdownDescription": "%setting.frontMatter.content.wysiwyg.markdownDescription%",
          "scope": "Content"
        },
-        "frontMatter.content.filters": {
-          "type": "array",
-          "default": [
-            "pageFolders",
-            "tags",
-            "categories"
-          ],
-          "markdownDescription": "%setting.frontMatter.content.filters.markdownDescription%",
-          "items": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "object",
-              "properties": {
-                "title": {
-                  "type": "string"
-                },
-                "name": {
-                  "type": "string"
-                }
-              }
-            }
-          ]
-        },
        "frontMatter.custom.scripts": {
          "type": "array",
          "default": [],
@@ -2205,12 +2180,6 @@
      }
    ],
    "menus": {
-      "webview/context": [
-        {
-          "command": "workbench.action.webview.openDeveloperTools",
-          "when": "frontMatter:isDevelopment"
-        }
-      ],
      "editor/title": [
        {
          "command": "frontMatter.markup.heading",
@@ -2409,10 +2378,6 @@
          "command": "frontMatter.markup.options",
          "when": "false"
        },
-        {
-          "command": "frontMatter.config.reload",
-          "when": "false"
-        },
        {
          "command": "frontMatter.insertSnippet",
          "when": "frontMatter:file:isValid == true && frontMatter:dashboard:snippets:enabled"
@@ -2566,6 +2531,9 @@
    "prod:panel": "webpack --mode production --config ./webpack/panel.config.js",
    "test-compile": "tsc -p ./",
    "clean": "rimraf dist",
+    "start:site": "cd ./docs && npm run dev",
+    "clean:test": "rm ./e2e/sample/frontmatter.json || exit 0 && rm -rf ./e2e/sample/.frontmatter || exit 0",
+    "test": "npm run lint; tsc -p tsconfig.e2e.json && npm run clean:test && npm run i -g @vscode/vsce && node ./e2e/out/runTests.js",
    "lint": "eslint --max-warnings=0 ./src/{commands,components}",
    "prettier": "prettier --write ./src",
    "localization:watch": "node ./scripts/watch-localization.js",
@@ -2578,29 +2546,33 @@
    "@bendera/vscode-webview-elements": "0.6.2",
    "@estruyf/vscode": "^1.1.0",
    "@headlessui/react": "^1.7.17",
-    "@heroicons/react": "^2.1.1",
+    "@heroicons/react": "1.0.4",
    "@iarna/toml": "2.2.3",
    "@octokit/rest": "^18.12.0",
    "@popperjs/core": "^2.11.6",
    "@sentry/react": "^6.19.7",
    "@sentry/tracing": "^6.19.7",
    "@tailwindcss/forms": "^0.5.3",
+    "@types/chai": "^4.3.4",
    "@types/glob": "7.1.3",
    "@types/invariant": "^2.2.35",
-    "@types/js-yaml": "^4.0.9",
+    "@types/js-yaml": "3.12.1",
    "@types/lodash.omit": "^4.5.7",
    "@types/lodash.uniqby": "4.7.6",
    "@types/lodash.xor": "^4.5.7",
    "@types/mdast": "^3.0.10",
    "@types/mime-types": "^2.1.1",
+    "@types/mocha": "^5.2.7",
    "@types/mustache": "^4.2.2",
-    "@types/node": "^18.17.1",
+    "@types/node": "10.17.48",
+    "@types/node-fetch": "^2.6.2",
    "@types/react": "17.0.0",
    "@types/react-datepicker": "^4.8.0",
    "@types/react-dom": "17.0.0",
    "@types/vscode": "^1.73.0",
    "@typescript-eslint/eslint-plugin": "^5.50.0",
    "@typescript-eslint/parser": "^5.50.0",
+    "@vscode/codicons": "0.0.20",
    "@vscode/l10n": "^0.0.14",
    "@vscode/webview-ui-toolkit": "^1.2.2",
    "@webpack-cli/serve": "^1.7.0",
@@ -2608,6 +2580,7 @@
    "array-move": "^4.0.0",
    "assert": "^2.0.0",
    "autoprefixer": "^10.4.13",
+    "chai": "^4.3.7",
    "cheerio": "1.0.0-rc.12",
    "css-loader": "5.2.7",
    "date-fns": "2.23.0",
@@ -2630,7 +2603,9 @@
    "lodash.xor": "^4.5.0",
    "mdast-util-from-markdown": "1.0.0",
    "mime-types": "^2.1.35",
+    "mocha": "^10.2.0",
    "mustache": "^4.2.0",
+    "node-fetch": "^2.6.9",
    "node-json-db": "^2.2.0",
    "npm-run-all": "^4.1.5",
    "path-browserify": "^1.0.1",
@@ -2648,6 +2623,7 @@
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.8.0",
    "react-sortable-hoc": "^2.0.0",
+    "react-toastify": "^8.2.0",
    "recoil": "^0.4.1",
    "remark-gfm": "^3.0.1",
    "rimraf": "^3.0.2",
@@ -2662,6 +2638,7 @@
    "uniforms-bridge-json-schema": "^3.10.2",
    "uniforms-unstyled": "^3.10.2",
    "url-join-ts": "^1.0.5",
+    "vscode-extension-tester": "^5.3.0",
    "wc-react": "github:estruyf/wc-react",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.7.0",
--- a/package.nls.ja.json
+++ b/package.nls.ja.json
@@ -40,7 +40,7 @@
  "command.frontMatter.preview": "記事のプレビューを開く",
  "command.frontMatter.chatbot": "Front Matter AIに質問する",
  "command.frontMatter.promoteSettings": "ローカル設定をチームレベルへ昇格させる",
-  "command.frontMatter.remap": "全ての記事のタグまたはカテゴリーを再構成または削除する",
+  "command.frontMatter.remap": "全ての記事のタグまたはカテゴリーを再配置または削除する",
  "command.frontMatter.setLastModifiedDate": "最終更新日を設定する",
  "command.frontMatter.markup.strikethrough": "取り消し線",
  "command.frontMatter.mode.switch": "モードの切り替え",
@@ -53,7 +53,7 @@
  "setting.frontMatter.projects.items.properties.name.markdownDescription": "プロジェクトの名前を指定します。",
  "setting.frontMatter.projects.items.properties.default.markdownDescription": "このプロジェクトを読み込む既定のプロジェクトにするかどうかを指定します。",
  "setting.frontMatter.sponsors.ai.enabled.markdownDescription": "AIによる提案を利用します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.sponsors.ai.enabled)",
-  "setting.frontMatter.extensibility.scripts.markdownDescription": "Front Matter CMSで読み込むスクリプトのリストを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.extensibility.scripts)",
+  "setting.frontMatter.extensibility.scripts.markdownDescription": "Front Matter CMSで読み込むスクリプトのリストを指定します。. [ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.extensibility.scripts)",
  "setting.frontMatter.experimental.markdownDescription": "実験的な機能をオンにします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.experimental)",
  "setting.frontMatter.extends.markdownDescription": "Front Matter CMSの構成を拡張するパス/URLのリストを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.extends)",
  "setting.frontMatter.content.autoUpdateDate.markdownDescription": "記事やページの最終編集日を自動で更新します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.autoupdatedate)",
@@ -62,26 +62,25 @@
  "setting.frontMatter.content.draftField.markdownDescription": "記事の下書きステータスを管理するフィールドを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.draftfield)",
  "setting.frontMatter.content.draftField.properties.type.description": "使用する下書きフィールドの種類",
  "setting.frontMatter.content.draftField.properties.name.description": "使用するフィールドの名前",
-  "setting.frontMatter.content.draftField.properties.invert.description": "既定では、記事が下書きの場合、下書きフィールドは true に設定されます。これを true に設定すると、false に設定されます。",
+  "setting.frontMatter.content.draftField.properties.invert.description": "既定では、コンテンツが下書きの場合、下書きフィールドは true に設定されます。これを true に設定すると、false に設定されます。",
  "setting.frontMatter.content.draftField.properties.choices.description": "フィールドの選択肢のリスト",
  "setting.frontMatter.content.fmHighlight.markdownDescription": "Markdownファイル内のfront matterをハイライトします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.fmhighlight)",
  "setting.frontMatter.content.hideFm.markdownDescription": "Markdownファイル内のfront matterを非表示にします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.hidefm)",
  "setting.frontMatter.content.hideFmMessage.markdownDescription": "front matterが非表示の際に、編集画面に表示するメッセージを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.hidefmmessage)",
  "setting.frontMatter.content.pageFolders.markdownDescription": "フォルダーを配列で定義して、この拡張機能が記事を取得したり新しい記事を作成できるようにします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.pagefolders)",
-  "setting.frontMatter.content.pageFolders.items.properties.title.description": "フォルダーの名前",
-  "setting.frontMatter.content.pageFolders.items.properties.path.description": "フォルダーのパス",
+  "setting.frontMatter.content.pageFolders.items.properties.title.description": "フォルダの名前",
+  "setting.frontMatter.content.pageFolders.items.properties.path.description": "フォルダのパス",
  "setting.frontMatter.content.pageFolders.items.properties.excludeSubdir.description": "サブディレクトリを除外する",
  "setting.frontMatter.content.pageFolders.items.properties.previewPath.description": "フォルダーのカスタム プレビュー パスを定義します。",
-  "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "ファイル名の接頭辞を定義します。",
-  "setting.frontMatter.content.pageFolders.items.properties.contentTypes.description": "現在の場所に使用できる記事タイプを定義します。定義しない場合は、全ての記事タイプを使用できます。",
-  "setting.frontMatter.content.pageFolders.items.properties.disableCreation.description": "フォルダー内の新しい記事の作成を無効にします。",
+  "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "ファイル名のプレフィックスを定義します。",
+  "setting.frontMatter.content.pageFolders.items.properties.contentTypes.description": "現在の場所に使用できるコンテンツ タイプを定義します。定義しない場合は、すべてのコンテンツ タイプを使用できます。",
  "setting.frontMatter.content.placeholders.markdownDescription": "記事タイプとテンプレートで使用するプレースホルダーを配列で定義して、記事のfront matterを自動で入力できるようにします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.placeholders)",
-  "setting.frontMatter.content.placeholders.items.properties.id.description": "プレースホルダーのIDを記事タイプまたはテンプレートで、次のように使用します: {{placeholder}}",
+  "setting.frontMatter.content.placeholders.items.properties.id.description": "プレースホルダーの ID をコンテンツ タイプまたはテンプレートで、次のように使用します: {{placeholder}}",
  "setting.frontMatter.content.placeholders.items.properties.value.description": "プレースホルダーの値",
  "setting.frontMatter.content.placeholders.items.properties.script.description": "プレースホルダーの値を取得するために実行するスクリプト",
  "setting.frontMatter.content.publicFolder.markdownDescription": "アセットが保存されているフォルダーを設定します。例えば、Hugoでは`static`フォルダーです。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.publicfolder)",
  "setting.frontMatter.content.publicFolder.properties.path.description": "アセットフォルダーのパスを指定します。",
-  "setting.frontMatter.content.publicFolder.properties.relative.description": "メディアファイルへのパスが記事ファイルに対して相対的であるかを定義します。",
+  "setting.frontMatter.content.publicFolder.properties.relative.description": "メディアファイルへのパスがコンテンツファイルに対して相対的であるかを定義します。",
  "setting.frontMatter.snippets.wrapper.enabled.markdownDescription": "スニペット挿入時にコメントでラップします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.snippets.wrapper.enabled)",
  "setting.frontMatter.content.snippets.markdownDescription": "記事中に使用するスニペットを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.snippets)",
  "setting.frontMatter.content.sorting.markdownDescription": "ダッシュボード上での記事の並べ替えオプションを追加します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.sorting)",
@@ -96,23 +95,22 @@
  "setting.frontMatter.custom.scripts.items.properties.id.description": "スクリプトの ID。",
  "setting.frontMatter.custom.scripts.items.properties.title.description": "スクリプトに付けるタイトル。ボタンのタイトルとして表示されます。",
  "setting.frontMatter.custom.scripts.items.properties.script.description": "実行するスクリプトへのパス",
-  "setting.frontMatter.custom.scripts.items.properties.nodeBin.description": "実行可能なNode.jsへのパス。これは、NVMを使用する際に、Node.jsのバージョンが混同されないようにするために必要です。(非推奨: 代わりにコマンドプロパティを使用してください)",
-  "setting.frontMatter.custom.scripts.items.properties.bulk.description": "全ての記事ファイルに対してスクリプトを実行する",
-  "setting.frontMatter.custom.scripts.items.properties.output.description": "スクリプト出力を出力する場所を定義します。デフォルトは通知表示ですが、エディターパネルに表示するように指定できます。",
+  "setting.frontMatter.custom.scripts.items.properties.nodeBin.description": "ノード実行可能ファイルへのパス。これは、使用するノードのバージョンが混同されないように、NVM を使用するときに必要です。(非推奨: 代わりにコマンド プロパティを使用してください)",
+  "setting.frontMatter.custom.scripts.items.properties.bulk.description": "すべてのコンテンツ ファイルに対してスクリプトを実行する",
+  "setting.frontMatter.custom.scripts.items.properties.output.description": "スクリプト出力を出力する場所を定義します。デフォルトは通知ですが、エディターパネルに表示するように指定できます。",
  "setting.frontMatter.custom.scripts.items.properties.outputType.description": "エディター・パネルの出力のタイプ。たとえば、「マークダウン」に変更するために使用できます",
  "setting.frontMatter.custom.scripts.items.properties.type.description": "スクリプトが使用される型。",
  "setting.frontMatter.custom.scripts.items.properties.command.description": "実行するスクリプトの種類。",
  "setting.frontMatter.custom.scripts.items.properties.hidden.description": "UI からアクションを非表示にする",
  "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.type.description": "スクリプトを使用する必要がある環境タイプ",
  "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.script.description": "実行するスクリプトへのパス",
-  "setting.frontMatter.custom.scripts.items.properties.contentTypes.description": "スクリプトを使用する記事タイプを定義します。何も定義されていない場合は、全ての型で使用できます。",
  "setting.frontMatter.dashboard.content.pagination.markdownDescription": "ページネーションの有効/無効を設定します。ページ数は最大52まで設定できます。規定値は`16`です。ページ分割を無効にするには`false`を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.content.pagination)",
  "setting.frontMatter.dashboard.content.cardTags.markdownDescription": "記事一覧をカード型で表示する際、どのメタデータフィールドをタグとして使うかを指定します。空欄またはnull値の場合、タグは表示されなくなります。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.content.cardtags)",
  "setting.frontMatter.dashboard.content.card.fields.state.markdownDescription": "記事一覧をカード型で表示する際、下書き・公開済みのステータスを表示します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.state)",
  "setting.frontMatter.dashboard.content.card.fields.date.markdownDescription": "記事一覧をカード型で表示する際、日付を表示します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.date)",
  "setting.frontMatter.dashboard.content.card.fields.description.markdownDescription": "記事一覧をカード型で表示する際、どのメタデータフィールドをディスクリプションとして使うかを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.description)",
  "setting.frontMatter.dashboard.content.card.fields.title.markdownDescription": "記事一覧をカード型で表示する際、どのメタデータフィールドをタイトルとして使うかを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.title)",
-  "setting.frontMatter.dashboard.mediaSnippet.markdownDescription": "カスタムメディア挿入マークアップのスニペットを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.mediasnippet)",
+  "setting.frontMatter.dashboard.mediaSnippet.markdownDescription": "カスタムメディア挿入マークアップのスニペットを指定します。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.mediasnippet)",
  "setting.frontMatter.dashboard.mediaSnippet.items.description": "スニペット内で `{mediaUrl}`, `{caption}`, `{alt}`, `{filename}`, `{mediaHeight}`, `{mediaWidth}` のプレースホルダーを使用して、メディア情報を自動的に挿入します。",
  "setting.frontMatter.dashboard.openOnStart.markdownDescription": "VS Codeの起動時にダッシュボードを表示します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.openonstart)",
  "setting.frontMatter.data.files.markdownDescription": "ウェブサイトに使用するデータのファイルを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.data.files)",
@@ -150,24 +148,23 @@
  "setting.frontMatter.global.modes.items.properties.id.description": "モードの ID。",
  "setting.frontMatter.global.modes.items.properties.features.description": "モードに使用する機能。",
  "setting.frontMatter.global.notifications.markdownDescription": "表示したい通知を設定します。既定では全ての通知が表示されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.global.notifications)",
-  "setting.frontMatter.global.disabledNotifications.markdownDescription": "これは、Front Matter CMSで無効にできる通知タイプの配列です。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
+  "setting.frontMatter.global.disabledNotificaitons.markdownDescription": "表示しない通知を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
  "setting.frontMatter.media.defaultSorting.markdownDescription": "ダッシュボードのメディア一覧での既定の並び順を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.media.defaultsorting)",
  "setting.frontMatter.media.supportedMimeTypes.markdownDescription": "メディアファイルでサポートされるMIMEタイプを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.media.supportedmimetypes)",
-  "setting.frontMatter.panel.freeform.markdownDescription": "未登録のタグ/カテゴリーをタグピッカーに入力可能にするかどうかを設定します（有効にすると、後で保存するオプションが使えます）。規定値はtrue。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform)",
-  "setting.frontMatter.panel.actions.disabled.markdownDescription": "パネル内で非表示にしたいコマンドを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.actions.disabled)",
+  "setting.frontMatter.panel.freeform.markdownDescription": "未登録のタグ/カテゴリーをタグピッカーに入力することを許可するかどうかを設定します（有効にすると、後で保存するオプションが使えます）。規定値はtrue。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform)",
  "setting.frontMatter.preview.host.markdownDescription": "プレビュー表示に使用するホストのURLを設定します（例：`http://localhost:1313`）。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.host)",
  "setting.frontMatter.preview.pathName.markdownDescription": "ホストパスとスラッグの間に追加したいパスを設定します。例えば、パスに`yyyy/MM`などの日付を含めたい場合等に使えます。日付は記事の日付フィールドの値に基づいて生成されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.pathname)",
  "setting.frontMatter.site.baseURL.markdownDescription": "ベースURLを設定します。これはSEOチェックに利用されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.site.baseurl)",
-  "setting.frontMatter.taxonomy.alignFilename.markdownDescription": "ファイル生成時にファイル名をスラッグに合わせます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.alignfilename)",
+  "setting.frontMatter.taxonomy.alignFilename.markdownDescription": "ファイル生成時にファイル名をスラッグに合わせる[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.alignfilename)",
  "setting.frontMatter.taxonomy.categories.markdownDescription": "Front Matterで利用するカテゴリーを管理します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.categories)",
  "setting.frontMatter.taxonomy.commaSeparatedFields.markdownDescription": "カンマ区切りで配列を管理するフィールド名を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.commaseparatedfields)",
  "setting.frontMatter.taxonomy.commaSeparatedFields.items.description": "コンマ区切りの配列として使用するフィールドの名前。",
  "setting.frontMatter.taxonomy.contentTypes.markdownDescription": "記事・ページ・その他で利用したい記事タイプを設定します。front matterで正しく`type`が設定されていることを確認してください。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.contenttypes)",
-  "setting.frontMatter.taxonomy.contentTypes.items.description": "Front Matterで使用する記事タイプを定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.description": "Front Matterで使用するコンテンツタイプを定義します。",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.name.description": "フィールドの種類を定義する",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fileType.description": "作成する記事タイプを指定します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.description": "記事タイプのフィールドを定義する",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.description": "Front Matterで使用する記事タイプを定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fileType.description": "作成するコンテンツの種類を指定します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.description": "コンテンツ タイプのフィールドを定義する",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.description": "Front Matterで使用するコンテンツタイプを定義します。",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.type.description": "フィールドの種類を定義する",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.name.description": "使用するフィールドの名前",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.title.description": "UI に表示するタイトル",
@@ -179,10 +176,10 @@
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.single.description": "単一行フィールドである",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.wysiwyg.description": "WYSIWYG フィールド (HTML 出力) である",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.multiple.description": "複数の値を選択できますか?",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPreviewImage.description": "画像フィールドをプレビューとして使用できるかどうかを指定します。記事タイプごとに使用できるプレビュー画像は1つだけです。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPreviewImage.description": "画像フィールドをプレビューとして使用できるかどうかを指定します。コンテンツ タイプごとに使用できるプレビュー画像は 1 つだけです。",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.hidden.description": "メタデータ セクションからフィールドを非表示にしますか?",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description": "分類フィールドのID。「タグ」または「カテゴリ」の値を含めることはできません。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fileExtensions.description": "ファイルピッカーで許可するファイル拡張子を指定する",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description": "分類フィールドの ID。「タグ」または「カテゴリ」の値を含めることはできません。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fileExtensions.description": "ファイル ピッカーで許可するファイル拡張子を指定する",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fieldGroup.description": "'frontMatter.taxonomy.fieldGroups' 設定で定義されているフィールドグループの ID",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataType.description": "'frontMatter.data.types' 設定で定義されているデータ型の ID",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.description": "数値フィールドのオプションを指定する",
@@ -191,7 +188,6 @@
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.max.description": "最大値",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.step.description": "ステップ値",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyLimit.description": "選択する分類の数を制限します。無制限を許可するには 0 に設定します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.singleValueAsString.description": "配列内の要素が1つだけの時、配列ではなく文字列として扱います。",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPublishDate.description": "フィールドが公開日フィールドであるかどうかを指定します",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isModifiedDate.description": "フィールドが変更日フィールドであるかどうかを指定します",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileId.description": "このフィールドに使用するデータファイルのIDを指定します",
@@ -201,31 +197,30 @@
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.encodeEmoji.description": "フィールドが絵文字をエンコードするかどうかを指定します",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dateFormat.description": "使用する日付形式を指定する",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.required.description": "フィールドが必須かどうかを指定します",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeName.description": "記事タイプを指定して、contentRelationship フィールドのコンテンツをフィルター処理します",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeName.description": "コンテンツ タイプ名を指定して、contentRelationship フィールドのコンテンツをフィルター処理します",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeValue.description": "コンテンツリレーションシップフィールドに挿入する値を指定します",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.description": "フィールドを表示する条件を指定する",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.fieldRef.description": "使用するフィールド ID",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.operator.description": "使用する演算子",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.value.description": "比較する値",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.caseSensitive.description": "比較で大文字と小文字を区別するかどうかを指定します。デフォルト: true",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.pageBundle.description": "新しい記事を作成するときにフォルダーを作成するかどうかを指定します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description": "記事タイプのカスタム プレビュー パスを定義します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.template.description": "新しい記事の作成に使用できるオプションのテンプレート。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.postScript.description": "新しい記事の作成後に使用できるオプションのポストスクリプト。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.filePrefix.description": "ファイル名の接頭辞を定義します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.defaultFileName.description": "新しい記事の作成時に使用する既定のファイル名。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.caseSensitive.description": "比較で大文字と小文字を区別するかどうかを指定します。デフォルト: 真",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.pageBundle.description": "新しいコンテンツを作成するときにフォルダーを作成するかどうかを指定します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description": "コンテンツ タイプのカスタム プレビュー パスを定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.template.description": "新しいコンテンツの作成に使用できるオプションのテンプレート。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.postScript.description": "新しいコンテンツの作成後に使用できるオプションのポストスクリプト。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.filePrefix.description": "ファイル名のプレフィックスを定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.defaultFileName.description": "新しいコンテンツを作成するときに使用する既定のファイル名。",
  "setting.frontMatter.taxonomy.customTaxonomy.markdownDescription": "カスタムタクソノミーのフィールドデータを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
  "setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description": "分類フィールドの ID。「タグ」または「カテゴリ」の値を含めることはできません。",
  "setting.frontMatter.taxonomy.customTaxonomy.items.properties.options.description": "選択できるオプション。",
-  "setting.frontMatter.taxonomy.dateField.markdownDescription": "この設定は、記事の公開日フィールドを定義するために使用されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.datefield)",
+  "setting.frontMatter.taxonomy.dateField.markdownDescription": "この設定は、記事の公開日フィールドを定義するために使用されます。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.datefield)",
  "setting.frontMatter.taxonomy.dateFormat.markdownDescription": "記事の日付フォーマットを指定します。詳しくは[date-fns formatting](https://date-fns.org/v2.0.1/docs/format)を確認してください。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.dateformat)",
  "setting.frontMatter.taxonomy.fieldGroups.markdownDescription": "ブロックフィールドで使用したいフィールドグループを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.fieldgroups)",
  "setting.frontMatter.taxonomy.fieldGroups.items.properties.id.description": "フィールドグループの名前",
  "setting.frontMatter.taxonomy.fieldGroups.items.properties.labelField.description": "表示値として使用するフィールドの名前",
  "setting.frontMatter.taxonomy.frontMatterType.markdownDescription": "front matterの形式を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.frontmattertype)",
  "setting.frontMatter.taxonomy.indentArrays.markdownDescription": "front matterメタデータが配列の場合はインデント（字下げ）させます。規定値はtrueです。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.indentarrays)",
-  "setting.frontMatter.taxonomy.modifiedField.markdownDescription": "この設定は、記事の変更日フィールドを定義するために使用されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.modifiedfield)",
-  "setting.frontMatter.taxonomy.quoteStringValues.markdownDescription": "front matterの文字列の値をクォーテーションで囲みます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.quotestringvalues)",
+  "setting.frontMatter.taxonomy.modifiedField.markdownDescription": "この設定は、記事の変更日フィールドを定義するために使用されます。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.modifiedfield)",
  "setting.frontMatter.taxonomy.noPropertyValueQuotes.markdownDescription": "引用符を付与しないメタデータを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.nopropertyvaluequotes)",
  "setting.frontMatter.taxonomy.noPropertyValueQuotes.items.description": "引用符を削除したいプロパティの名前。",
  "setting.frontMatter.taxonomy.seoContentLengh.markdownDescription": "最適な記事の長さを指定します。2021年のSEOでは、1,760語から2,400語の間が最も理想的とされています。（-1に設定するとオフになります。）[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seocontentlengh)",
@@ -242,13 +237,14 @@
  "setting.frontMatter.templates.folder.markdownDescription": "テンプレートを保存するフォルダーを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.folder)",
  "setting.frontMatter.templates.prefix.markdownDescription": "新しい記事の作成時、ファイル名に付与する接頭辞を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.prefix)",
  "setting.frontMatter.dashboard.mediaSnippet.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。メディア スニペットは 'frontMatter.content.snippet' 設定で定義してください。",
-  "setting.frontMatter.taxonomy.dateField.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。代わりに、記事タイプの日付フィールドで新しい 'isPublishDate' 設定を使用してください。",
-  "setting.frontMatter.taxonomy.modifiedField.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。代わりに、記事タイプの日付フィールドで新しい 'isModifiedDate' 設定を使用してください。",
+  "setting.frontMatter.taxonomy.dateField.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。代わりに、コンテンツ タイプの日付フィールドで新しい 'isPublishDate' 設定を使用してください。",
+  "setting.frontMatter.taxonomy.modifiedField.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。代わりに、コンテンツ タイプの日付フィールドで新しい 'isModifiedDate' 設定を使用してください。",
+  "setting.frontMatter.global.disabledNotifications.markdownDescription": "これは、Front Matter CMS で無効にできる通知タイプの配列です。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.customType.description": "使用するユーザー設定フィールド型の名前を指定します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.clearEmpty.description": "空の値をクリアするかどうかを指定します。",
-  "setting.frontMatter.website.host.markdownDescription": "ウェブサイトのホストURLを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.website.url)",
-  "command.frontMatter.settings.refresh": "Front Matterの設定の再読み込み",
-  "setting.frontMatter.config.dynamicFilePath.markdownDescription": "動的構成ファイルへのパスを指定します (例: [[ワークスペース]]/config.js)。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.config.dynamicfilepath)",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.allowAsSubContent.description": "記事をサブコンテンツとして作成可能かどうかを設定します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.isSubContent.description": "記事をサブコンテンツとして作成するかどうかを設定します。"
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.clearEmpty.description": "空の値をクリアするかどうかを指定します。",
+  "setting.frontMatter.website.host.markdownDescription": "ウェブサイトのホスト URL を指定します。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.website.url)",
+  "command.frontMatter.settings.refresh": "フロントマター設定の更新",
+  "setting.frontMatter.config.dynamicFilePath.markdownDescription": "動的構成ファイルへのパスを指定します (例: [[ワークスペース]]/config.js)。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.config.dynamicfilepath)",
+  "setting.frontMatter.content.pageFolders.items.properties.disableCreation.description": "フォルダー内の新しいコンテンツの作成を無効にします。",
+  "setting.frontMatter.custom.scripts.items.properties.contentTypes.description": "スクリプトを使用するコンテンツ タイプを定義します。何も定義されていない場合は、すべての型で使用できます。"
 }
--- a/package.nls.json
+++ b/package.nls.json
@@ -92,7 +92,6 @@
  "setting.frontMatter.content.sorting.items.properties.type.description": "Type of the field value",
  "setting.frontMatter.content.supportedFileTypes.markdownDescription": "Specify the file types that you want to use in Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.supportedfiletypes)",
  "setting.frontMatter.content.wysiwyg.markdownDescription": "Specifies if you want to enable/disable the What You See, Is What You Get (WYSIWYG) markdown controls. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.wysiwyg)",
-  "setting.frontMatter.content.filters.markdownDescription": "Specify the filters you want to use for your content dashboard. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.filters)",
  "setting.frontMatter.custom.scripts.markdownDescription": "Specify the path to a Node.js script to execute. The current file path will be provided as an argument. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.custom.scripts)",
  "setting.frontMatter.custom.scripts.items.properties.id.description": "ID of the script.",
  "setting.frontMatter.custom.scripts.items.properties.title.description": "Title you want to give to your script. Will be shown as the title of the button.",
--- a/src/commands/Article.ts
+++ b/src/commands/Article.ts
@@ -13,9 +13,9 @@ import {
  TelemetryEvent
 } from './../constants';
 import * as vscode from 'vscode';
-import { CustomPlaceholder, Field } from '../models';
+import { CustomPlaceholder, Field, TaxonomyType } from '../models';
 import { format } from 'date-fns';
-import { ArticleHelper, Settings, SlugHelper } from '../helpers';
+import { ArticleHelper, Settings, SlugHelper, TaxonomyHelper } from '../helpers';
 import { Notifications } from '../helpers/Notifications';
 import { extname, basename, parse, dirname } from 'path';
 import { COMMAND_NAME, DefaultFields } from '../constants';
@@ -33,6 +33,80 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';

 export class Article {
+  /**
+   * Insert taxonomy
+   *
+   * @param type
+   */
+  public static async insert(type: TaxonomyType) {
+    const editor = vscode.window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+
+    const article = ArticleHelper.getCurrent();
+
+    if (!article) {
+      return;
+    }
+
+    let options: vscode.QuickPickItem[] = [];
+    const matterProp: string = type === TaxonomyType.Tag ? 'tags' : 'categories';
+
+    // Add the selected options to the options array
+    if (article.data[matterProp]) {
+      const propData = article.data[matterProp];
+      if (propData && propData.length > 0) {
+        options = [...propData]
+          .filter((p) => p)
+          .map(
+            (p) =>
+              ({
+                label: p,
+                picked: true
+              } as vscode.QuickPickItem)
+          );
+      }
+    }
+
+    // Add all the known options to the selection list
+    const crntOptions = (await TaxonomyHelper.get(type)) || [];
+    if (crntOptions && crntOptions.length > 0) {
+      for (const crntOpt of crntOptions) {
+        if (!options.find((o) => o.label === crntOpt)) {
+          options.push({
+            label: crntOpt
+          });
+        }
+      }
+    }
+
+    if (options.length === 0) {
+      Notifications.info(
+        l10n.t(
+          LocalizationKey.commandsArticleNotificationNoTaxonomy,
+          type === TaxonomyType.Tag ? 'tags' : 'categories'
+        )
+      );
+      return;
+    }
+
+    const selectedOptions = await vscode.window.showQuickPick(options, {
+      placeHolder: l10n.t(
+        LocalizationKey.commandsArticleQuickPickPlaceholder,
+        type === TaxonomyType.Tag ? 'tags' : 'categories'
+      ),
+      canPickMany: true,
+      ignoreFocusOut: true
+    });
+
+    if (selectedOptions) {
+      article.data[matterProp] = selectedOptions.map((o) => o.label);
+    }
+
+    ArticleHelper.update(editor, article);
+  }
+
  /**
   * Sets the article date
   */
@@ -363,7 +437,7 @@ export class Article {
      return;
    }

-    const position = editor.selection.active;
+    let position = editor.selection.active;
    const selectionText = editor.document.getText(editor.selection);

    // Check for snippet wrapper
--- a/src/commands/Backers.ts
+++ b/src/commands/Backers.ts
@@ -1,6 +1,7 @@
 import { authentication, commands, ExtensionContext } from 'vscode';
 import { COMMAND_NAME, CONTEXT } from '../constants';
 import { Extension, Logger } from '../helpers';
+import fetch from 'node-fetch';
 import { Dashboard } from './Dashboard';
 import { SettingsListener } from '../listeners/panel';
 import { PanelProvider } from '../panelWebView/PanelProvider';
--- a/src/commands/Cache.ts
+++ b/src/commands/Cache.ts
@@ -22,7 +22,7 @@ export class Cache {
    await Extension.getInstance().setState(key, data, type);
  }

-  public static async clear(showNotification = true) {
+  public static async clear(showNotification: boolean = true) {
    const ext = Extension.getInstance();

    await ext.setState(ExtensionState.Dashboard.Pages.Cache, undefined, 'workspace', true);
--- a/src/commands/Dashboard.ts
+++ b/src/commands/Dashboard.ts
@@ -7,7 +7,7 @@ import {
 } from '../constants';
 import { join } from 'path';
 import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
-import { DashboardSettings, Logger, Settings as SettingsHelper } from '../helpers';
+import { Logger, Settings as SettingsHelper } from '../helpers';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { Extension } from '../helpers/Extension';
 import { WebviewHelper } from '@estruyf/vscode';
@@ -160,7 +160,6 @@ export class Dashboard {
      Dashboard.isDisposed = true;
      Dashboard._viewData = undefined;
      PanelMediaListener.getMediaSelection();
-      DashboardSettings.updateAfterClose();
      await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, false);
    });

--- a/src/commands/Folders.ts
+++ b/src/commands/Folders.ts
@@ -283,6 +283,7 @@ export class Folders {
  public static async getInfo(limit?: number): Promise<FolderInfo[] | null> {
    const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES);
    const folders = Folders.get();
+    const wsFolder = parseWinPath(Folders.getWorkspaceFolder()?.fsPath || '');

    if (folders && folders.length > 0) {
      const folderInfo: FolderInfo[] = [];
--- a/src/commands/Preview.ts
+++ b/src/commands/Preview.ts
@@ -97,9 +97,6 @@ export class Preview {
    const cspSource = webView.webview.cspSource;

    webView.onDidDispose(() => {
-      if (crntFilePath && this.webviews[crntFilePath]) {
-        delete this.webviews[crntFilePath];
-      }
      webView.dispose();
    });

@@ -199,7 +196,7 @@ export class Preview {
   * @param filePath
   * @param slug
   */
-  public static async updatePageUrl(filePath: string, _: string) {
+  public static async updatePageUrl(filePath: string, slug?: string) {
    const webView = this.webviews[filePath];
    if (webView) {
      const localhost = await this.getLocalServerUrl();
--- a/src/commands/Settings.ts
+++ b/src/commands/Settings.ts
@@ -24,7 +24,7 @@ export class Settings {
    });

    if (newOption) {
-      const options = (await TaxonomyHelper.get(type)) || [];
+      let options = (await TaxonomyHelper.get(type)) || [];

      if (options.find((o) => o === newOption)) {
        Notifications.warning(l10n.t(LocalizationKey.commandsSettingsCreateWarning, taxonomy));
--- a/src/commands/Template.ts
+++ b/src/commands/Template.ts
@@ -163,7 +163,7 @@ export class Template {
    await copyFileAsync(template.fsPath, newFilePath);

    // Update the properties inside the template
-    const frontMatter = await ArticleHelper.getFrontMatterByPath(newFilePath);
+    let frontMatter = await ArticleHelper.getFrontMatterByPath(newFilePath);
    if (!frontMatter) {
      Notifications.warning(l10n.t(LocalizationKey.commonError));
      return;
--- a/src/components/uniforms-frontmatter/ListAddField.tsx
+++ b/src/components/uniforms-frontmatter/ListAddField.tsx
@@ -1,4 +1,4 @@
-import { PlusIcon } from '@heroicons/react/24/outline';
+import { PlusIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps, joinName, useField } from 'uniforms';
 import './ListAddField.css';
--- a/src/components/uniforms-frontmatter/ListDelField.tsx
+++ b/src/components/uniforms-frontmatter/ListDelField.tsx
@@ -1,4 +1,4 @@
-import { TrashIcon } from '@heroicons/react/24/outline';
+import { TrashIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps, joinName, useField } from 'uniforms';
 import './ListDelField.css';
@@ -29,7 +29,7 @@ function ListDel({ disabled, name, readOnly, ...props }: ListDelFieldProps) {

  return (
    <span
-      className="autoform__list_del_field mb-1"
+      className="autoform__list_del_field"
      {...filterDOMProps(props)}
      onClick={onAction}
      onKeyDown={onAction}
--- a/src/components/uniforms-frontmatter/LongTextField.tsx
+++ b/src/components/uniforms-frontmatter/LongTextField.tsx
@@ -26,7 +26,6 @@ function LongText({
      <LabelField label={label} id={id} required={props.required} />

      <textarea
-        className={`block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
        disabled={disabled}
        id={id}
        name={name}
--- a/src/components/uniforms-frontmatter/TextField.tsx
+++ b/src/components/uniforms-frontmatter/TextField.tsx
@@ -28,7 +28,6 @@ function Text({
      <LabelField label={label} id={id} required={props.required} />

      <input
-        className='block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0'
        autoComplete={autoComplete}
        disabled={disabled}
        id={id}
--- a/src/constants/GeneralCommands.ts
+++ b/src/constants/GeneralCommands.ts
@@ -8,7 +8,6 @@ export const GeneralCommands = {
  toVSCode: {
    openLink: 'openLink',
    gitSync: 'gitSync',
-    gitIsRepo: 'gitIsRepo',
    getLocalization: 'getLocalization',
    openOnWebsite: 'openOnWebsite'
  }
--- a/src/constants/Git.ts
+++ b/src/constants/Git.ts
@@ -1,3 +0,0 @@
-export const GIT_CONFIG = {
-  defaultCommitMessage: 'Synced by Front Matter'
-};
--- a/src/constants/Links.ts
+++ b/src/constants/Links.ts
@@ -8,5 +8,3 @@ export const DOCUMENTATION_SETTINGS_LINK = 'https://frontmatter.codes/docs/setti

 export const SENTRY_LINK =
  'https://1ac45704bbe74264a7b4674bdc2abf48@o1022172.ingest.sentry.io/5988293';
-
-export const DOCS_SUBMODULES = 'https://frontmatter.codes/docs/git-integration#git-submodules';
--- a/src/constants/context.ts
+++ b/src/constants/context.ts
@@ -6,7 +6,6 @@ export const CONTEXT = {
  wysiwyg: 'frontMatter:markdown:wysiwyg',
  backer: 'frontMatter:backers:supporter',
  isValidFile: 'frontMatter:file:isValid',
-  isDevelopment: 'frontMatter:isDevelopment',

  hasViewModes: 'frontMatter:has:modes',

@@ -15,5 +14,5 @@ export const CONTEXT = {

  isGitEnabled: 'frontMatter:git:enabled',

-  projectSwitchEnabled: 'frontMatter:project:switch:enabled'
+  projectSwitchEnabled: 'frontMatter:project:switch:enabled',
 };
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -7,7 +7,6 @@ export * from './ExtensionState';
 export * from './Features';
 export * from './FrameworkDetectors';
 export * from './GeneralCommands';
-export * from './Git';
 export * from './Links';
 export * from './LocalStore';
 export * from './Navigation';
--- a/src/constants/settings.ts
+++ b/src/constants/settings.ts
@@ -60,7 +60,6 @@ export const SETTING_CONTENT_STATIC_FOLDER = 'content.publicFolder';
 export const SETTING_CONTENT_FRONTMATTER_HIGHLIGHT = 'content.fmHighlight';
 export const SETTING_CONTENT_DRAFT_FIELD = 'content.draftField';
 export const SETTING_CONTENT_SORTING = 'content.sorting';
-export const SETTING_CONTENT_FILTERS = 'content.filters';
 export const SETTING_CONTENT_WYSIWYG = 'content.wysiwyg';
 export const SETTING_CONTENT_PLACEHOLDERS = 'content.placeholders';
 export const SETTING_CONTENT_SNIPPETS = 'content.snippets';
--- a/src/dashboardWebView/DashboardCommand.ts
+++ b/src/dashboardWebView/DashboardCommand.ts
@@ -1,5 +1,4 @@
 export enum DashboardCommand {
-  initializing = 'initializing',
  loading = 'loading',
  pages = 'pages',
  searchPages = 'searchPages',
--- a/src/dashboardWebView/DashboardMessage.ts
+++ b/src/dashboardWebView/DashboardMessage.ts
@@ -64,17 +64,14 @@ export enum DashboardMessage {
  createTaxonomy = 'createTaxonomy',
  importTaxonomy = 'importTaxonomy',
  moveTaxonomy = 'moveTaxonomy',
-  mapTaxonomy = 'mapTaxonomy',

  // Other
  getTheme = 'getTheme',
  updateSetting = 'updateSetting',
  setState = 'setState',
-  getState = 'getState',
  runCustomScript = 'runCustomScript',
  sendTelemetry = 'sendTelemetry',
  logError = 'logError',
-  showNotification = 'showNotification',

  // Settings
  getSettings = 'getSettings',
--- a/src/dashboardWebView/components/App.tsx
+++ b/src/dashboardWebView/components/App.tsx
@@ -30,7 +30,7 @@ export interface IAppProps {
 export const App: React.FunctionComponent<IAppProps> = ({
  showWelcome
 }: React.PropsWithChildren<IAppProps>) => {
-  const { pages, settings, localeReady } = useMessages();
+  const { loading, pages, settings, localeReady } = useMessages();
  const view = useRecoilValue(DashboardViewSelector);
  const mode = useRecoilValue(ModeAtom);
  const [isDevMode, setIsDevMode] = useState(false);
@@ -123,7 +123,7 @@ Stack: ${componentStack}`
          <Route path={routePaths.welcome} element={<WelcomeScreen settings={settings} />} />
          <Route
            path={routePaths.contents}
-            element={<Contents pages={pages} />}
+            element={<Contents pages={pages} loading={loading} />}
          />
          <Route path={routePaths.media} element={<Media />} />
          <Route path={routePaths.snippets} element={<Snippets />} />
--- a/src/dashboardWebView/components/Chatbot/Chatbox.tsx
+++ b/src/dashboardWebView/components/Chatbot/Chatbox.tsx
@@ -1,6 +1,7 @@
-import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
+import { PaperAirplaneIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useCallback } from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

@@ -12,6 +13,7 @@ export interface IChatboxProps {
 export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onTrigger }: React.PropsWithChildren<IChatboxProps>) => {
  const [message, setMessage] = React.useState<string>("");
  const [isFocussed, setIsFocussed] = React.useState<boolean>(false);
+  const { getColors } = useThemeColors();

  const callAi = useCallback(() => {
    setTimeout(() => {
@@ -27,7 +29,11 @@ export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onT
        <div className='chatbox px-4'>
          <textarea
            className={`
-          resize-none w-full outline-none border-0 pr-8 border-transparent bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-none focus:border-transparent`}
+          resize-none w-full outline-none border-0 pr-8 
+          ${getColors(
+              'focus:outline-none border-gray-300 text-vulcan-500',
+              'border-transparent bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-none focus:border-transparent'
+            )}`}
            placeholder={l10n.t(LocalizationKey.dashboardChatbotChatboxPlaceholder)}
            autoFocus={true}
            value={message}
--- a/src/dashboardWebView/components/Chatbot/Feedback.tsx
+++ b/src/dashboardWebView/components/Chatbot/Feedback.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline';
-import { HandThumbDownIcon as ThumbDownSolidIcon, HandThumbUpIcon as ThumbUpSolidIcon } from '@heroicons/react/24/solid';
+import { ThumbDownIcon, ThumbUpIcon } from '@heroicons/react/outline';
+import { ThumbDownIcon as ThumbDownSolidIcon, ThumbUpIcon as ThumbUpSolidIcon } from '@heroicons/react/solid';
 import { useCallback } from 'react';
 import { useSettingsContext } from '../../providers/SettingsProvider';

@@ -53,7 +53,7 @@ export const Feedback: React.FunctionComponent<IFeedbackProps> = ({
          isUpVoted ? (
            <ThumbUpSolidIcon className='h-4 w-4 text-[var(--vscode-textLink-foreground)]' />
          ) : (
-            <HandThumbUpIcon className='h-4 w-4' />
+            <ThumbUpIcon className='h-4 w-4' />
          )
        }
      </button>
@@ -64,7 +64,7 @@ export const Feedback: React.FunctionComponent<IFeedbackProps> = ({
          isDownVoted ? (
            <ThumbDownSolidIcon className='h-4 w-4 text-[var(--vscode-textLink-foreground)]' />
          ) : (
-            <HandThumbDownIcon className='h-4 w-4' />
+            <ThumbDownIcon className='h-4 w-4' />
          )
        }
      </button>
--- a/src/dashboardWebView/components/Common/Button.tsx
+++ b/src/dashboardWebView/components/Common/Button.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IButtonProps {
  secondary?: boolean;
@@ -14,14 +15,19 @@ export const Button: React.FunctionComponent<IButtonProps> = ({
  secondary,
  children
 }: React.PropsWithChildren<IButtonProps>) => {
+  const { getColors } = useThemeColors();

  return (
    <button
      type="button"
      className={`${className || ''
-        } inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded disabled:opacity-50 ${secondary ?
-          `bg-[var(--vscode-button-secondaryBackground)] text-[--vscode-button-secondaryForeground] hover:bg-[var(--vscode-button-secondaryHoverBackground)]` :
-          `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--frontmatter-button-hoverBackground)]`
+        } inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded ${getColors(
+          'text-white dark:text-vulcan-500 disabled:bg-gray-500',
+          'disabled:opacity-50'
+        )
+        } ${secondary ?
+          getColors(`bg-red-300 hover:bg-red-400`, `bg-[var(--vscode-button-secondaryBackground)] text-[--vscode-button-secondaryForeground] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`) :
+          getColors(`bg-teal-600 hover:bg-teal-700`, `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--frontmatter-button-hoverBackground)]`)
        }
      `}
      onClick={onClick}
--- a/src/dashboardWebView/components/Common/ChoiceButton.tsx
+++ b/src/dashboardWebView/components/Common/ChoiceButton.tsx
@@ -1,6 +1,7 @@
 import { Menu } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { ChevronDownIcon } from '@heroicons/react/outline';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 import { MenuItem, MenuItems } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -23,13 +24,18 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
  choices,
  title
 }: React.PropsWithChildren<IChoiceButtonProps>) => {
+  const { getColors } = useThemeColors();

  return (
    <span className="relative z-50 inline-flex shadow-sm rounded-md">
      <button
        type="button"
        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium ${choices.length > 0 ? `rounded-l` : `rounded`
-          } text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
+          } ${getColors(
+            `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
+            `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
+          )
+          }`}
        onClick={onClick}
        disabled={disabled}
      >
@@ -39,7 +45,11 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
      {choices.length > 0 && (
        <Menu as="span" className="-ml-px relative block">
          <Menu.Button
-            className={`h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
+            className={`h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r ${getColors(
+              `text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 disabled:bg-gray-500`,
+              `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
+            )
+              }`}
            disabled={disabled}
          >
            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
--- a/src/dashboardWebView/components/Common/DateField.tsx
+++ b/src/dashboardWebView/components/Common/DateField.tsx
@@ -1,6 +1,7 @@
 import { format as fnsFormat } from 'date-fns';
 import * as React from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IDateFieldProps {
  className?: string;
@@ -14,6 +15,7 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
  format
 }: React.PropsWithChildren<IDateFieldProps>) => {
  const [dateValue, setDateValue] = React.useState<string>('');
+  const { getColors } = useThemeColors();

  React.useEffect(() => {
    try {
@@ -36,7 +38,7 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
  }

  return (
-    <span className={`date__field ${className || ''} text-xs text-[var(--frontmatter-text)]`}>
+    <span className={`date__field ${className || ''} text-xs ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)}`}>
      {dateValue}
    </span>
  );
--- a/src/dashboardWebView/components/Common/Link.tsx
+++ b/src/dashboardWebView/components/Common/Link.tsx
@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-export interface ILinkProps {
-  title: string;
-  href: string;
-  className?: string;
-}
-
-export const Link: React.FunctionComponent<ILinkProps> = ({ children, title, href, className }: React.PropsWithChildren<ILinkProps>) => {
-  return (
-    <a
-      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)] ${className || ""}`}
-      title={title}
-      href={href}>
-      {children}
-    </a>
-  );
-};
--- a/src/dashboardWebView/components/Common/LinkButton.tsx
+++ b/src/dashboardWebView/components/Common/LinkButton.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface ILinkButtonProps {
  title: string;
@@ -6,10 +7,17 @@ export interface ILinkButtonProps {
 }

 export const LinkButton: React.FunctionComponent<ILinkButtonProps> = ({ children, title, onClick }: React.PropsWithChildren<ILinkButtonProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <button
      type="button"
-      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`}
+      className={
+        getColors(
+          `text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`,
+          `text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`
+        )
+      }
      title={title}
      onClick={onClick}>
      {children}
--- a/src/dashboardWebView/components/Common/Spinner.tsx
+++ b/src/dashboardWebView/components/Common/Spinner.tsx
@@ -1,14 +1,9 @@
 import * as React from 'react';
-import { LoadingType } from '../../../models';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';

-export interface ISpinnerProps {
-  type?: LoadingType;
-}
+export interface ISpinnerProps { }

 export const Spinner: React.FunctionComponent<ISpinnerProps> = (
-  { type }: React.PropsWithChildren<ISpinnerProps>
+  _: React.PropsWithChildren<ISpinnerProps>
 ) => {
  return (
    <div className={`z-50 fixed top-0 left-0 right-0 bottom-0 w-full h-full bg-[var(--vscode-editor-background)] opacity-75`}>
@@ -17,15 +12,6 @@ export const Spinner: React.FunctionComponent<ISpinnerProps> = (
      >
        <div className={`h-full absolute rounded-sm bg-[var(--vscode-activityBarBadge-background)] animate-[vscode-loader_4s_ease-in-out_infinite]`} />
      </div>
-
-      {
-        type === 'initPages' && (
-          <div className='spinner-msg h-full text-2xl flex justify-center items-center text-[var(--vscode-foreground)]'>
-            <span>{l10n.t(LocalizationKey.loadingInitPages)}</span>
-            <span className='dots'></span>
-          </div>
-        )
-      }
    </div>
  );
 };
--- a/src/dashboardWebView/components/Common/TextField.tsx
+++ b/src/dashboardWebView/components/Common/TextField.tsx
@@ -1,78 +0,0 @@
-import { XCircleIcon } from '@heroicons/react/24/solid';
-import * as React from 'react';
-
-export interface ITextFieldProps {
-  name: string;
-  value?: string;
-  placeholder?: string;
-  icon?: JSX.Element;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  multiline?: boolean;
-  rows?: number;
-  onChange?: (value: string) => void;
-  onReset?: () => void;
-}
-
-export const TextField: React.FunctionComponent<ITextFieldProps> = ({
-  name,
-  value,
-  placeholder,
-  icon,
-  autoFocus,
-  multiline,
-  rows,
-  disabled,
-  onChange,
-  onReset
-}: React.PropsWithChildren<ITextFieldProps>) => {
-  return (
-    <div className="relative flex justify-center">
-      {
-        icon && (
-          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-            {icon}
-          </div>
-        )
-      }
-
-      {
-        multiline ? (
-          <textarea
-            rows={rows || 3}
-            name={name}
-            className={`block w-full py-2 ${icon ? "pl-10" : "pl-2"} pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
-            style={{
-              boxShadow: "none"
-            }}
-            placeholder={placeholder || ""}
-            value={value}
-            autoFocus={!!autoFocus}
-            onChange={(e) => onChange && onChange(e.target.value)}
-            disabled={!!disabled}
-          />
-        ) : (
-          <input
-            type="text"
-            name={name}
-            className={`block w-full py-2 ${icon ? "pl-10" : "pl-2"} pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
-            style={{
-              boxShadow: "none"
-            }}
-            placeholder={placeholder || ""}
-            value={value}
-            autoFocus={!!autoFocus}
-            onChange={(e) => onChange && onChange(e.target.value)}
-            disabled={!!disabled}
-          />
-        )
-      }
-
-      {(value && onReset) && (
-        <button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--vscode-input-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]">
-          <XCircleIcon className={`h-5 w-5`} aria-hidden="true" />
-        </button>
-      )}
-    </div>
-  );
-};
--- a/src/dashboardWebView/components/Configuration/Astro/AstroContentTypes.tsx
+++ b/src/dashboardWebView/components/Configuration/Astro/AstroContentTypes.tsx
@@ -32,6 +32,7 @@ export const AstroContentTypes: React.FunctionComponent<IAstroContentTypesProps>
    if (collections.length > 0 && settings?.contentTypes?.length > 0) {
      // Find created content types from the collections
      const astroCollection = collections.find(c => settings.contentTypes.find((ct) => ct.name === c.name));
+      console.log(`astroCollection`, astroCollection)
      if (astroCollection) {
        setStatus(Status.Completed);
      } else {
--- a/src/dashboardWebView/components/Contents/ContentActions.tsx
+++ b/src/dashboardWebView/components/Contents/ContentActions.tsx
@@ -1,6 +1,6 @@
 import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
-import { EyeIcon, GlobeEuropeAfricaIcon, CommandLineIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, GlobeIcon, TerminalIcon, TrashIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { CustomScript, ScriptType } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
@@ -8,6 +8,7 @@ import { MenuItem, MenuItems, ActionMenuButton, QuickAction } from '../Menu';
 import { Alert } from '../Modals/Alert';
 import { usePopper } from 'react-popper';
 import { useState } from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -35,6 +36,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
 }: React.PropsWithChildren<IContentActionsProps>) => {
  const [pinnedItems, setPinnedItems] = useRecoilState(PinnedItemsAtom);
  const [showDeletionAlert, setShowDeletionAlert] = React.useState(false);
+  const { getColors } = useThemeColors();
  const settings = useRecoilValue(SettingsSelector);

  const [referenceElement, setReferenceElement] = useState<any>(null);
@@ -110,7 +112,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
          key={script.title}
          title={
            <div className="flex items-center">
-              <CommandLineIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
+              <TerminalIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
              <span>{script.title}</span>
            </div>
          }
@@ -127,7 +129,11 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
      >
        <div
          className={`flex items-center border border-transparent rounded-full ${listView ? '' : 'p-2 -mt-4'
-            } group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]`}
+            } ${getColors(
+              'group-hover/card:bg-gray-200 dark:group-hover/card:bg-vulcan-200 group-hover/card:border-gray-100 dark:group-hover/card:border-vulcan-50',
+              'group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]'
+            )
+            }`}
        >
          <Menu as="div" className={`relative flex text-left`}>
            {!listView && (
@@ -139,7 +145,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
                {
                  settings?.websiteUrl && (
                    <QuickAction title={l10n.t(LocalizationKey.commonOpenOnWebsite)} onClick={openOnWebsite}>
-                      <GlobeEuropeAfricaIcon className={`w-4 h-4`} aria-hidden="true" />
+                      <GlobeIcon className={`w-4 h-4`} aria-hidden="true" />
                    </QuickAction>
                  )
                }
@@ -189,7 +195,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
                    <MenuItem
                      title={
                        <div className="flex items-center">
-                          <GlobeEuropeAfricaIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
+                          <GlobeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
                          <span>{l10n.t(LocalizationKey.commonOpenOnWebsite)}</span>
                        </div>
                      }
--- a/src/dashboardWebView/components/Contents/Contents.tsx
+++ b/src/dashboardWebView/components/Contents/Contents.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { Page } from '../../models';
-import { LoadingAtom, SettingsSelector } from '../../state';
+import { SettingsSelector } from '../../state';
 import { Overview } from './Overview';
 import { Spinner } from '../Common/Spinner';
 import { SponsorMsg } from '../Layout/SponsorMsg';
@@ -14,12 +14,13 @@ import { PageLayout } from '../Layout/PageLayout';

 export interface IContentsProps {
  pages: Page[];
+  loading: boolean;
 }

 export const Contents: React.FunctionComponent<IContentsProps> = ({
-  pages
+  pages,
+  loading
 }: React.PropsWithChildren<IContentsProps>) => {
-  const loading = useRecoilValue(LoadingAtom);
  const settings = useRecoilValue(SettingsSelector);
  const { pageItems } = usePages(pages);

@@ -33,8 +34,8 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({

  return (
    <PageLayout folders={pageFolders} totalPages={pageItems.length}>
-      <div className="w-full flex-grow max-w-full mx-auto pb-6">
-        {loading ? <Spinner type={loading} /> : <Overview pages={pageItems} settings={settings} />}
+      <div className="w-full flex-grow max-w-full mx-auto pb-6 px-4">
+        {loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} />}
      </div>

      <SponsorMsg
--- a/src/dashboardWebView/components/Contents/List.tsx
+++ b/src/dashboardWebView/components/Contents/List.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
+import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardViewType } from '../../models';
 import { ViewSelector } from '../../state';
 import * as l10n from '@vscode/l10n';
@@ -11,10 +12,11 @@ export const List: React.FunctionComponent<IListProps> = ({
  children
 }: React.PropsWithChildren<IListProps>) => {
  const view = useRecoilValue(ViewSelector);
+  const { getColors } = useThemeColors();

  let className = '';
  if (view === DashboardViewType.Grid) {
-    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4`;
+    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4`;
  } else if (view === DashboardViewType.List) {
    className = `-mx-4`;
  }
@@ -22,7 +24,8 @@ export const List: React.FunctionComponent<IListProps> = ({
  return (
    <ul role="list" className={className}>
      {view === DashboardViewType.List && (
-        <li className={`px-5 relative uppercase py-2 border-b text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
+        <li className={`px-5 relative uppercase py-2 border-b ${getColors('text-vulcan-100 dark:text-whisper-900 border-vulcan-50', 'text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]')
+          }`}>
          <div className={`grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8`}>
            <div className="col-span-8">{l10n.t(LocalizationKey.dashboardContentsListTitle)}</div>
            <div className="col-span-2">{l10n.t(LocalizationKey.dashboardContentsListDate)}</div>
--- a/src/dashboardWebView/components/Contents/Overview.tsx
+++ b/src/dashboardWebView/components/Contents/Overview.tsx
@@ -1,15 +1,18 @@
 import { Disclosure } from '@headlessui/react';
-import { ChevronRightIcon } from '@heroicons/react/24/solid';
+import { ChevronRightIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { groupBy } from '../../../helpers/GroupBy';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { GroupOption } from '../../constants/GroupOption';
+import { Page } from '../../models/Page';
+import { Settings } from '../../models/Settings';
 import { GroupingSelector, PageAtom, ViewSelector } from '../../state';
 import { Item } from './Item';
 import { List } from './List';
 import usePagination from '../../hooks/usePagination';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
@@ -17,7 +20,7 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { PinIcon } from '../Icons/PinIcon';
 import { PinnedItem } from './PinnedItem';
-import { DashboardViewType, Page, Settings } from '../../models';
+import { DashboardViewType } from '../../models';

 export interface IOverviewProps {
  pages: Page[];
@@ -33,6 +36,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
  const grouping = useRecoilValue(GroupingSelector);
  const page = useRecoilValue(PageAtom);
  const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
+  const { getColors } = useThemeColors();
  const view = useRecoilValue(ViewSelector);

  const pagedPages = useMemo(() => {
@@ -119,7 +123,8 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
      <div className={`flex items-center justify-center h-full`}>
        <div className={`max-w-xl text-center`}>
          <FrontMatterIcon
-            className={`h-32 mx-auto opacity-90 mb-8 text-[var(--vscode-editor-foreground)]`}
+            className={`h-32 mx-auto opacity-90 mb-8 ${getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
+              }`}
          />
          {settings && settings?.contentFolders?.length > 0 ? (
            <p className={`text-xl font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>
--- a/src/dashboardWebView/components/DataView/DataFormControls.tsx
+++ b/src/dashboardWebView/components/DataView/DataFormControls.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useForm } from 'uniforms';
+import { SubmitField } from 'uniforms-unstyled';
+import useThemeColors from '../../hooks/useThemeColors';
 import { Button } from '../Common/Button';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
-import { SubmitField } from '../../../components/uniforms-frontmatter';

 export interface IDataFormControlsProps {
  model: any | null;
@@ -15,9 +16,10 @@ export const DataFormControls: React.FunctionComponent<IDataFormControlsProps> =
  onClear
 }: React.PropsWithChildren<IDataFormControlsProps>) => {
  const { formRef } = useForm();
+  const { getColors } = useThemeColors();

  return (
-    <div className={`text-right border-[var(--frontmatter-border)]`}>
+    <div className={`text-right ${getColors(`border-gray-200 dark:border-vulcan-300`, `border-[var(--frontmatter-border)]`)}`}>
      <SubmitField value={model ? `Update` : `Add`} />

      <Button
--- a/src/dashboardWebView/components/DataView/DataView.tsx
+++ b/src/dashboardWebView/components/DataView/DataView.tsx
@@ -15,22 +15,27 @@ import { arrayMoveImmutable } from 'array-move';
 import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
-import { ChevronRightIcon, CircleStackIcon } from '@heroicons/react/24/outline';
+import { ChevronRightIcon, DatabaseIcon } from '@heroicons/react/outline';
+import { ToastContainer, toast, Slide } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import { DataType } from '../../../models/DataType';
 import { TelemetryEvent } from '../../../constants';
 import { NavigationItem } from '../Layout';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { NavigationType } from '../../models';

 export interface IDataViewProps { }

 export const DataView: React.FunctionComponent<IDataViewProps> = (
-  _: React.PropsWithChildren<IDataViewProps>
+  props: React.PropsWithChildren<IDataViewProps>
 ) => {
  const [selectedData, setSelectedData] = useState<DataFile | null>(null);
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
  const [dataEntries, setDataEntries] = useState<any | any[] | null>(null);
  const settings = useRecoilValue(SettingsSelector);
+  const { getColors } = useThemeColors();

  const setSchema = (dataFile: DataFile) => {
    setSelectedData(dataFile);
@@ -107,7 +112,15 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
        entries: data
      });

-      Messenger.send(DashboardMessage.showNotification, l10n.t(LocalizationKey.dashboardDataViewDataViewUpdateMessage));
+      // Show toast message
+      toast.success('Updated your data entries', {
+        position: 'top-right',
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: false,
+        transition: Slide
+      });
    },
    [selectedData]
  );
@@ -165,15 +178,27 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
        <div className="relative w-full flex-grow mx-auto overflow-hidden">
          <div className={`flex w-64 flex-col absolute inset-y-0`}>
            <aside
-              className={`flex flex-col flex-grow overflow-y-auto border-r py-6 px-4 overflow-auto border-[var(--frontmatter-border)]`}
+              className={`flex flex-col flex-grow overflow-y-auto border-r py-6 px-4 overflow-auto ${getColors(
+                'border-gray-200 dark:border-vulcan-300',
+                'border-[var(--frontmatter-border)]'
+              )
+                }`}
            >
-              <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
+              <h2 className={`text-lg ${getColors(
+                `text-gray-500 dark:text-whisper-900`,
+                `text-[var(--frontmatter-text)]`
+              )
+                }`}>
                {l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
              </h2>

              <nav className={`flex-1 py-4 -mx-4`}>
                <div
-                  className={`divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
+                  className={`divide-y border-t border-b  ${getColors(
+                    `divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300`,
+                    `divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`
+                  )
+                    }`}
                >
                  {dataFiles &&
                    dataFiles.length > 0 &&
@@ -197,9 +222,17 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
              <>
                {!selectedData.singleEntry && (
                  <div
-                    className={`w-1/3 py-6 px-4 flex-1 border-r overflow-auto border-[var(--frontmatter-border)]`}
+                    className={`w-1/3 py-6 px-4 flex-1 border-r overflow-auto ${getColors(
+                      `border-gray-200 dark:border-vulcan-300`,
+                      `border-[var(--frontmatter-border)]`
+                    )
+                      }`}
                  >
-                    <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
+                    <h2 className={`text-lg ${getColors(
+                      `text-gray-500 dark:text-whisper-900`,
+                      `text-[var(--frontmatter-text)]`
+                    )
+                      }`}>
                      {l10n.t(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
                    </h2>

@@ -225,7 +258,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                        </>
                      ) : (
                        <div className={`flex flex-col items-center justify-center`}>
-                          <p className={`text-[var(--frontmatter-text)]`}>
+                          <p className={getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}>
                            {l10n.t(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
                          </p>
                        </div>
@@ -237,7 +270,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                  className={`${selectedData.singleEntry ? 'w-full' : 'w-2/3'
                    } py-6 px-4 overflow-auto`}
                >
-                  <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
+                  <h2 className={`text-lg ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}`}>
                    {l10n.t(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
                  </h2>
                  {selectedData ? (
@@ -259,12 +292,16 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
        </div>
      ) : (
        <div className="w-full h-full flex items-center justify-center">
-          <div className={`flex flex-col items-center text-[var(--frontmatter-text)]`}>
-            <CircleStackIcon className="w-32 h-32" />
+          <div className={`flex flex-col items-center ${getColors(
+            'text-gray-500 dark:text-whisper-900',
+            'text-[var(--frontmatter-text)]'
+          )
+            }`}>
+            <DatabaseIcon className="w-32 h-32" />
            <p className="text-3xl mt-2">{l10n.t(LocalizationKey.dashboardDataViewDataViewNoDataFiles)}</p>
            <p className="text-xl mt-4">
              <a
-                className={`text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`}
+                className={getColors(`text-teal-700 hover:text-teal-900`, `text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`)}
                href={`https://frontmatter.codes/docs/dashboard#data-files-view`}
                title={l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
              >
@@ -282,6 +319,8 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
        isBacker={settings?.isBacker}
      />

+      <ToastContainer />
+
      <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=DataView" alt="DataView metrics" />
    </div >
  );
--- a/src/dashboardWebView/components/DataView/EmptyView.tsx
+++ b/src/dashboardWebView/components/DataView/EmptyView.tsx
@@ -1,5 +1,6 @@
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+import { ExclamationCircleIcon } from '@heroicons/react/outline';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

@@ -8,11 +9,12 @@ export interface IEmptyViewProps { }
 export const EmptyView: React.FunctionComponent<IEmptyViewProps> = (
  props: React.PropsWithChildren<IEmptyViewProps>
 ) => {
+  const { getColors } = useThemeColors();

  return (
    <div className="flex flex-col items-center justify-center w-full">
-      <ExclamationCircleIcon className={`w-1/12 opacity-90 text-[var(--frontmatter-secondary-text)]`} />
-      <h2 className={`text-xl text-[var(--frontmatter-secondary-text)]`}>
+      <ExclamationCircleIcon className={`w-1/12 opacity-90 ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`} />
+      <h2 className={`text-xl ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`}>
        {l10n.t(LocalizationKey.dashboardDataViewEmptyViewHeading)}
      </h2>
    </div>
--- a/src/dashboardWebView/components/DataView/SortableContainer.tsx
+++ b/src/dashboardWebView/components/DataView/SortableContainer.tsx
@@ -1,14 +1,17 @@
 import * as React from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface ISortableContainerProps { }

 export const Container = SortableContainer(
  ({ children }: React.PropsWithChildren<ISortableContainerProps>) => {
+    const { getColors } = useThemeColors();

    return (
      <ul
-        className={`-mx-4 divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
+        className={`-mx-4 divide-y border-t border-b ${getColors(`divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300`, `divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`)
+          }`}
      >
        {children}
      </ul>
--- a/src/dashboardWebView/components/DataView/SortableItem.tsx
+++ b/src/dashboardWebView/components/DataView/SortableItem.tsx
@@ -1,6 +1,7 @@
-import { PencilIcon, TrashIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
+import { PencilIcon, SelectorIcon, TrashIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { SortableHandle, SortableElement } from 'react-sortable-hoc';
+import useThemeColors from '../../hooks/useThemeColors';
 import { LinkButton } from '../Common/LinkButton';
 import { Alert } from '../Modals/Alert';
 import * as l10n from '@vscode/l10n';
@@ -15,7 +16,7 @@ export interface ISortableItemProps {
  onDeleteItem: (index: number) => void;
 }

-const DragHandle = SortableHandle(() => <ChevronUpDownIcon className={`w-6 h-6 mr-2 cursor-move hover:text-[var(--frontmatter-link-hover)]`} />);
+const DragHandle = SortableHandle(() => <SelectorIcon className={`w-6 h-6 cursor-move hover:text-[var(--frontmatter-link-hover)]`} />);

 export const SortableItem = SortableElement(
  ({
@@ -26,6 +27,7 @@ export const SortableItem = SortableElement(
    onDeleteItem
  }: ISortableItemProps) => {
    const [showAlert, setShowAlert] = React.useState(false);
+    const { getColors } = useThemeColors();

    const deleteItemConfirm = () => {
      setShowAlert(true);
@@ -35,8 +37,12 @@ export const SortableItem = SortableElement(
      <>
        <li
          data-test={`${selectedIndex}-${crntIndex}`}
-          className={`sortable_item py-2 px-2 w-full flex justify-between content-center cursor-pointer ${selectedIndex === crntIndex ? `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]` : ``
-            } hover:bg-[var(--frontmatter-list-hover-background)]`}
+          className={`sortable_item py-2 px-2 w-full flex justify-between content-center cursor-pointer ${selectedIndex === crntIndex ? getColors(`bg-gray-300 dark:bg-vulcan-300`, `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]`) : ``
+            } ${getColors(
+              'hover:bg-gray-200 dark:hover:bg-vulcan-400',
+              'hover:bg-[var(--frontmatter-list-hover-background)]'
+            )
+            }`}
        >
          <div
            className="flex items-center w-full"
--- a/src/dashboardWebView/components/ErrorView/index.tsx
+++ b/src/dashboardWebView/components/ErrorView/index.tsx
@@ -1,5 +1,6 @@
-import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
+import { ExclamationIcon } from '@heroicons/react/solid';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

@@ -8,9 +9,11 @@ export interface IErrorViewProps { }
 export const ErrorView: React.FunctionComponent<IErrorViewProps> = (
  _: React.PropsWithChildren<IErrorViewProps>
 ) => {
+  const { getColors } = useThemeColors();
+
  return (
    <main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
-      <ExclamationTriangleIcon className={`w-24 h-24 text-[var(--vscode-editorError-foreground)]`} />
+      <ExclamationIcon className={`w-24 h-24 ${getColors(`text-red-500`, `text-[var(--vscode-editorError-foreground)]`)}`} />
      <p className="text-xl">{l10n.t(LocalizationKey.commonErrorMessage)}</p>
      <p className="text-base">{l10n.t(LocalizationKey.dashboardErrorViewDescription)}</p>
    </main>
--- a/src/dashboardWebView/components/Header/Breadcrumb.tsx
+++ b/src/dashboardWebView/components/Header/Breadcrumb.tsx
@@ -1,9 +1,10 @@
-import { HomeIcon } from '@heroicons/react/24/outline';
+import { CollectionIcon } from '@heroicons/react/outline';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
+import { HOME_PAGE_NAVIGATION_ID, STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
+import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -17,6 +18,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
  const [, setSearchValue] = useRecoilState(SearchAtom);
  const [folders, setFolders] = React.useState<string[]>([]);
  const settings = useRecoilValue(SettingsAtom);
+  const { getColors } = useThemeColors();

  const updateFolder = (folder: string) => {
    setSearchValue('');
@@ -84,9 +86,12 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
        <div className="flex items-center">
          <button
            onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)}
-            className={`text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}
+            className={getColors(
+              `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+              `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
+            )}
          >
-            <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+            <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
            <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderBreadcrumbHome)}</span>
          </button>
        </div>
@@ -96,7 +101,11 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
        <li key={folder} className="flex">
          <div className="flex items-center">
            <svg
-              className={`flex-shrink-0 h-5 w-5 text-[var(--vscode-tab-inactiveForeground)]`}
+              className={`flex-shrink-0 h-5 w-5 ${getColors(
+                `text-gray-300 dark:text-whisper-900`,
+                `text-[var(--vscode-tab-inactiveForeground)]`
+              )
+                }`}
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 20 20"
@@ -107,7 +116,11 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (

            <button
              onClick={() => updateFolder(folder)}
-              className={`ml-4 text-sm font-medium text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}
+              className={`ml-4 text-sm font-medium ${getColors(
+                `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+                `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
+              )
+                }`}
            >
              {basename(folder)}
            </button>
--- a/src/dashboardWebView/components/Header/ClearFilters.tsx
+++ b/src/dashboardWebView/components/Header/ClearFilters.tsx
@@ -1,4 +1,4 @@
-import { XCircleIcon } from '@heroicons/react/24/solid';
+import { XCircleIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { useRecoilValue, useResetRecoilState } from 'recoil';
 import {
@@ -11,11 +11,11 @@ import {
  TagAtom,
  CategoryAtom,
  DEFAULT_TAG_STATE,
-  DEFAULT_CATEGORY_STATE,
-  FiltersAtom
+  DEFAULT_CATEGORY_STATE
 } from '../../state';
 import { DefaultValue } from 'recoil';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

@@ -30,17 +30,16 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
  _: React.PropsWithChildren<IClearFiltersProps>
 ) => {
  const [show, setShow] = React.useState(false);
+  const { getColors } = useThemeColors();

  const folder = useRecoilValue(FolderSelector);
  const tag = useRecoilValue(TagSelector);
  const category = useRecoilValue(CategorySelector);
-  const filters = useRecoilValue(FiltersAtom);

  const resetSorting = useResetRecoilState(SortingAtom);
  const resetFolder = useResetRecoilState(FolderAtom);
  const resetTag = useResetRecoilState(TagAtom);
  const resetCategory = useResetRecoilState(CategoryAtom);
-  const resetFilters = useResetRecoilState(FiltersAtom);

  const reset = () => {
    setShow(false);
@@ -48,32 +47,29 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
    resetFolder();
    resetTag();
    resetCategory();
-    resetFilters();
  };

-  const hasCustomFilters = useMemo(() => {
-    const names = Object.keys(filters);
-    return names.some((name) => filters[name]);
-  }, [filters]);
-
  useEffect(() => {
    if (
      folder !== DEFAULT_FOLDER_STATE ||
      tag !== DEFAULT_TAG_STATE ||
-      category !== DEFAULT_CATEGORY_STATE ||
-      hasCustomFilters
+      category !== DEFAULT_CATEGORY_STATE
    ) {
      setShow(true);
    } else {
      setShow(false);
    }
-  }, [folder, tag, category, hasCustomFilters]);
+  }, [folder, tag, category]);

  if (!show) return null;

  return (
    <button
-      className={`flex items-center hover:text-[var(--vscode-textLink-activeForeground)]`}
+      className={`flex items-center ${getColors(
+        'hover:text-teal-600',
+        'hover:text-[var(--vscode-textLink-activeForeground)]'
+      )
+        }`}
      onClick={reset}
      title={l10n.t(LocalizationKey.dashboardHeaderClearFiltersTitle)}
    >
--- a/src/dashboardWebView/components/Header/Filter.tsx
+++ b/src/dashboardWebView/components/Header/Filter.tsx
@@ -1,5 +1,5 @@
 import { Menu } from '@headlessui/react';
-import { FunnelIcon } from '@heroicons/react/24/solid';
+import { FilterIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 import * as l10n from '@vscode/l10n';
@@ -30,7 +30,7 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({
        <MenuButton
          label={
            <>
-              <FunnelIcon className={`inline-block w-5 h-5 mr-1`} />
+              <FilterIcon className={`inline-block w-5 h-5 mr-1`} />
              <span>{label}</span>
            </>
          }
--- a/src/dashboardWebView/components/Header/FilterInput.tsx
+++ b/src/dashboardWebView/components/Header/FilterInput.tsx
@@ -1,8 +1,8 @@
-import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
+import { SearchIcon, XCircleIcon } from '@heroicons/react/solid';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
-import { TextField } from '../Common/TextField';

 export interface IFilterInputProps {
  placeholder: string;
@@ -21,6 +21,7 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
  onReset,
  onChange
 }: React.PropsWithChildren<IFilterInputProps>) => {
+  const { getColors } = useThemeColors();

  return (
    <div className="flex space-x-4 flex-1">
@@ -28,19 +29,32 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
        <label htmlFor="search" className="sr-only">
          {l10n.t(LocalizationKey.commonSearch)}
        </label>
+        <div className="relative flex justify-center">
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <SearchIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
+          </div>

-        <TextField
-          name='search'
-          icon={(
-            <MagnifyingGlassIcon className={`h-4 w-4 text-[var(--vscode-input-foreground)]`} aria-hidden="true" />
+          <input
+            type="text"
+            name="search"
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
+              'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+            )
+              }`}
+            placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
+            value={value}
+            autoFocus={autoFocus}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}
+            disabled={!isReady}
+          />
+
+          {value && onReset && (
+            <button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
+              <XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
+            </button>
          )}
-          value={value}
-          autoFocus={autoFocus}
-          placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
-          disabled={!isReady}
-          onChange={onChange}
-          onReset={onReset}
-        />
+        </div>
      </div>
    </div>
  );
--- a/src/dashboardWebView/components/Header/Filters.tsx
+++ b/src/dashboardWebView/components/Header/Filters.tsx
@@ -1,108 +0,0 @@
-import * as React from 'react';
-import { FoldersFilter } from './FoldersFilter';
-import { Filter } from './Filter';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { CategoryAtom, SettingsSelector, TagAtom, FiltersAtom, FilterValuesAtom } from '../../state';
-import { useEffect, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-import { firstToUpper } from '../../../helpers/StringHelpers';
-
-export interface IFiltersProps { }
-
-export const Filters: React.FunctionComponent<IFiltersProps> = (_: React.PropsWithChildren<IFiltersProps>) => {
-  const [crntFilters, setCrntFilters] = useRecoilState(FiltersAtom);
-  const [crntTag, setCrntTag] = useRecoilState(TagAtom);
-  const [crntCategory, setCrntCategory] = useRecoilState(CategoryAtom);
-  const filterValues = useRecoilValue(FilterValuesAtom);
-  const settings = useRecoilValue(SettingsSelector);
-  const location = useLocation();
-
-
-  const otherFilters = useMemo(() => settings?.filters?.filter((filter) => filter !== "pageFolders" && filter !== "tags" && filter !== "categories"), [settings?.filters]);
-
-  const otherFilterValues = useMemo(() => {
-    return otherFilters?.map((filter) => {
-      const filterName = typeof filter === "string" ? filter : filter.name;
-      const filterTitle = typeof filter === "string" ? firstToUpper(filter) : filter.title;
-      const values = filterValues?.[filterName];
-      if (!values || values.length === 0) {
-        return null;
-      }
-
-      return (
-        <Filter
-          key={filterName}
-          label={filterTitle}
-          activeItem={crntFilters[filterName]}
-          items={values}
-          onClick={(value) => setCrntFilters((prev) => {
-            let clone = Object.assign({}, prev);
-            if (!clone[filterName] && value) {
-              clone[filterName] = value;
-            } else {
-              clone[filterName] = value || "";
-            }
-            return clone;
-          })}
-        />
-      )
-    })
-  }, [otherFilters, crntFilters, filterValues, setCrntFilters]);
-
-  useEffect(() => {
-    if (location.search) {
-      const searchParams = new URLSearchParams(location.search);
-      const taxonomy = searchParams.get('taxonomy');
-      const value = searchParams.get('value');
-
-      if (taxonomy && value) {
-        if (taxonomy === 'tags') {
-          setCrntTag(value);
-        } else if (taxonomy === 'categories') {
-          setCrntCategory(value);
-        }
-      }
-
-      return;
-    }
-
-    setCrntFilters({});
-
-    setCrntTag('');
-    setCrntCategory('');
-  }, [location.search]);
-
-  return (
-    <>
-      {
-        settings?.filters?.includes("pageFolders") && (
-          <FoldersFilter />
-        )
-      }
-
-      {
-        settings?.filters?.includes("tags") && (
-          <Filter
-            label={`Tag`}
-            activeItem={crntTag}
-            items={settings?.tags || []}
-            onClick={(value) => setCrntTag(value)}
-          />
-        )
-      }
-
-      {
-        settings?.filters?.includes("categories") && (
-          <Filter
-            label={`Category`}
-            activeItem={crntCategory}
-            items={settings?.categories || []}
-            onClick={(value) => setCrntCategory(value)}
-          />
-        )
-      }
-
-      {otherFilterValues}
-    </>
-  );
-};
--- a/src/dashboardWebView/components/Header/FoldersFilter.tsx
+++ b/src/dashboardWebView/components/Header/FoldersFilter.tsx
@@ -6,11 +6,11 @@ import { MenuButton, MenuItem, MenuItems } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

-export interface IFoldersFilterProps { }
+export interface IFoldersProps { }

-export const FoldersFilter: React.FunctionComponent<
-  IFoldersFilterProps
-> = ({ }: React.PropsWithChildren<IFoldersFilterProps>) => {
+export const Folders: React.FunctionComponent<
+  IFoldersProps
+> = ({ }: React.PropsWithChildren<IFoldersProps>) => {
  const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);
  const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
  const settings = useRecoilValue(SettingsSelector);
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { Sorting } from './Sorting';
 import { Searchbox } from './Searchbox';
+import { Filter } from './Filter';
+import { Folders } from './Folders';
 import { Settings, NavigationType } from '../../models';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Grouping } from '.';
 import { ViewSwitch } from './ViewSwitch';
-import { useRecoilValue, useResetRecoilState } from 'recoil';
-import { GroupingSelector, SortingAtom } from '../../state';
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
+import { CategoryAtom, GroupingSelector, SortingAtom, TagAtom } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { ClearFilters } from './ClearFilters';
 import { MediaHeaderTop } from '../Media/MediaHeaderTop';
@@ -14,8 +16,7 @@ import { ChoiceButton } from '../Common/ChoiceButton';
 import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 import { Tabs } from './Tabs';
 import { CustomScript } from '../../../models';
-import { ArrowTopRightOnSquareIcon, BoltIcon, PlusIcon } from '@heroicons/react/24/outline';
-import { HeartIcon } from '@heroicons/react/24/solid';
+import { LightningBoltIcon, PlusIcon } from '@heroicons/react/outline';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import { useEffect, useMemo } from 'react';
@@ -29,9 +30,6 @@ import { ProjectSwitcher } from './ProjectSwitcher';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SettingsLink } from '../SettingsView/SettingsLink';
-import { Link } from '../Common/Link';
-import { SPONSOR_LINK } from '../../../constants';
-import { Filters } from './Filters';

 export interface IHeaderProps {
  header?: React.ReactNode;
@@ -49,6 +47,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
  totalPages,
  settings
 }: React.PropsWithChildren<IHeaderProps>) => {
+  const [crntTag, setCrntTag] = useRecoilState(TagAtom);
+  const [crntCategory, setCrntCategory] = useRecoilState(CategoryAtom);
  const grouping = useRecoilValue(GroupingSelector);
  const resetSorting = useResetRecoilState(SortingAtom);
  const location = useLocation();
@@ -81,7 +81,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
    .map((s, idx) => ({
      title: (
        <div key={idx} className="flex items-center">
-          <BoltIcon className="w-4 h-4 mr-2" />
+          <LightningBoltIcon className="w-4 h-4 mr-2" />
          <span>{s.title}</span>
        </div>
      ),
@@ -120,40 +120,35 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
    return [];
  }, [settings?.dashboardState?.contents?.templatesEnabled]);

+  useEffect(() => {
+    if (location.search) {
+      const searchParams = new URLSearchParams(location.search);
+      const taxonomy = searchParams.get('taxonomy');
+      const value = searchParams.get('value');
+
+      if (taxonomy && value) {
+        if (taxonomy === 'tags') {
+          setCrntTag(value);
+        } else if (taxonomy === 'categories') {
+          setCrntCategory(value);
+        }
+      }
+
+      return;
+    }
+
+    setCrntTag('');
+    setCrntCategory('');
+  }, [location.search]);
+
  return (
    <div className={`w-full sticky top-0 z-20 bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`}>
      <div className={`mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
        <Tabs onNavigate={updateView} />

-        <div className='flex items-center space-x-2 pr-4'>
+        <div className='flex'>
          <ProjectSwitcher />

-          {
-            settings?.websiteUrl && (
-              <Link
-                className='inline-flex items-center'
-                href={settings?.websiteUrl}
-                title={settings?.websiteUrl}>
-                <span>{settings?.websiteUrl}</span>
-
-                <ArrowTopRightOnSquareIcon className='w-4 h-4 ml-1' aria-hidden="true" />
-              </Link>
-            )
-          }
-
-          {
-            !settings?.isBacker && (
-              <Link
-                className='inline-flex items-center text-[var(--vscode-badge-background)]'
-                title={l10n.t(LocalizationKey.commonSupport)}
-                href={SPONSOR_LINK}
-              >
-                <span className='sr-only'>{l10n.t(LocalizationKey.commonSupport)}</span>
-                <HeartIcon className='w-4 h-4' aria-hidden="true" />
-              </Link>
-            )
-          }
-
          <SettingsLink onNavigate={updateView} />
        </div>
      </div>
@@ -190,7 +185,21 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
          >
            <ClearFilters />

-            <Filters />
+            <Folders />
+
+            <Filter
+              label={`Tag`}
+              activeItem={crntTag}
+              items={settings?.tags || []}
+              onClick={(value) => setCrntTag(value)}
+            />
+
+            <Filter
+              label={`Category`}
+              activeItem={crntCategory}
+              items={settings?.categories || []}
+              onClick={(value) => setCrntCategory(value)}
+            />

            <Grouping />

--- a/src/dashboardWebView/components/Header/Pagination.tsx
+++ b/src/dashboardWebView/components/Header/Pagination.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
+import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 import { PaginationButton } from './PaginationButton';
 import * as l10n from '@vscode/l10n';
@@ -22,6 +23,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
    totalPages,
    totalMedia
  );
+  const { getColors } = useThemeColors();

  const getButtons = useCallback((): number[] => {
    const maxButtons = 5;
@@ -75,8 +77,12 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
            setPage(button);
          }}
          className={`max-h-8 rounded ${page === button
-            ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
-            : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
+            ? `px-2 ${getColors('bg-gray-200  text-vulcan-500', 'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]')}`
+            : getColors(
+              `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+              `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`
+            )
+            }`}
        >
          {button + 1}
        </button>
--- a/src/dashboardWebView/components/Header/PaginationButton.tsx
+++ b/src/dashboardWebView/components/Header/PaginationButton.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IPaginationButtonProps {
  title: string;
@@ -11,11 +12,18 @@ export const PaginationButton: React.FunctionComponent<IPaginationButtonProps> =
  disabled,
  onClick
 }: React.PropsWithChildren<IPaginationButtonProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <button
      disabled={disabled}
      onClick={onClick}
-      className={`disabled:opacity-50 text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}
+      className={`disabled:opacity-50 ${
+        getColors(
+          'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500 disabled:hover:text-gray-500 dark:disabled:hover:text-whisper-900',
+          'text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
+        )
+      }`}
    >
      {title}
    </button>
--- a/src/dashboardWebView/components/Header/PaginationStatus.tsx
+++ b/src/dashboardWebView/components/Header/PaginationStatus.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
+import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -21,6 +22,8 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
    totalPages || 0,
    totalMedia
  );
+  const { getColors } = useThemeColors();
+
  const totelItemsOnPage = useMemo(() => {
    const items = (page + 1) * pageSetNr;
    if (totalItems < items) {
@@ -31,7 +34,11 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =

  return (
    <div className="hidden sm:flex">
-      <p className={`text-sm text-[var(--vscode-tab-inactiveForeground)]`}>
+      <p className={`text-sm ${getColors(
+        'text-gray-500 dark:text-whisper-900',
+        'text-[var(--vscode-tab-inactiveForeground)]'
+      )
+        }`}>
        {
          l10n.t(LocalizationKey.dashboardHeaderPaginationStatusText,
            (page * pageSetNr + 1),
--- a/src/dashboardWebView/components/Header/ProjectSwitcher.tsx
+++ b/src/dashboardWebView/components/Header/ProjectSwitcher.tsx
@@ -1,6 +1,6 @@
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
-import { ArrowsRightLeftIcon } from '@heroicons/react/24/outline';
+import { SwitchHorizontalIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
@@ -37,7 +37,7 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
        <MenuButton
          label={(
            <div className="inline-flex items-center">
-              <ArrowsRightLeftIcon className="h-4 w-4 mr-2" />
+              <SwitchHorizontalIcon className="h-4 w-4 mr-2" />
              <span>{l10n.t(LocalizationKey.dashboardHeaderProjectSwitcherLabel)}</span>
            </div>
          )}
--- a/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
+++ b/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
@@ -1,9 +1,10 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import { RefreshIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
+import useThemeColors from '../../hooks/useThemeColors';
 import { NavigationType } from '../../models';
 import {
  CategoryAtom,
@@ -36,7 +37,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);

  const refreshPages = () => {
-    setLoading("initPages");
+    setLoading(true);
    resetSearch();
    resetSorting();
    resetFolder();
@@ -46,7 +47,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
  };

  const refreshMedia = () => {
-    setLoading("initPages");
+    setLoading(true);
    resetPage();
    resetSearch();
    Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
@@ -66,7 +67,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
      title={l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}
      onClick={refresh}
    >
-      <ArrowPathIcon className={`h-5 w-5`} />
+      <RefreshIcon className={`h-5 w-5`} />
      <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}</span>
    </button>
  );
--- a/src/dashboardWebView/components/Header/Searchbox.tsx
+++ b/src/dashboardWebView/components/Header/Searchbox.tsx
@@ -1,12 +1,12 @@
-import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
+import { SearchIcon, XCircleIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useDebounce } from '../../../hooks/useDebounce';
+import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SearchReadyAtom } from '../../state';
 import { RefreshDashboardData } from './RefreshDashboardData';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
-import { TextField } from '../Common/TextField';

 export interface ISearchboxProps {
  placeholder?: string;
@@ -19,9 +19,10 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
  const [debounceSearchValue, setDebounceValue] = useRecoilState(SearchAtom);
  const searchReady = useRecoilValue(SearchReadyAtom);
  const debounceSearch = useDebounce<string>(value, 500);
+  const { getColors } = useThemeColors();

-  const handleChange = (newValue: string) => {
-    setValue(newValue);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
  };

  const reset = React.useCallback(() => {
@@ -45,18 +46,31 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
        <label htmlFor="search" className="sr-only">
          {l10n.t(LocalizationKey.commonSearch)}
        </label>
+        <div className="relative flex justify-center">
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <SearchIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
+          </div>

-        <TextField
-          name='search'
-          icon={(
-            <MagnifyingGlassIcon className={`h-4 w-4 text-[var(--vscode-input-foreground)]`} aria-hidden="true" />
+          <input
+            type="text"
+            name="search"
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
+              'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border, --vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+            )
+              }`}
+            placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
+            value={value}
+            onChange={handleChange}
+            disabled={!searchReady}
+          />
+
+          {value && (
+            <button onClick={reset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
+              <XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
+            </button>
          )}
-          value={value}
-          placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
-          disabled={!searchReady}
-          onChange={handleChange}
-          onReset={reset}
-        />
+        </div>
      </div>

      <RefreshDashboardData />
--- a/src/dashboardWebView/components/Header/Sorting.tsx
+++ b/src/dashboardWebView/components/Header/Sorting.tsx
@@ -1,4 +1,4 @@
-import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -26,7 +26,6 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
  const [crntSorting, setCrntSorting] = useRecoilState(SortingAtom);
  const searchValue = useRecoilValue(SearchSelector);
  const settings = useRecoilValue(SettingsSelector);
-  const [crntSort, setCrntSort] = React.useState<SortingOption | null>(null);

  const sortOptions: SortingOption[] = [
    {
@@ -144,38 +143,30 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
    ];
  }

-  React.useEffect(() => {
-    const getSorting = async () => {
-      let crntSortingOption = crntSorting;
-      if (!crntSortingOption) {
-        const sortingState = await messageHandler.request<{ key: string; value: SortingOption; }>(DashboardMessage.getState, { key: view === NavigationType.Media ? ExtensionState.Dashboard.Media.Sorting : ExtensionState.Dashboard.Contents.Sorting });
-        crntSortingOption = sortingState?.value || null;
+  let crntSortingOption = crntSorting;
+  if (!crntSortingOption) {
+    if (view === NavigationType.Contents) {
+      crntSortingOption = settings?.dashboardState?.contents?.sorting || null;
+    } else if (view === NavigationType.Media) {
+      crntSortingOption = settings?.dashboardState?.media?.sorting || null;
+    }

-        if (crntSortingOption === null) {
-          if (view === NavigationType.Contents && settings?.dashboardState.contents.defaultSorting) {
-            crntSortingOption =
-              allOptions.find((f) => f.id === settings?.dashboardState.contents.defaultSorting) || null;
-          } else if (
-            view === NavigationType.Media &&
-            settings?.dashboardState.media.defaultSorting
-          ) {
-            crntSortingOption =
-              allOptions.find((f) => f.id === settings?.dashboardState.media.defaultSorting) || null;
-          }
-        }
+    if (crntSortingOption === null) {
+      if (view === NavigationType.Contents && settings?.dashboardState.contents.defaultSorting) {
+        crntSortingOption =
+          allOptions.find((f) => f.id === settings?.dashboardState.contents.defaultSorting) || null;
+      } else if (
+        view === NavigationType.Media &&
+        settings?.dashboardState.contents.defaultSorting
+      ) {
+        crntSortingOption =
+          allOptions.find((f) => f.id === settings?.dashboardState.contents.defaultSorting) || null;
      }
-
-      let sort = allOptions.find((x) => x.id === crntSortingOption?.id) || sortOptions[0];
-      setCrntSort(sort);
-    };
-
-    getSorting();
-  }, [crntSorting]);
-
-  if (crntSort === null) {
-    return null;
+    }
  }

+  let crntSort = allOptions.find((x) => x.id === crntSortingOption?.id) || sortOptions[0];
+
  return (
    <div className="flex items-center">
      <Menu as="div" className="relative z-10 inline-block text-left">
--- a/src/dashboardWebView/components/Header/SyncButton.tsx
+++ b/src/dashboardWebView/components/Header/SyncButton.tsx
@@ -1,10 +1,11 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import { RefreshIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { GeneralCommands } from '../../../constants';
+import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsSelector } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -16,6 +17,7 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
 ) => {
  const settings = useRecoilValue(SettingsSelector);
  const [isSyncing, setIsSyncing] = useState(false);
+  const { getColors } = useThemeColors();

  const pull = () => {
    Messenger.send(GeneralCommands.toVSCode.gitSync);
@@ -47,11 +49,15 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
    <div className="git_actions">
      <button
        type="button"
-        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
+        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded ${getColors(
+          `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
+          `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
+        )
+          }`}
        onClick={pull}
        disabled={isSyncing}
      >
-        <ArrowPathIcon
+        <RefreshIcon
          className={`w-4 h-4 mr-2 ${isSyncing ? 'animate-reverse-spin' : ''}`}
          aria-hidden="true"
        />
--- a/src/dashboardWebView/components/Header/Tabs.tsx
+++ b/src/dashboardWebView/components/Header/Tabs.tsx
@@ -1,4 +1,4 @@
-import { CircleStackIcon, PhotoIcon, ScissorsIcon, TagIcon } from '@heroicons/react/24/outline';
+import { DatabaseIcon, PhotographIcon, ScissorsIcon, TagIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { FeatureFlag } from '../../../components/features/FeatureFlag';
@@ -33,7 +33,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
      </li>
      <li className="mr-2" role="presentation">
        <Tab navigationType={NavigationType.Media} onNavigate={onNavigate}>
-          <PhotoIcon className={`h-6 w-auto mr-2`} />
+          <PhotographIcon className={`h-6 w-auto mr-2`} />
          <span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
        </Tab>
      </li>
@@ -48,7 +48,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
      <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.data.view}>
        <li className="mr-2" role="presentation">
          <Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
-            <CircleStackIcon className={`h-6 w-auto mr-2`} />
+            <DatabaseIcon className={`h-6 w-auto mr-2`} />
            <span>{l10n.t(LocalizationKey.dashboardHeaderTabsData)}</span>
          </Tab>
        </li>
--- a/src/dashboardWebView/components/Header/ViewSwitch.tsx
+++ b/src/dashboardWebView/components/Header/ViewSwitch.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { ViewAtom, SettingsSelector } from '../../state';
-import { Bars4Icon, Squares2X2Icon } from '@heroicons/react/24/solid';
+import { ViewListIcon, ViewGridIcon } from '@heroicons/react/solid';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { DashboardViewType } from '../../models';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

@@ -15,6 +16,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
 ) => {
  const [view, setView] = useRecoilState(ViewAtom);
  const settings = useRecoilValue(SettingsSelector);
+  const { getColors } = useThemeColors();

  const toggleView = () => {
    const newView =
@@ -30,27 +32,27 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
  }, [settings?.pageViewType]);

  return (
-    <div className={`flex rounded-sm lg:mb-1 bg-[var(--vscode-button-secondaryBackground)]`}>
+    <div className={`flex rounded-sm lg:mb-1 ${getColors('bg-vulcan-50', 'bg-[var(--vscode-button-secondaryBackground)]')}`}>
      <button
-        className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]` : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
+        className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
          }`}
        title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToGrid)}
        type={`button`}
        onClick={toggleView}
      >
-        <Squares2X2Icon className={`w-4 h-4`} />
+        <ViewGridIcon className={`w-4 h-4`} />
        <span className={`sr-only`}>
          {l10n.t(LocalizationKey.dashboardHeaderViewSwitchToGrid)}
        </span>
      </button>
      <button
-        className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]` : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
+        className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
          }`}
        title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToList)}
        type={`button`}
        onClick={toggleView}
      >
-        <Bars4Icon className={`w-4 h-4`} />
+        <ViewListIcon className={`w-4 h-4`} />
        <span className={`sr-only`}>
          {l10n.t(LocalizationKey.dashboardHeaderViewSwitchToList)}
        </span>
--- a/src/dashboardWebView/components/Header/index.ts
+++ b/src/dashboardWebView/components/Header/index.ts
@@ -1,5 +1,5 @@
 export * from './Filter';
-export * from './FoldersFilter';
+export * from './Folders';
 export * from './Grouping';
 export * from './Header';
 export * from './Searchbox';
--- a/src/dashboardWebView/components/Layout/NavigationBar.tsx
+++ b/src/dashboardWebView/components/Layout/NavigationBar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface INavigationBarProps {
  title?: string;
@@ -10,15 +11,28 @@ export const NavigationBar: React.FunctionComponent<INavigationBarProps> = ({
  bottom,
  children
 }: React.PropsWithChildren<INavigationBarProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <aside
-      className={`w-2/12 px-4 py-6 h-full flex flex-col flex-grow border-r border-[var(--frontmatter-border)]`}
+      className={`w-2/12 px-4 py-6 h-full flex flex-col flex-grow border-r ${getColors(
+        'border-gray-200 dark:border-vulcan-300',
+        'border-[var(--frontmatter-border)]'
+      )}`}
    >
-      {title && <h2 className={`text-lg text-[var(--vscode-tab-inactiveForeground)]`}>{title}</h2>}
+      {title && <h2 className={`text-lg ${getColors(
+        'text-gray-500 dark:text-whisper-900',
+        'text-[var(--vscode-tab-inactiveForeground)]'
+      )
+        }`}>{title}</h2>}

      <nav className={`flex-1 py-4 -mx-4 h-full`}>
        <div
-          className={`divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
+          className={`divide-y border-t border-b  ${getColors(
+            'divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300',
+            'divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]'
+          )
+            }`}
        >
          {children}
        </div>
--- a/src/dashboardWebView/components/Layout/NavigationItem.tsx
+++ b/src/dashboardWebView/components/Layout/NavigationItem.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface INavigationItemProps {
  isSelected?: boolean;
@@ -10,11 +11,23 @@ export const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
  onClick,
  children
 }: React.PropsWithChildren<INavigationItemProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <button
      type="button"
-      className={`navigationitem px-4 py-2 flex items-center text-sm font-medium w-full text-left cursor-pointer hover:bg-[var(--frontmatter-list-hover-background)] hover:text-[var(--frontmatter-list-selected-text)] ${isSelected
-        ? `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]` : `text-[var(--frontmatter-list-text)]`
+      className={`navigationitem px-4 py-2 flex items-center text-sm font-medium w-full text-left cursor-pointer ${getColors(
+        'hover:bg-gray-200 dark:hover:bg-vulcan-400 hover:text-vulcan-500 dark:hover:text-whisper-500',
+        'hover:bg-[var(--frontmatter-list-hover-background)] hover:text-[var(--frontmatter-list-selected-text)]'
+      )
+        } ${isSelected
+          ? getColors(
+            'bg-gray-300 dark:bg-vulcan-300 text-vulcan-500 dark:text-whisper-500',
+            'bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]'
+          ) : getColors(
+            'text-gray-500 dark:text-whisper-900',
+            'text-[var(--frontmatter-list-text)]'
+          )
        }`}
      onClick={onClick}
    >
--- a/src/dashboardWebView/components/Layout/PageLayout.tsx
+++ b/src/dashboardWebView/components/Layout/PageLayout.tsx
@@ -26,7 +26,7 @@ export const PageLayout: React.FunctionComponent<IPageLayoutProps> = ({
      <div
        className={
          contentClass ||
-          'w-full flex justify-between flex-col flex-grow mx-auto pt-6 px-4 max-w-full'
+          'w-full flex justify-between flex-col flex-grow mx-auto pt-6 px-4 max-w-full xl:max-w-[90%]'
        }
      >
        {children}
--- a/src/dashboardWebView/components/Layout/SponsorMsg.tsx
+++ b/src/dashboardWebView/components/Layout/SponsorMsg.tsx
@@ -1,7 +1,8 @@
-import { HeartIcon, StarIcon } from '@heroicons/react/24/outline';
+import { HeartIcon, StarIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { REVIEW_LINK, SPONSOR_LINK } from '../../../constants';
 import { VersionInfo } from '../../../models';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

@@ -17,9 +18,15 @@ interface ISponsorLinkProps {
 }

 const SponsorLink: React.FunctionComponent<ISponsorLinkProps> = ({ title, href, children }: React.PropsWithChildren<ISponsorLinkProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <a
-      className={`group inline-flex justify-center items-center space-x-2 opacity-50 hover:opacity-100 text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-foreground)]]`}
+      className={`group inline-flex justify-center items-center space-x-2 opacity-50 hover:opacity-100 ${getColors(
+        `text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300`,
+        `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-foreground)]]`
+      )
+        }`}
      href={href}
      title={title}
    >
@@ -33,10 +40,16 @@ export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({
  isBacker,
  version
 }: React.PropsWithChildren<ISponsorMsgProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <footer
      className={`w-full px-4 py-2 text-center space-x-8 flex items-center border-t ${isBacker ? 'justify-center' : 'justify-between'
-        } bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}
+        } ${getColors(
+          'bg-gray-100 dark:bg-vulcan-500 text-vulcan-50 dark:text-whisper-900 border-gray-200 dark:border-vulcan-300',
+          'bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]'
+        )
+        }`}
    >
      {isBacker ? (
        <span>
--- a/src/dashboardWebView/components/Media/DetailsInput.tsx
+++ b/src/dashboardWebView/components/Media/DetailsInput.tsx
@@ -1,28 +1,37 @@
 import * as React from 'react';
-import { TextField } from '../Common/TextField';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IDetailsInputProps {
-  name: string;
  value: string;
-  onChange: (value: string) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  isTextArea?: boolean;
 }

-export const DetailsInput: React.FunctionComponent<IDetailsInputProps> = ({ name, value, isTextArea, onChange }: React.PropsWithChildren<IDetailsInputProps>) => {
+export const DetailsInput: React.FunctionComponent<IDetailsInputProps> = ({ value, isTextArea, onChange }: React.PropsWithChildren<IDetailsInputProps>) => {
+  const { getColors } = useThemeColors();
+
  if (isTextArea) {
    return (
-      <TextField
-        name={name}
+      <textarea
+        rows={3}
+        className={`py-1 px-2 sm:text-sm border w-full ${getColors(
+          'bg-white dark:bg-vulcan-300 border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+          'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+        )
+          }`}
        value={value}
        onChange={onChange}
-        multiline
      />
    );
  }

  return (
-    <TextField
-      name={name}
+    <input
+      className={`py-1 px-2 sm:text-sm border w-full ${getColors(
+        'bg-white dark:bg-vulcan-300 border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+        'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+      )
+        }`}
      value={value}
      onChange={onChange}
    />
--- a/src/dashboardWebView/components/Media/DetailsItem.tsx
+++ b/src/dashboardWebView/components/Media/DetailsItem.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IDetailsItemProps {
  title: string;
@@ -6,11 +7,13 @@ export interface IDetailsItemProps {
 }

 export const DetailsItem: React.FunctionComponent<IDetailsItemProps> = ({ title, details }: React.PropsWithChildren<IDetailsItemProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <>
      <div className="py-3 flex justify-between text-sm font-medium">
-        <dt className={`text-[var(--vscode-editor-foreground)]`}>{title}</dt>
-        <dd className={`text-right text-[var(--vscode-foreground)]`}>
+        <dt className={getColors('text-vulcan-100 dark:text-whisper-900', 'text-[var(--vscode-editor-foreground)]')}>{title}</dt>
+        <dd className={`text-right ${getColors('text-vulcan-300 dark:text-whisper-500', 'text-[var(--vscode-foreground)]')}`}>
          {details}
        </dd>
      </div>
--- a/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
+++ b/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
@@ -1,5 +1,5 @@
 import { Dialog, Transition } from '@headlessui/react';
-import { PencilSquareIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { PencilAltIcon, XIcon } from '@heroicons/react/outline';
 import { format } from 'date-fns';
 import { basename } from 'path';
 import * as React from 'react';
@@ -129,7 +129,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                          onClick={onDismiss}
                        >
                          <span className="sr-only">{l10n.t(LocalizationKey.dashboardMediaPanelClose)}</span>
-                          <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                          <XIcon className="h-6 w-6" aria-hidden="true" />
                        </button>
                      </div>
                    </div>
@@ -206,7 +206,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                  {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)}
                                </label>
                                <div className="relative mt-1">
-                                  <DetailsInput name={`filename`} value={name || ""} onChange={(e) => setFilename(`${e}.${extension}`)} />
+                                  <DetailsInput value={name || ""} onChange={(e) => setFilename(`${e.target.value}.${extension}`)} />

                                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                    <span className={`sm:text-sm placeholder-[var(--vscode-input-placeholderForeground)]`}>.{extension}</span>
@@ -219,7 +219,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                  {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}
                                </label>
                                <div className="mt-1">
-                                  <DetailsInput name={`title`} value={title || ""} onChange={(e) => setTitle(e)} />
+                                  <DetailsInput value={title || ""} onChange={(e) => setTitle(e.target.value)} />
                                </div>
                              </div>

@@ -229,7 +229,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                    {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}
                                  </label>
                                  <div className="mt-1">
-                                    <DetailsInput name={`caption`} value={caption || ""} onChange={(e) => setCaption(e)} isTextArea />
+                                    <DetailsInput value={caption || ""} onChange={(e) => setCaption(e.target.value)} isTextArea />
                                  </div>
                                </div>
                              )}
@@ -239,7 +239,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                    {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}
                                  </label>
                                  <div className="mt-1">
-                                    <DetailsInput name={`alt`} value={alt || ""} onChange={(e) => setAlt(e)} isTextArea />
+                                    <DetailsInput value={alt || ""} onChange={(e) => setAlt(e.target.value)} isTextArea />
                                  </div>
                                </div>
                              )}
@@ -270,7 +270,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                            <h3 className={`text-base flex items-center text-[var(--vscode-foreground)]`}>
                              <span>{l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormMetadataTitle)}</span>
                              <button onClick={onEdit}>
-                                <PencilSquareIcon className="w-4 h-4 ml-2" aria-hidden="true" />
+                                <PencilAltIcon className="w-4 h-4 ml-2" aria-hidden="true" />
                                <span className="sr-only">{l10n.t(LocalizationKey.commonEdit)}</span>
                              </button>
                            </h3>
--- a/src/dashboardWebView/components/Media/FolderCreation.tsx
+++ b/src/dashboardWebView/components/Media/FolderCreation.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FolderPlusIcon, BoltIcon } from '@heroicons/react/24/outline';
+import { FolderAddIcon, LightningBoltIcon } from '@heroicons/react/outline';
 import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
 import {
@@ -16,6 +16,7 @@ import { STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
 import { useCallback, useMemo } from 'react';
 import { extname } from 'path';
 import { parseWinPath } from '../../../helpers/parseWinPath';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

@@ -29,6 +30,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
  const allStaticFolders = useRecoilValue(AllStaticFoldersAtom);
  const allContentFolders = useRecoilValue(AllContentFoldersAtom);
  const viewData = useRecoilValue(ViewDataSelector);
+  const { getColors } = useThemeColors();

  const hexoAssetFolderPath = useMemo(() => {
    const path = viewData?.data?.filePath?.replace(extname(viewData.data.filePath), '');
@@ -76,11 +78,15 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
    if (isHexoPostAssetsEnabled) {
      return (
        <button
-          className={`mr-2 inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium  focus:outline-none text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
+          className={`mr-2 inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium  focus:outline-none ${getColors(
+            `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
+            `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
+          )
+            }`}
          title={l10n.t(LocalizationKey.dashboardMediaFolderCreationHexoCreate)}
          onClick={onAssetFolderCreation}
        >
-          <FolderPlusIcon className={`mr-2 h-6 w-6`} />
+          <FolderAddIcon className={`mr-2 h-6 w-6`} />
          <span className={``}>{l10n.t(LocalizationKey.dashboardMediaFolderCreationHexoCreate)}</span>
        </button>
      );
@@ -96,7 +102,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
          title={l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}
          choices={scripts.map((s) => ({
            title: s.title,
-            icon: <BoltIcon className="w-4 h-4 mr-2" />,
+            icon: <LightningBoltIcon className="w-4 h-4 mr-2" />,
            onClick: () => runCustomScript(s)
          }))}
          onClick={onFolderCreation}
@@ -110,11 +116,15 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
    <div className="flex flex-1 justify-end">
      {renderPostAssetsButton}
      <button
-        className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none rounded text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
+        className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none rounded ${getColors(
+          `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
+          `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
+        )
+          }`}
        title={l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}
        onClick={onFolderCreation}
      >
-        <FolderPlusIcon className={`mr-2 h-6 w-6`} />
+        <FolderAddIcon className={`mr-2 h-6 w-6`} />
        <span className={``}>{l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}</span>
      </button>
    </div>
--- a/src/dashboardWebView/components/Media/FolderItem.tsx
+++ b/src/dashboardWebView/components/Media/FolderItem.tsx
@@ -1,7 +1,8 @@
-import { FolderIcon } from '@heroicons/react/24/solid';
+import { FolderIcon } from '@heroicons/react/solid';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
+import useThemeColors from '../../hooks/useThemeColors';
 import { SelectedMediaFolderAtom } from '../../state';

 export interface IFolderItemProps {
@@ -16,6 +17,7 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
  staticFolder
 }: React.PropsWithChildren<IFolderItemProps>) => {
  const [, setSelectedFolder] = useRecoilState(SelectedMediaFolderAtom);
+  const { getColors } = useThemeColors();

  const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;

@@ -26,17 +28,25 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({

  return (
    <li
-      className={`group relative hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}
+      className={`group relative p-4 ${getColors(
+        'hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800',
+        'hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
+      )
+        }`}
    >
      <button
        title={isContentFolder ? 'Content directory folder' : 'Public directory folder'}
-        className={`p-4 w-full flex flex-row items-center h-full`}
+        className={`w-full flex flex-row items-center h-full`}
        onClick={() => setSelectedFolder(folder)}
      >
        <div className="relative mr-4">
          <FolderIcon className={`h-12 w-12`} />
          {isContentFolder && (
-            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 text-[var(--vscode-foreground)]`}>
+            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 ${getColors(
+              `text-whisper-800 dark:text-vulcan-500`,
+              `text-[var(--vscode-foreground)]`
+            )
+              }`}>
              C
            </span>
          )}
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -2,17 +2,17 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
 import {
  ClipboardIcon,
-  CodeBracketIcon,
+  CodeIcon,
  DocumentIcon,
  EyeIcon,
-  MusicalNoteIcon,
+  MusicNoteIcon,
  PencilIcon,
-  PhotoIcon,
+  PhotographIcon,
  PlusIcon,
-  CommandLineIcon,
+  TerminalIcon,
  TrashIcon,
  VideoCameraIcon
-} from '@heroicons/react/24/outline';
+} from '@heroicons/react/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -37,6 +37,7 @@ import { InfoDialog } from '../Modals/InfoDialog';
 import { DetailsSlideOver } from './DetailsSlideOver';
 import { usePopper } from 'react-popper';
 import { MediaSnippetForm } from './MediaSnippetForm';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';

@@ -61,6 +62,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
  const settings = useRecoilValue(SettingsSelector);
  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
  const viewData = useRecoilValue(ViewDataSelector);
+  const { getColors } = useThemeColors();

  const hasViewData = useMemo(() => {
    return viewData?.data?.filePath !== undefined;
@@ -313,7 +315,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
          key={script.title}
          title={
            <div className="flex items-center">
-              <CommandLineIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
+              <TerminalIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
              <span>{script.title}</span>
            </div>
          }
@@ -359,7 +361,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    }

    if (isImageFile) {
-      return <PhotoIcon className={`h-1/2 ${colors}`} />;
+      return <PhotographIcon className={`h-1/2 ${colors}`} />;
    }

    if (isVideoFile) {
@@ -367,7 +369,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    }

    if (isAudioFile) {
-      icon = <MusicalNoteIcon className={`h-4/6 ${colors}`} />;
+      icon = <MusicNoteIcon className={`h-4/6 ${colors}`} />;
    }

    return (
@@ -469,7 +471,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                    className={`h-1/3 text-white hover:text-[var(--vscode-button-background)]`}
                    onClick={insertSnippet}
                  >
-                    <CodeBracketIcon
+                    <CodeIcon
                      className={`w-full h-full hover:drop-shadow-md `}
                      aria-hidden="true"
                    />
@@ -481,7 +483,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({
        </button>
        <div className={`relative py-4 pl-4 pr-12`}>
          <div className={`group/actions absolute top-4 right-4 flex flex-col space-y-4`}>
-            <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 group-hover/actions:bg-[var(--vscode-sideBar-background)] group-hover/actions:border-[var(--frontmatter-border)]`}>
+            <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 ${getColors(
+              `group-hover/actions:bg-gray-200 dark:group-hover/actions:bg-vulcan-200 group-hover/actions:border-gray-100 dark:group-hover/actions:border-vulcan-50`,
+              `group-hover/actions:bg-[var(--vscode-sideBar-background)] group-hover/actions:border-[var(--frontmatter-border)]`
+            )
+              }`}>
              <Menu as="div" className="relative z-10 flex text-left">
                <div className="hidden group-hover/actions:flex">
                  <QuickAction title="View media details" onClick={viewMediaDetails}>
@@ -507,7 +513,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({

                      {viewData?.data?.position && mediaSnippets.length > 0 && (
                        <QuickAction title={l10n.t(LocalizationKey.commonInsertSnippet)} onClick={insertSnippet}>
-                          <CodeBracketIcon className={`w-4 h-4`} aria-hidden="true" />
+                          <CodeIcon className={`w-4 h-4`} aria-hidden="true" />
                        </QuickAction>
                      )}
                    </>
@@ -564,7 +570,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                              key={idx}
                              title={
                                <div className="flex items-center">
-                                  <CodeBracketIcon
+                                  <CodeIcon
                                    className="mr-2 h-5 w-5 flex-shrink-0"
                                    aria-hidden={true}
                                  />{' '}
@@ -620,39 +626,39 @@ export const Item: React.FunctionComponent<IItemProps> = ({
              </Menu>
            </div>
          </div>
-          <p className={`text-sm font-bold pointer-events-none flex items-center break-all text-[var(--vscode-foreground)]}`}>
+          <p className={`text-sm font-bold pointer-events-none flex items-center break-all ${getColors(`dark:text-whisper-900`, `text-[var(--vscode-foreground)]`)}`}>
            {basename(parseWinPath(media.fsPath) || '')}
          </p>
          {!isImageFile && media.title && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
              <b className={`mr-2`}>
                {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}:
              </b>
-              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.title}</span>
+              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.title}</span>
            </p>
          )}
          {media.caption && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
              <b className={`mr-2`}>
                {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}:
              </b>
-              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.caption}</span>
+              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.caption}</span>
            </p>
          )}
          {!media.caption && media.alt && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none  flex flex-col items-start`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none  flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
              <b className={`mr-2`}>
                {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}:
              </b>
-              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.alt}</span>
+              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.alt}</span>
            </p>
          )}
          {(media?.size || media?.dimensions) && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
              <b className={`mr-1`}>
                {l10n.t(LocalizationKey.dashboardMediaCommonSize)}:
              </b>
-              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>
+              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>
                {getMediaDetails()}
              </span>
            </p>
@@ -662,7 +668,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({

      {showSnippetSelection && (
        <InfoDialog
-          icon={<CodeBracketIcon className="h-6 w-6" aria-hidden="true" />}
+          icon={<CodeIcon className="h-6 w-6" aria-hidden="true" />}
          title={l10n.t(LocalizationKey.commonInsertSnippet)}
          description={l10n.t(LocalizationKey.dashboardMediaItemInfoDialogSnippetDescription)}
          dismiss={() => setShowSnippetSelection(false)}
@@ -671,7 +677,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({
            {mediaSnippets.map((snippet, idx) => (
              <li key={idx} className="inline-flex items-center pb-2 mr-2">
                <button
-                  className={`w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:w-auto sm:text-sm disabled:opacity-30 bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`}
+                  className={`w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:w-auto sm:text-sm disabled:opacity-30 ${getColors(
+                    `bg-teal-600 text-white hover:bg-teal-700 dark:hover:bg-teal-900`,
+                    `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`
+                  )
+                    }`}
                  onClick={() => processSnippet(snippet)}
                >
                  {snippet.title}
--- a/src/dashboardWebView/components/Media/Lightbox.tsx
+++ b/src/dashboardWebView/components/Media/Lightbox.tsx
@@ -1,6 +1,7 @@
 import { basename } from 'path';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
+import useThemeColors from '../../hooks/useThemeColors';
 import { LightboxAtom } from '../../state';

 export interface ILightboxProps { }
@@ -9,6 +10,7 @@ export const Lightbox: React.FunctionComponent<ILightboxProps> = (
  _: React.PropsWithChildren<ILightboxProps>
 ) => {
  const [lightbox, setLightbox] = useRecoilState(LightboxAtom);
+  const { getColors } = useThemeColors();

  if (!lightbox) {
    return null;
@@ -21,7 +23,11 @@ export const Lightbox: React.FunctionComponent<ILightboxProps> = (
  return (
    <div
      onClick={hideLightbox}
-      className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center z-50 bg-[var(--frontmatter-lightbox-background)]`}
+      className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center z-50 ${getColors(
+        `bg-black bg-opacity-50`,
+        `bg-[var(--frontmatter-lightbox-background)]`
+      )
+        }`}
    >
      <div className={`w-full h-full flex flex-wrap items-center justify-center`}>
        <img
--- a/src/dashboardWebView/components/Media/List.tsx
+++ b/src/dashboardWebView/components/Media/List.tsx
@@ -13,7 +13,7 @@ export const List: React.FunctionComponent<IListProps> = ({
  return (
    <ul
      role="list"
-      className={`grid gap-4 ${gapClass} grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5`}
+      className={`grid gap-4 ${gapClass} grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`}
    >
      {children}
    </ul>
--- a/src/dashboardWebView/components/Media/Media.tsx
+++ b/src/dashboardWebView/components/Media/Media.tsx
@@ -1,5 +1,5 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { ArrowUpTrayIcon } from '@heroicons/react/24/outline';
+import { UploadIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import {
@@ -25,8 +25,10 @@ import { PageLayout } from '../Layout/PageLayout';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import { basename, extname, join } from 'path';
 import { MediaInfo } from '../../../models';
+import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { NavigationType } from '../../models';

 export interface IMediaProps { }

@@ -39,6 +41,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
  const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
  const folders = useRecoilValue(MediaFoldersAtom);
  const loading = useRecoilValue(LoadingAtom);
+  const { getColors } = useThemeColors();

  const currentStaticFolder = useMemo(() => {
    if (settings?.staticFolder) {
@@ -174,8 +177,12 @@ export const Media: React.FunctionComponent<IMediaProps> = (
        )}

        {isDragActive && (
-          <div className={`absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-50 text-[var(--vscode-foreground)] bg-[var(--vscode-editor-background)] opacity-75`}>
-            <ArrowUpTrayIcon className={`h-32`} />
+          <div className={`absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-50 ${getColors(
+            'text-whisper-500 bg-gray-900 bg-opacity-70',
+            'text-[var(--vscode-foreground)] bg-[var(--vscode-editor-background)] opacity-75'
+          )
+            }`}>
+            <UploadIcon className={`h-32`} />
            <p className={`text-xl max-w-md text-center`}>
              {selectedFolder
                ? l10n.t(LocalizationKey.dashboardMediaMediaFolderUpload, selectedFolder)
@@ -188,7 +195,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (
          <div className={`flex items-center justify-center h-full`}>
            <div className={`max-w-xl text-center`}>
              <FrontMatterIcon
-                className={`h-32 mx-auto opacity-90 mb-8 text-[var(--vscode-editor-foreground)]`}
+                className={`h-32 mx-auto opacity-90 mb-8 ${getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
+                  }`}
              />

              <p className={`text-xl font-medium`}>
--- a/src/dashboardWebView/components/Media/MediaHeaderBottom.tsx
+++ b/src/dashboardWebView/components/Media/MediaHeaderBottom.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
+import useThemeColors from '../../hooks/useThemeColors';
 import { NavigationType } from '../../models/NavigationType';
 import { SettingsAtom } from '../../state';
 import { Sorting } from '../Header';
@@ -12,6 +13,7 @@ export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps>
  _: React.PropsWithChildren<IMediaHeaderBottomProps>
 ) => {
  const settings = useRecoilValue(SettingsAtom);
+  const { getColors } = useThemeColors();

  if (!settings?.wsFolder) {
    return null;
@@ -19,7 +21,11 @@ export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps>

  return (
    <nav
-      className={`w-full flex justify-between py-2 border-b bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBar-foreground)] border-[var(--frontmatter-border)]`}
+      className={`w-full flex justify-between py-2 border-b ${getColors(
+        'bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-gray-300 dark:border-vulcan-100',
+        'bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBar-foreground)] border-[var(--frontmatter-border)]'
+      )
+        }`}
      aria-label="Breadcrumb"
    >
      <Breadcrumb />
--- a/src/dashboardWebView/components/Media/MediaHeaderTop.tsx
+++ b/src/dashboardWebView/components/Media/MediaHeaderTop.tsx
@@ -6,6 +6,7 @@ import { useDebounce } from '../../../hooks/useDebounce';
 import { usePrevious } from '../../../panelWebView/hooks/usePrevious';
 import { DashboardCommand } from '../../DashboardCommand';
 import { DashboardMessage } from '../../DashboardMessage';
+import useThemeColors from '../../hooks/useThemeColors';
 import {
  LoadingAtom,
  PageAtom,
@@ -32,10 +33,11 @@ export const MediaHeaderTop: React.FunctionComponent<
  const settings = useRecoilValue(SettingsSelector);
  const debounceGetMedia = useDebounce<string | null>(lastUpdated, 200);
  const prevSelectedFolder = usePrevious<string | null>(selectedFolder);
+  const { getColors } = useThemeColors();

  const mediaUpdate = (message: MessageEvent<EventData<{ key: string; value: any }>>) => {
    if (message.data.command === DashboardCommand.mediaUpdate) {
-      setLoading("loading");
+      setLoading(true);
      Messenger.send(DashboardMessage.getMedia, {
        page,
        folder: selectedFolder || '',
@@ -49,7 +51,7 @@ export const MediaHeaderTop: React.FunctionComponent<
      prevSelectedFolder !== null ||
      settings?.dashboardState?.media.selectedFolder !== selectedFolder
    ) {
-      setLoading("loading");
+      setLoading(true);
      setPage(0);
      setLastUpdated(new Date().getTime().toString());
    }
@@ -61,7 +63,7 @@ export const MediaHeaderTop: React.FunctionComponent<

  React.useEffect(() => {
    if (debounceGetMedia) {
-      setLoading("loading");
+      setLoading(true);

      Messenger.send(DashboardMessage.getMedia, {
        page,
@@ -81,7 +83,11 @@ export const MediaHeaderTop: React.FunctionComponent<

  return (
    <nav
-      className={`py-3 px-4 flex items-center justify-between border-b border-[var(--frontmatter-border)]`}
+      className={`py-3 px-4 flex items-center justify-between border-b ${getColors(
+        'border-gray-300 dark:border-vulcan-100',
+        'border-[var(--frontmatter-border)]'
+      )
+        }`}
      aria-label="Pagination"
    >
      <Searchbox placeholder={l10n.t(LocalizationKey.dashboardMediaMediaHeaderTopSearchboxPlaceholder)} />
--- a/src/dashboardWebView/components/Media/SnippetSlideOver.tsx
+++ b/src/dashboardWebView/components/Media/SnippetSlideOver.tsx
@@ -1,5 +1,5 @@
 import { Dialog, Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { XIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { Fragment, useRef } from 'react';
 import * as l10n from '@vscode/l10n';
@@ -58,7 +58,7 @@ export const SnippetSlideOver: React.FunctionComponent<ISnippetSlideOverProps> =
                          onClick={dismiss}
                        >
                          <span className="sr-only">{l10n.t(LocalizationKey.dashboardMediaPanelClose)}</span>
-                          <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                          <XIcon className="h-6 w-6" aria-hidden="true" />
                        </button>
                      </div>
                    </div>
--- a/src/dashboardWebView/components/Menu/ActionMenuButton.tsx
+++ b/src/dashboardWebView/components/Menu/ActionMenuButton.tsx
@@ -1,6 +1,7 @@
 import { Menu } from '@headlessui/react';
-import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
+import { DotsVerticalIcon } from '@heroicons/react/outline';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IActionMenuButtonProps {
  title: string;
@@ -13,16 +14,23 @@ export const ActionMenuButton: React.FunctionComponent<IActionMenuButtonProps> =
  disabled,
  ref
 }: React.PropsWithChildren<IActionMenuButtonProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <Menu.Button
      ref={ref || null}
-      onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
      disabled={disabled}
-      className={`group inline-flex justify-center text-sm font-medium text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${disabled ? 'opacity-50' : ''
-        }`}
+      className={`group inline-flex justify-center text-sm font-medium ${
+        getColors(
+          'text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600',
+          'text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
+        )
+      } ${
+        disabled ? 'opacity-50' : ''
+      }`}
    >
      <span className="sr-only">{title}</span>
-      <EllipsisVerticalIcon className="w-4 h-4" aria-hidden="true" />
+      <DotsVerticalIcon className="w-4 h-4" aria-hidden="true" />
    </Menu.Button>
  );
 };
--- a/src/dashboardWebView/components/Menu/MenuButton.tsx
+++ b/src/dashboardWebView/components/Menu/MenuButton.tsx
@@ -1,6 +1,7 @@
 import { Menu } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import { ChevronDownIcon } from '@heroicons/react/solid';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IMenuButtonProps {
  label: string | JSX.Element;
@@ -13,9 +14,11 @@ export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
  title,
  disabled
 }: React.PropsWithChildren<IMenuButtonProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <div className={`group flex items-center ${disabled ? 'opacity-50' : ''}`}>
-      <div className={`mr-2 font-medium flex items-center text-[var(--vscode-tab-inactiveForeground)]`}>{label}:</div>
+      <div className={`mr-2 font-medium flex items-center ${getColors('text-gray-500 dark:text-whisper-700', 'text-[var(--vscode-tab-inactiveForeground)]')}`}>{label}:</div>

      <Menu.Button
        disabled={disabled}
--- a/src/dashboardWebView/components/Menu/MenuItem.tsx
+++ b/src/dashboardWebView/components/Menu/MenuItem.tsx
@@ -1,5 +1,6 @@
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IMenuItemProps {
  title: JSX.Element | string;
@@ -16,13 +17,21 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({
  disabled,
  onClick
 }: React.PropsWithChildren<IMenuItemProps>) => {
+  const { getColors } = useThemeColors();
+  
  return (
    <Menu.Item>
      <button
        disabled={disabled}
        onClick={(e) => onClick(value, e)}
-        className={`${!isCurrent ? `font-normal` : `font-bold`
-          } block px-4 py-2 text-sm w-full text-left disabled:opacity-50 text-[var(--vscode-editor-foreground)] hover:bg-[var(--vscode-list-hoverBackground)]`}
+        className={`${
+          !isCurrent ? `font-normal` : `font-bold`
+        } block px-4 py-2 text-sm w-full text-left disabled:opacity-50 ${
+          getColors(
+            'text-gray-500 dark:text-whisper-900 hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100',
+            'text-[var(--vscode-editor-foreground)] hover:bg-[var(--vscode-list-hoverBackground)] '
+          )
+        }`}
      >
        {title}
      </button>
--- a/src/dashboardWebView/components/Menu/MenuItems.tsx
+++ b/src/dashboardWebView/components/Menu/MenuItems.tsx
@@ -1,6 +1,7 @@
 import { Menu, Transition } from '@headlessui/react';
 import * as React from 'react';
 import { Fragment } from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IMenuItemsProps {
  widthClass?: string;
@@ -16,6 +17,8 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({
  updatePopper,
  disablePopper
 }: React.PropsWithChildren<IMenuItemsProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <Transition
      as={Fragment}
@@ -29,7 +32,11 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({
    >
      <Menu.Items
        className={`${widthClass || ''} ${marginTopClass || 'mt-2'} ${disablePopper ? 'origin-top-right absolute right-0 z-20' : ''
-          } rounded shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto bg-[var(--vscode-sideBar-background)] ring-[var(--frontmatter-border)]`}
+          } rounded shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto ${getColors(
+            'bg-white dark:bg-vulcan-500 ring-vulcan-400 dark:ring-white',
+            'bg-[var(--vscode-sideBar-background)] ring-[var(--frontmatter-border)]'
+          )
+          }`}
      >
        <div className="py-1">{children}</div>
      </Menu.Items>
--- a/src/dashboardWebView/components/Menu/QuickAction.tsx
+++ b/src/dashboardWebView/components/Menu/QuickAction.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IQuickActionProps {
  title: string;
@@ -10,12 +11,18 @@ export const QuickAction: React.FunctionComponent<IQuickActionProps> = ({
  onClick,
  children
 }: React.PropsWithChildren<IQuickActionProps>) => {
+  const { getColors } = useThemeColors();
+
  return (
    <button
      type="button"
      title={title}
      onClick={onClick}
-      className={`px-2 group inline-flex justify-center text-sm font-medium text-[var(--vscode-foreground)] hover:text-[var(--frontmatter-button-hoverBackground)]`}
+      className={`px-2 group inline-flex justify-center text-sm font-medium ${getColors(
+        'text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600',
+        'text-[var(--vscode-foreground)] hover:text-[var(--frontmatter-button-hoverBackground)]'
+      )
+        }`}
    >
      {children}
      <span className="sr-only">{title}</span>
--- a/src/dashboardWebView/components/Modals/Alert.tsx
+++ b/src/dashboardWebView/components/Modals/Alert.tsx
@@ -1,7 +1,8 @@
 import { Dialog, Transition } from '@headlessui/react';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { ExclamationIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { Fragment, useRef } from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IAlertProps {
  title: string;
@@ -22,6 +23,7 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
  trigger
 }: React.PropsWithChildren<IAlertProps>) => {
  const cancelButtonRef = useRef(null);
+  const { getColors } = useThemeColors();

  return (
    <Transition.Root show={true} as={Fragment}>
@@ -40,7 +42,11 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
-            <Dialog.Overlay className={`fixed inset-0 transition-opacity bg-[var(--vscode-editor-background)] opacity-75`} />
+            <Dialog.Overlay className={`fixed inset-0 transition-opacity ${getColors(
+              `bg-vulcan-500 bg-opacity-75`,
+              `bg-[var(--vscode-editor-background)] opacity-75`
+            )
+              }`} />
          </Transition.Child>

          {/* This element is to trick the browser into centering the modal contents. */}
@@ -57,37 +63,54 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          >
-            <div className={`inline-block align-bottom rounded px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 bg-[var(--vscode-editor-background)] border-[var(--frontmatter-border)]`}>
+            <div className={`inline-block align-bottom rounded px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${getColors(
+              'bg-white dark:bg-vulcan-500 border-whisper-900',
+              'bg-[var(--vscode-editor-background)] border-[var(--frontmatter-border)]'
+            )
+              }`}>
              <div className="sm:flex sm:items-start">
-                <div className={`mt-3 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 bg-[var(--vscode-sidebar-background)]`}>
-                  <ExclamationTriangleIcon
-                    className={`h-6 w-6 text-[var(--vscode-errorForeground)]`}
+                <div className={`mt-3 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 ${getColors(
+                  'bg-gray-50 dark:bg-vulcan-400',
+                  'bg-[var(--vscode-sidebar-background)]'
+                )
+                  }`}>
+                  <ExclamationIcon
+                    className={`h-6 w-6 ${getColors(`text-red-500 dark:text-red-50`, `text-[var(--vscode-errorForeground)]`)}`}
                    aria-hidden="true"
                  />
                </div>
                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                  <Dialog.Title
                    as="h3"
-                    className={`text-lg leading-6 font-medium text-[var(--vscode-editor-foreground)]`}
+                    className={`text-lg leading-6 font-medium ${getColors(`text-vulcan-300 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
+                      }`}
                  >
                    {title}
                  </Dialog.Title>
                  <div className="mt-2">
-                    <p className={`text-sm text-[var(--vscode-editor-foreground)]`}>{description}</p>
+                    <p className={`text-sm ${getColors(`text-vulcan-500 dark:text-whisper-500`, `text-[var(--vscode-editor-foreground)]`)}`}>{description}</p>
                  </div>
                </div>
              </div>
              <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
-                  className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm text-[var(--vscode-statusBarItem-errorForeground)] bg-[var(--vscode-statusBarItem-errorBackground)]`}
+                  className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm ${getColors(
+                    'text-white bg-red-600 hover:bg-red-700 dark:hover:bg-red-900 focus:ring-red-500',
+                    'text-[var(--vscode-statusBarItem-errorForeground)] bg-[var(--vscode-statusBarItem-errorBackground)]'
+                  )
+                    }`}
                  onClick={() => trigger()}
                >
                  {okBtnText}
                </button>
                <button
                  type="button"
-                  className={`mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium  focus:outline-none sm:mt-0 sm:w-auto sm:text-sm bg-[var(--vscode-button-secondaryBackground)] border-[var(--frontmatter-border)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`}
+                  className={`mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium  focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${getColors(
+                    'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200',
+                    'bg-[var(--vscode-button-secondaryBackground)] border-[var(--frontmatter-border)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
+                  )
+                    }`}
                  onClick={() => dismiss()}
                  ref={cancelButtonRef}
                >
--- a/src/dashboardWebView/components/Modals/FormDialog.tsx
+++ b/src/dashboardWebView/components/Modals/FormDialog.tsx
@@ -1,6 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react';
 import * as React from 'react';
 import { Fragment, useRef } from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IFormDialogProps {
  title: string;
@@ -24,6 +25,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
  children
 }: React.PropsWithChildren<IFormDialogProps>) => {
  const cancelButtonRef = useRef(null);
+  const { getColors } = useThemeColors();

  return (
    <Transition.Root show={true} as={Fragment}>
@@ -42,7 +44,11 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
-            <Dialog.Overlay className={`fixed inset-0 transition-opacity bg-[var(--vscode-editor-background)] opacity-75`} />
+            <Dialog.Overlay className={`fixed inset-0 transition-opacity ${getColors(
+              `bg-vulcan-500 bg-opacity-75`,
+              `bg-[var(--vscode-editor-background)] opacity-75`
+            )
+              }`} />
          </Transition.Child>

          {/* This element is to trick the browser into centering the modal contents. */}
@@ -59,11 +65,16 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          >
-            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]`}>
+            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${getColors(
+              'bg-white dark:bg-vulcan-500 border-whisper-900',
+              'bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]'
+            )
+              }`}>
              <div>
                <Dialog.Title
                  as="h3"
-                  className={`text-lg leading-6 font-medium text-[var(--vscode-editor-foreground)]`}
+                  className={`text-lg leading-6 font-medium ${getColors(`text-vulcan-300 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
+                    }`}
                >
                  {title}
                </Dialog.Title>
@@ -77,7 +88,11 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                  <button
                    type="button"
-                    className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`}
+                    className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 ${getColors(
+                      'bg-teal-600 focus:ring-teal-500 text-white hover:bg-teal-700 dark:hover:bg-teal-900 ',
+                      'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]'
+                    )
+                      }`}
                    onClick={() => trigger()}
                    disabled={isSaveDisabled}
                  >
@@ -86,7 +101,11 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({

                  <button
                    type="button"
-                    className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm bg-[var(--vscode-button-secondaryBackground)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`}
+                    className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${getColors(
+                      'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200',
+                      'bg-[var(--vscode-button-secondaryBackground)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
+                    )
+                      }`}
                    onClick={() => dismiss()}
                    ref={cancelButtonRef}
                  >
--- a/src/dashboardWebView/components/Modals/InfoDialog.tsx
+++ b/src/dashboardWebView/components/Modals/InfoDialog.tsx
@@ -1,6 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react';
 import * as React from 'react';
 import { Fragment } from 'react';
+import useThemeColors from '../../hooks/useThemeColors';

 export interface IInfoDialogProps {
  icon?: JSX.Element;
@@ -16,6 +17,7 @@ export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({
  description,
  children
 }: React.PropsWithChildren<IInfoDialogProps>) => {
+  const { getColors } = useThemeColors();

  return (
    <Transition.Root show={true} as={Fragment}>
@@ -30,7 +32,11 @@ export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
-            <Dialog.Overlay className={`fixed inset-0 transition-opacity bg-[var(--vscode-editor-background)] opacity-75`} />
+            <Dialog.Overlay className={`fixed inset-0 transition-opacity ${getColors(
+              `bg-vulcan-500 bg-opacity-75`,
+              `bg-[var(--vscode-editor-background)] opacity-75`
+            )
+              }`} />
          </Transition.Child>

          {/* This element is to trick the browser into centering the modal contents. */}
@@ -47,22 +53,31 @@ export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({
            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          >
-            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 bg-[var(--vscode-editor-background)] border-[var(--frontmatter-border)]`}>
+            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2  ${getColors(
+              `bg-white dark:bg-vulcan-500 border-whisper-900`,
+              `bg-[var(--vscode-editor-background)] border-[var(--frontmatter-border)]`
+            )
+              }`}>
              <div className="sm:flex sm:items-start">
                {icon && (
-                  <div className={`mt-3 sm:mr-4 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 bg-[var(--vscode-sidebar-background)]`}>
+                  <div className={`mt-3 sm:mr-4 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 ${getColors(
+                    `bg-gray-50 dark:bg-vulcan-400`,
+                    `bg-[var(--vscode-sidebar-background)]'`
+                  )
+                    }`}>
                    {icon}
                  </div>
                )}
                <div className="mt-3 text-center sm:mt-0 sm:text-left">
                  <Dialog.Title
                    as="h3"
-                    className={`text-lg leading-6 font-medium text-[var(--vscode-editor-foreground)]`}
+                    className={`text-lg leading-6 font-medium ${getColors(`text-vulcan-300 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
+                      }`}
                  >
                    {title}
                  </Dialog.Title>
                  <div className="mt-2">
-                    <p className={`text-sm text-[var(--vscode-editor-foreground)]`}>{description}</p>
+                    <p className={`text-sm ${getColors(`text-vulcan-500 dark:text-whisper-500`, `text-[var(--vscode-editor-foreground)]`)}`}>{description}</p>
                  </div>
                </div>
              </div>
--- a/src/dashboardWebView/components/Preview/Preview.tsx
+++ b/src/dashboardWebView/components/Preview/Preview.tsx
@@ -1,8 +1,9 @@
 import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
-import { ArrowRightIcon, ArrowTopRightOnSquareIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { ArrowRightIcon, ExternalLinkIcon, RefreshIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { GeneralCommands, PreviewCommands } from '../../../constants';
+import useThemeColors from '../../hooks/useThemeColors';
 import { EventData } from '@estruyf/vscode/dist/models';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -16,6 +17,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
 }: React.PropsWithChildren<IPreviewProps>) => {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [crntUrl, setCrntUrl] = useState<string | null>(null);
+  const { getColors } = useThemeColors();
  const [localeReady, setLocaleReady] = useState<boolean>(false);

  const onRefresh = () => {
@@ -85,27 +87,28 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
        {
          localeReady && (
            <div
-              className={`actions flex items-center space-x-2 px-2 text-[var(--vscode-list-activeSelectionForeground)]`}
+              className={`actions flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
+                }`}
            >
              <button
                title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
                onClick={navigateToUrl}
-                className={`hover:text-[var(--vscode-textLink-activeForeground)]`}>
+                className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
                <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
              </button>

              <button
                title={l10n.t(LocalizationKey.dashboardPreviewButtonRefreshTitle)}
                onClick={onRefresh}
-                className={`mr-2 hover:text-[var(--vscode-textLink-activeForeground)]`}>
-                <ArrowPathIcon className="w-4 h-4" aria-hidden="true" />
+                className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+                <RefreshIcon className="w-4 h-4" aria-hidden="true" />
              </button>

              <button
                title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
                onClick={openInBrowser}
-                className={`mr-2 hover:text-[var(--vscode-textLink-activeForeground)]`}>
-                <ArrowTopRightOnSquareIcon className="w-4 h-4" aria-hidden="true" />
+                className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+                <ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
              </button>
            </div>
          )
--- a/src/dashboardWebView/components/SettingsView/CommonSettings.tsx
+++ b/src/dashboardWebView/components/SettingsView/CommonSettings.tsx
@@ -6,17 +6,15 @@ import { useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
 import { SettingsInput } from './SettingsInput';
 import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
-import { DOCS_SUBMODULES, FrameworkDetectors, GIT_CONFIG, SETTING_FRAMEWORK_START, SETTING_GIT_COMMIT_MSG, SETTING_GIT_ENABLED, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
+import { FrameworkDetectors, SETTING_FRAMEWORK_START, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
-import { SettingsCheckbox } from './SettingsCheckbox';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';

 export interface ICommonSettingsProps { }

 interface Config {
  name: string;
-  value: string | boolean;
+  value: string;
 }

 export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (props: React.PropsWithChildren<ICommonSettingsProps>) => {
@@ -24,7 +22,7 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
  const [config, setConfig] = React.useState<Config[]>([]);
  const [updated, setUpdated] = React.useState<boolean>(false);

-  const onSettingChange = React.useCallback((name: string, value: string | boolean) => {
+  const onSettingChange = React.useCallback((name: string, value: string) => {
    setConfig((prev) => {
      const setting = prev.find((c) => c.name === name);
      if (setting) {
@@ -41,13 +39,7 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
  }, [config]);

  const retrieveSettings = () => {
-    messageHandler.request<Config[]>(DashboardMessage.getSettings, [
-      SETTING_PREVIEW_HOST,
-      SETTING_WEBSITE_URL,
-      SETTING_FRAMEWORK_START,
-      SETTING_GIT_ENABLED,
-      SETTING_GIT_COMMIT_MSG,
-    ]).then((config) => {
+    messageHandler.request<Config[]>(DashboardMessage.getSettings, [SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL, SETTING_FRAMEWORK_START]).then((config) => {
      setConfig(config);
      setUpdated(false);
    });
@@ -73,42 +65,6 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
        <Startup settings={settings} />
      </div>

-      <div className='py-4'>
-        <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsGit)}</h2>
-
-        <div className='space-y-2'>
-          <SettingsCheckbox
-            label={l10n.t(LocalizationKey.settingsGitEnabled)}
-            name={SETTING_GIT_ENABLED}
-            value={(config.find((c) => c.name === SETTING_GIT_ENABLED)?.value || false) as boolean}
-            onChange={onSettingChange}
-          />
-
-          <SettingsInput
-            label={l10n.t(LocalizationKey.settingsGitCommitMessage)}
-            name={SETTING_GIT_COMMIT_MSG}
-            value={(config.find((c) => c.name === SETTING_GIT_COMMIT_MSG)?.value || "") as string}
-            placeholder={GIT_CONFIG.defaultCommitMessage}
-            onChange={onSettingChange}
-          />
-
-          <p className={`text-[var(--frontmatter-secondary-text)] flex items-center`}>
-            <ChevronRightIcon className='h-4 w-4 inline' />
-
-            <span>
-              {l10n.t(LocalizationKey.settingsGitSubmoduleInfo)}&nbsp;
-            </span>
-
-            <a
-              href={DOCS_SUBMODULES}
-              title={l10n.t(LocalizationKey.settingsGitSubmoduleLink)}
-              className='text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]'>
-              {l10n.t(LocalizationKey.settingsGitSubmoduleLink)}
-            </a>
-          </p>
-        </div>
-      </div>
-
      <div className='py-4'>
        <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsCommonSettingsWebsiteTitle)}</h2>

@@ -116,21 +72,21 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
          <SettingsInput
            label={l10n.t(LocalizationKey.settingsCommonSettingsPreviewUrl)}
            name={SETTING_PREVIEW_HOST}
-            value={(config.find((c) => c.name === SETTING_PREVIEW_HOST)?.value || "") as string}
+            value={config.find((c) => c.name === SETTING_PREVIEW_HOST)?.value || ""}
            onChange={onSettingChange}
          />

          <SettingsInput
            label={l10n.t(LocalizationKey.settingsCommonSettingsWebsiteUrl)}
            name={SETTING_WEBSITE_URL}
-            value={(config.find((c) => c.name === SETTING_WEBSITE_URL)?.value || "") as string}
+            value={config.find((c) => c.name === SETTING_WEBSITE_URL)?.value || ""}
            onChange={onSettingChange}
          />

          <SettingsInput
            label={l10n.t(LocalizationKey.settingsCommonSettingsStartCommand)}
            name={SETTING_FRAMEWORK_START}
-            value={(config.find((c) => c.name === SETTING_FRAMEWORK_START)?.value || "") as string}
+            value={config.find((c) => c.name === SETTING_FRAMEWORK_START)?.value || ""}
            onChange={onSettingChange}
            fallback={FrameworkDetectors.find((f) => f.framework.name === settings?.crntFramework)?.commands.start || ""}
          />
--- a/src/dashboardWebView/components/SettingsView/SettingsCheckbox.tsx
+++ b/src/dashboardWebView/components/SettingsView/SettingsCheckbox.tsx
@@ -1,35 +0,0 @@
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
-import * as React from 'react';
-
-export interface ISettingsCheckboxProps {
-  label: string;
-  name: string;
-  value: boolean;
-  onChange: (key: string, value: boolean) => void;
-}
-
-export const SettingsCheckbox: React.FunctionComponent<ISettingsCheckboxProps> = ({
-  label,
-  name,
-  value,
-  onChange
-}: React.PropsWithChildren<ISettingsCheckboxProps>) => {
-  const [isEnabled, setIsEnabled] = React.useState(false);
-
-  const updateValue = (value: boolean) => {
-    setIsEnabled(value);
-    onChange(name, value);
-  }
-
-  React.useEffect(() => {
-    setIsEnabled(value);
-  }, [value]);
-
-  return (
-    <VSCodeCheckbox
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateValue(e.target.checked)}
-      checked={isEnabled}>
-      {label}
-    </VSCodeCheckbox>
-  );
-};
--- a/src/dashboardWebView/components/SettingsView/SettingsInput.tsx
+++ b/src/dashboardWebView/components/SettingsView/SettingsInput.tsx
@@ -5,7 +5,6 @@ export interface ISettingsInputProps {
  label: string;
  name: string;
  value: string;
-  placeholder?: string;
  onChange: (key: string, value: string) => void;
  fallback?: string;
 }
@@ -14,7 +13,6 @@ export const SettingsInput: React.FunctionComponent<ISettingsInputProps> = ({
  label,
  name,
  value,
-  placeholder,
  onChange,
  fallback
 }: React.PropsWithChildren<ISettingsInputProps>) => {
@@ -26,7 +24,6 @@ export const SettingsInput: React.FunctionComponent<ISettingsInputProps> = ({
        boxShadow: 'none'
      }}
      value={value || fallback || ""}
-      placeholder={placeholder}
      onInput={(e: React.ChangeEvent<HTMLInputElement>) => onChange(name, e.target.value)}>
      {label}
    </VSCodeTextField>
--- a/src/dashboardWebView/components/SettingsView/SettingsLink.tsx
+++ b/src/dashboardWebView/components/SettingsView/SettingsLink.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
-import { CogIcon } from '@heroicons/react/24/solid';
+import { CogIcon } from '@heroicons/react/solid';
 import { NavigationType } from '../../models';

 export interface ISettingsLinkProps {
--- a/Show More
+++ b/Show More