2 files changed, 66 insertions, 18 deletions

diff --git a/assets/scss/theme/mode.sass b/assets/scss/theme/mode.sass
new file mode 100644
index 0000000..be3379f
--- /dev/null
+++ b/assets/scss/theme/mode.sass
@@ -0,0 +1,48 @@
+--#{$prefix}body-color: #{$body-color-dark};
+--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+--#{$prefix}body-bg: #{$body-bg-dark};
+--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+--#{$prefix}secondary-color: #{$body-secondary-color-dark};
+--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+@each $color, $value in $theme-colors-text-dark {
+  --#{$prefix}#{$color}-text-emphasis: #{$value};
+}
+
+@each $color, $value in $theme-colors-bg-subtle-dark {
+  --#{$prefix}#{$color}-bg-subtle: #{$value};
+}
+
+@each $color, $value in $theme-colors-border-subtle-dark {
+  --#{$prefix}#{$color}-border-subtle: #{$value};
+}
+
+--#{$prefix}heading-color: #{$headings-color-dark};
+
+--#{$prefix}link-color: #{$link-color-dark};
+--#{$prefix}link-hover-color: #{$link-hover-color-dark};
+--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+--#{$prefix}code-color: #{$code-color-dark};
+--#{$prefix}highlight-color: #{$mark-color-dark};
+--#{$prefix}highlight-bg: #{$mark-bg-dark};
+
+--#{$prefix}border-color: #{$border-color-dark};
+--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+
+// --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+// --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+// --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+// --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
\ No newline at end of file
diff --git a/assets/scss/theme/theme.scss b/assets/scss/theme/theme.scss
index e82a361..0773167 100644
--- a/assets/scss/theme/theme.scss
+++ b/assets/scss/theme/theme.scss
@@ -3,16 +3,16 @@
     background: linear-gradient(135deg, $white 0%, tint-color($primary, 80%) 100%);
 }
 
-// .card-feature {
-//     background-color: var(--#{$prefix}light) if($enable-important-utilities, !important, null);
-// }
+.card-feature {
+    background-color: var(--#{$prefix}light) if($enable-important-utilities, !important, null);
+}
 
-// .card-feature div i {
-//     background: linear-gradient(135deg, tint-color($primary, 80%) 0%, $primary 100%);
-// 	-webkit-background-clip: text;
-// 	background-clip: text;
-// 	-webkit-text-fill-color: transparent;
-// }
+.card-feature div i {
+    background: linear-gradient(135deg, tint-color($primary, 80%) 0%, $primary 100%);
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
 
 // scss-docs-start styling
 .card-shrink {
@@ -51,16 +51,16 @@
             background: linear-gradient(330deg, rgba(184,78,92,1) 0%, rgba(17,0,84,1) 80%);
         }
 
-        // .card-feature {
-        //     background-color: var(--#{$prefix}tertiary-bg) if($enable-important-utilities, !important, null);
-        // }
+        .card-feature {
+            background-color: var(--#{$prefix}tertiary-bg) if($enable-important-utilities, !important, null);
+        }
 
-        // .card-feature div i {
-        //     background: linear-gradient(135deg, $primary 0%, shade-color($primary, 60%) 100%);
-        //     -webkit-background-clip: text;
-        //     background-clip: text;
-        //     -webkit-text-fill-color: transparent;
-        // }
+        .card-feature div i {
+            background: linear-gradient(135deg, $primary 0%, shade-color($primary, 60%) 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
         
         .footer {
             background-color: var(--#{$prefix}tertiary-bg) if($enable-important-utilities, !important, null);