Browse Source

Add text to lightbult

ghorsington 1 year ago
parent
commit
b93d13f125
3 changed files with 10 additions and 1 deletions
  1. 6 0
      public/css/style.css
  2. 3 0
      public/js/appearance.js
  3. 1 1
      views/partials/base.handlebars

+ 6 - 0
public/css/style.css

@@ -150,4 +150,10 @@ span#appearance-switch {
 
 span#appearance-switch > i {
 	font-size: 2em !important;
+}
+
+span#appearance-text {
+	text-transform: capitalize;
+	vertical-align: middle;
+	padding-right: 0.5em;
 }

+ 3 - 0
public/js/appearance.js

@@ -3,9 +3,11 @@ axios.defaults.withCredentials = true;
 let appearance = {};
 
 appearance.sheetElement = null;
+appearance.textElement = null;
 
 appearance.prepare = () => {
     appearance.sheetElement = document.getElementById('appearance-sheet');
+    appearance.textElement = document.getElementById('appearance-text');
     let lightbulb = document.getElementById('appearance-switch');
     lightbulb.addEventListener('click', appearance.toggleLightMode);
 };
@@ -17,6 +19,7 @@ appearance.toggleLightMode = (e) => {
         let newStyle = res.data.currentStyle;
         appearance.sheetElement.setAttribute("href", `/css/style_${newStyle}.css`);
         appearance.currentStyle = newStyle;
+        appearance.textElement.textContent = newStyle;
     });
 };
 

+ 1 - 1
views/partials/base.handlebars

@@ -45,7 +45,7 @@
 	</head>
 
 	<body>
-		<span id="appearance-switch" data-appearance="{{appearance}}"><i class="fa fa-lightbulb-o" aria-hidden="true"></i></span>
+		<span id="appearance-switch" data-appearance="{{appearance}}"><span id="appearance-text">{{appearance}}</span><i class="fa fa-lightbulb-o" aria-hidden="true"></i></span>
         {{#> body-block}}
         {{/body-block}}
 	</body>