feat(core): rename "theme-dark" class for dark mode to "dark"

framework7io · Oct 5, 2021 · 8144a59 · 8144a59
1 parent 0dd8967
commit 8144a59
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 51 deletions.
diff --git a/src/core/components/app/app.less b/src/core/components/app/app.less
@@ -34,11 +34,11 @@ body {
   line-height: var(--f7-line-height);
   color: var(--f7-text-color);
 }
-.theme-dark body,
-body.theme-dark {
+.dark body,
+body.dark {
   background: #000;
 }
-.theme-dark {
+.dark {
   color: var(--f7-text-color);
 }
 .framework7-root {

diff --git a/src/core/components/input/input.less b/src/core/components/input/input.less
@@ -428,7 +428,7 @@ textarea {
 }
 
 .if-dark-theme({
-  .theme-dark option {
+  .dark option {
     background-color: var(--f7-page-bg-color);
   }
 });

diff --git a/src/core/components/login-screen/login-screen.less b/src/core/components/login-screen/login-screen.less
@@ -84,7 +84,7 @@
   }
 }
 
-.theme-dark {
+.dark {
   .login-screen-content .list ul,
   .login-screen-content .block-strong,
   .login-screen-page .list ul,

diff --git a/src/core/components/notification/notification-aurora.less b/src/core/components/notification/notification-aurora.less
@@ -50,7 +50,7 @@
     }
   }
   .if-dark-theme({
-    .theme-dark, &.theme-dark {
+    .dark, &.dark {
       .notification-close-button:after {
         color: #fff;
       }

diff --git a/src/core/components/notification/notification-ios.less b/src/core/components/notification/notification-ios.less
@@ -46,7 +46,7 @@
     }
   }
   .if-dark-theme({
-    .theme-dark, &.theme-dark {
+    .dark, &.dark {
       .notification-close-button:after {
         color: #fff;
       }

diff --git a/src/core/components/page/page-vars.less b/src/core/components/page/page-vars.less
@@ -58,6 +58,6 @@
     --f7-page-bg-color: #121212;
   });
 });
-.theme-dark {
+.dark {
   --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
 }
diff --git a/src/core/components/popup/popup.less b/src/core/components/popup/popup.less
@@ -18,8 +18,8 @@
   z-index: 11000;
   overflow: hidden;
   border-radius: var(--f7-popup-border-radius);
-  .theme-dark &,
-  &.theme-dark {
+  .dark &,
+  &.dark {
     background: #000;
   }
   &.modal-in,
@@ -105,14 +105,14 @@ html.with-modal-popup-push-closing {
   }
 
   .if-dark-theme({
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         content: '';
         position: absolute;
@@ -155,9 +155,9 @@ html.with-modal-popup-push {
     opacity: 0;
   }
   .if-dark-theme({
-    &.theme-dark .popup:after,
-    .theme-dark .popup:after,
-    .theme-dark.popup:after {
+    &.dark .popup:after,
+    .dark .popup:after,
+    .dark.popup:after {
       background: rgba(255,255,255,0.05);
     }
   });
@@ -187,14 +187,14 @@ html.with-modal-popup-push {
 
 .if-dark-theme({
   html.with-modal-popup-push-closing {
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
       }

diff --git a/src/core/components/searchbar/searchbar.less b/src/core/components/searchbar/searchbar.less
@@ -3,7 +3,7 @@
 
 .searchbar {
   --f7-link-highlight-color: var(--f7-link-highlight-black);
-  .theme-dark & {
+  .dark & {
     --f7-link-highlight-color: var(--f7-link-highlight-white);
   }
   width: 100%;

diff --git a/src/core/components/sheet/sheet.less b/src/core/components/sheet/sheet.less
@@ -112,14 +112,14 @@ html.with-modal-sheet-push-closing {
     }
   }
   .if-dark-theme({
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         content: '';
         position: absolute;
@@ -149,14 +149,14 @@ html.with-modal-sheet-push {
 
 .if-dark-theme({
   html.with-modal-sheet-push-closing {
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         animation: sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;
       }

diff --git a/src/core/components/skeleton/skeleton-vars.less b/src/core/components/skeleton/skeleton-vars.less
@@ -2,7 +2,7 @@
   --skeleton-color: #ccc;
   --skeleton-icon-color: rgba(0, 0, 0, 0.25);
 }
-.theme-dark {
+.dark {
   --skeleton-color: #515151;
   --skeleton-icon-color: rgba(255, 255, 255, 0.25);
 }
diff --git a/src/core/components/text-editor/text-editor-class.js b/src/core/components/text-editor/text-editor-class.js
@@ -479,7 +479,7 @@ class TextEditor extends Framework7Class {
     const self = this;
     self.popover = self.app.popover.create({
       content: `
-        <div class="popover theme-dark text-editor-popover">
+        <div class="popover dark text-editor-popover">
           <div class="popover-inner">${self.renderButtons()}</div>
         </div>
       `,

diff --git a/src/core/components/touch-ripple/touch-ripple-vars.less b/src/core/components/touch-ripple/touch-ripple-vars.less
@@ -3,6 +3,6 @@
   --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
 }
-.theme-dark {
+.dark {
   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
 }
diff --git a/src/core/less/mixins.less b/src/core/less/mixins.less
@@ -53,8 +53,8 @@
 }
 .dark-vars(@ruleset) {
   & when (@includeDarkTheme) {
-    .theme-dark,
-    &.theme-dark {
+    .dark,
+    &.dark {
       @ruleset();
     }
   }