Allowed the title to be dimmed

main.ts

@@ -3,12 +3,14 @@ import { App, Plugin, addIcon, PluginSettingTab, Setting } from 'obsidian';
 interface StillePluginSettings {
 	unfocusedLevel: number;
 	statusBarLabel: boolean;
+	unfocusTitle: boolean;
 }
 
 // Default settings values
 const DEFAULT_SETTINGS: StillePluginSettings = {
 	unfocusedLevel: 0.3,
-	statusBarLabel: true
+	statusBarLabel: true,
+	unfocusTitle: false
 }
 
 // Icon for the side dock ribbon toggle for Stille
@@ -35,6 +37,8 @@ export default class StillePlugin extends Plugin {
 		this.statusBar = this.addStatusBarItem();
 		this.statusBar.setText('Stille on');
 		this.toggleLabelDisplay(this.settings.statusBarLabel);
+
+		this.toggleDimTitle(this.settings.unfocusTitle);
 
 		// Add Stille toggle shortcut
 		this.addCommand({
@@ -93,8 +97,9 @@ export default class StillePlugin extends Plugin {
 	removeStyleFromView() {
 		if (this.styleElement) {
 			this.styleElement.remove();
-			this.styleElement = null;
 			document.body.removeClass('StilleStyle');
+			document.body.removeClass('StilleHideStatus');
+			document.body.removeClass('StilleUnfocusTitle');
 		}
 	}
 
@@ -111,12 +116,26 @@ export default class StillePlugin extends Plugin {
 			document.body.classList.add('StilleHideStatus');
 		}
 	}
+
+	toggleDimTitle(value:boolean) {
+		if (value) {
+			document.body.classList.add('StilleUnfocusTitle');
+		} else {
+			document.body.classList.remove('StilleUnfocusTitle');
+		}
+	}
 
 	async toggleLabel(value:boolean) {
 		this.toggleLabelDisplay(value);
 		this.settings.statusBarLabel = value;
 		await this.saveSettings();
 	}
+
+	async toggleTitle(value:boolean) {
+		this.toggleDimTitle(value);
+		this.settings.unfocusTitle = value;
+		await this.saveSettings();
+	}
 
 	refresh() {
 		this.removeStyleFromView();
@@ -168,5 +187,17 @@ class StilleSettingTab extends PluginSettingTab {
 					await this.plugin.toggleLabel(!this.plugin.settings.statusBarLabel);
 				})
 			)
+
+		// Adds settings option to toggle title to be dimmed
+		// This provides a toggle which controls the settings value for the statusBarLabel
+		new Setting(containerEl)
+			.setName('Dim title')
+			.setDesc('Dim the title of the note when Stille is on.')
+			.addToggle(title => title
+				.setValue(this.plugin.settings.unfocusTitle)
+				.onChange(async () => {
+					await this.plugin.toggleTitle(!this.plugin.settings.unfocusTitle);
+				})
+			)
 	}
 }

manifest.json

@@ -1,10 +1,10 @@
-{
-	"id": "obsidian-stille",
-	"name": "Stille",
-	"version": "1.1.0",
-	"minAppVersion": "0.13.0",
-	"description": "Focus on your writing, a section at a time.",
-	"author": "Michael Lee",
-	"authorUrl": "https://michaelsoolee.com",
-	"isDesktopOnly": false
-}
+{
+	"id": "obsidian-stille",
+	"name": "Stille",
+	"version": "1.2.0",
+	"minAppVersion": "0.13.0",
+	"description": "Focus on your writing, a section at a time.",
+	"author": "Michael Lee",
+	"authorUrl": "https://michaelsoolee.com",
+	"isDesktopOnly": false
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-stille",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "An Obsidian plugin that helps you focus on your writing, a section at a time.",
   "main": "main.js",
   "scripts": {

styles.css

@@ -19,3 +19,11 @@ body.StilleStyle.is-mobile .cm-editor .cm-active {
 body.StilleHideStatus .status-bar-item.plugin-obsidian-stille {
 	display: none;
 }
+
+body.StilleUnfocusTitle .view-header-title {
+	opacity: var(--unfocusedLevel);
+}
+
+body.StilleUnfocusTitle .view-header-title:focus-within {
+	opacity: 1.0;
+}

versions.json

@@ -1,7 +1,8 @@
-{
-	"1.1.0": "0.13.0",
-	"1.0.3": "0.9.12",
-	"1.0.2": "0.9.12",
-	"1.0.1": "0.9.12",
-	"1.0.0": "0.9.12"
-}
+{
+	"1.0.0": "0.9.12",
+	"1.0.1": "0.9.12",
+	"1.0.2": "0.9.12",
+	"1.0.3": "0.9.12",
+	"1.1.0": "0.13.0",
+	"1.2.0": "0.13.0"
+}