Fix #19

README.md

@@ -77,7 +77,7 @@ settings:
 
 ## `class-toggle`
 
-`class-toggle`s will toggle a css class on and off of the `body` element, allowing CSS themes and snippets to toggle features on and off. The `id` of the setting will be used as the class name.
+`class-toggle`s will toggle a css class on and off of the `body` element, allowing CSS themes and snippets to toggle features on and off. The `id` of the setting will be used as the class name. The `default` parameter can optionally be set to `true`.
 
 ```css
 /* @settings

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-style-settings",
   "name": "Style Settings",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "minAppVersion": "0.11.5",
   "description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.",
   "author": "mgmeyers",

src/SettingsManager.ts

@@ -11,6 +11,7 @@ import {
   ColorFormat,
   AltFormatList,
   ClassMultiToggle,
+  ClassToggle,
 } from "./settingHandlers";
 import chroma from "chroma-js";
 import {
@@ -267,7 +268,9 @@ export class CSSSettingsManager {
         const setting = config[settingId];
 
         if (setting.type === "class-toggle") {
-          if (this.getSetting(section, settingId)) {
+          const classToggle = setting as ClassToggle;
+          let value = this.getSetting(section, settingId) as boolean | undefined;
+          if (value === true || (value === undefined && classToggle.default === true)) {
             document.body.classList.add(setting.id);
           }
         } else if (setting.type === "class-select") {

src/main.ts

@@ -184,7 +184,7 @@ class CSSSettingsTab extends PluginSettingTab {
         setting.controlEl.createEl(
           "a",
           {
-            cls: "icon-swapper-import",
+            cls: "style-settings-import",
             text: "Import",
             href: "#",
           },
@@ -200,7 +200,7 @@ class CSSSettingsTab extends PluginSettingTab {
         setting.controlEl.createEl(
           "a",
           {
-            cls: "icon-swapper-export",
+            cls: "style-settings-export",
             text: "Export",
             href: "#",
           },

src/settingHandlers.ts

@@ -6,6 +6,7 @@ import {
   debounce,
   ButtonComponent,
   setIcon,
+  ToggleComponent,
 } from "obsidian";
 import { CSSSettingsManager } from "./SettingsManager";
 import Pickr from "@simonwep/pickr";
@@ -122,7 +123,9 @@ export function createHeading(opts: {
     });
 }
 
-export interface ClassToggle extends Meta {}
+export interface ClassToggle extends Meta {
+  default?: boolean;
+}
 
 export function createClassToggle(opts: {
   sectionId: string;
@@ -131,22 +134,44 @@ export function createClassToggle(opts: {
   settingsManager: CSSSettingsManager;
 }): CleanupFunction {
   const { sectionId, config, containerEl, settingsManager } = opts;
+  let toggleComponent: ToggleComponent;
 
   new Setting(containerEl)
     .setName(config.title)
     .setDesc(config.description || "")
     .addToggle((toggle) => {
       const value = settingsManager.getSetting(sectionId, config.id);
 
-      toggle.setValue((value as boolean) || false).onChange((value) => {
-        settingsManager.setSetting(sectionId, config.id, value);
+      toggle
+        .setValue((value as boolean) || !!config.default)
+        .onChange((value) => {
+          settingsManager.setSetting(sectionId, config.id, value);
+
+          if (value) {
+            document.body.classList.add(config.id);
+          } else {
+            document.body.classList.remove(config.id);
+          }
+        });
+
+        toggleComponent = toggle;
+    })
+    .addExtraButton((b) => {
+      b.setIcon("reset");
+      b.onClick(() => {
+        const value = !!config.default;
+
+        toggleComponent.setValue(value);
 
         if (value) {
           document.body.classList.add(config.id);
         } else {
           document.body.classList.remove(config.id);
         }
+
+        settingsManager.clearSetting(sectionId, config.id);
       });
+      b.setTooltip(resetTooltip);
     })
     .then((setting) => {
       setting.settingEl.dataset.id = opts.config.id;
@@ -463,7 +488,9 @@ export function createVariableSelect(opts: {
 
   new Setting(containerEl)
     .setName(config.title)
-    .setDesc(createDescription(config.description, config.default, defaultLabel))
+    .setDesc(
+      createDescription(config.description, config.default, defaultLabel)
+    )
     .addDropdown((dropdown) => {
       const value = settingsManager.getSetting(sectionId, config.id);