simplify color overwrite

assets/sass/colors.scss

@@ -1,17 +1,14 @@
-@import "hugo:vars";
-
 $beetbox-red: #9e0008;
 $beetbox-pink: #d93370;
 $beetbox-purple: #ac65cb;
 $beetbox-green: #003f56;
 $beetbox-blue: #5fcfd0;
 
-// Default colors are defined within layouts/_default/baseof.html.
+$background-color: #1f2835;
-// To pick your own colors, place variables in your site config under params.styles
+$font-color: #f8f8ff;
-$background-color: $background-color;
+$font-color-alternate: #1f2835;
-$font-color: $font-color;
+$top-bar: #f8f8ffcc;
-$top-bar: $top-bar;
+$dark: #111;
-$dark: $dark;
+$link-color: $beetbox-blue;
-$link-color: $link-color;
+$link-color-visited: #e4cdef;
-$link-color-visited: $link-color-visited;
+$code-edge: $beetbox-purple;
-$code-edge: $code-edge;

assets/sass/main.scss

@@ -2,7 +2,6 @@
 @import 'cards.scss';
 @import 'code.scss';
 @import 'fonts.scss';
-@import 'hugo:vars';
 
 @mixin screen-max($max) {
 	@media (max-width: $max - 1) {

layouts/_default/baseof.html

@@ -19,20 +19,7 @@
             <meta name="description" content="{{ delimit . "," }}">
         {{- end }}
 
-        {{ $defaultColors := dict
+    	{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS -}}
-            "background_color" "#1f2835"
-            "font_color" "#f8f8ff"
-            "font_color_alternate" "#1f2835"
-            "top_bar" "#f8f8ffcc"
-            "dark" "#111"
-            "link_color" "#5fcfd0"
-            "link_color_visited" "#e4cdef"
-            "code_edge" "#ac65cb"
-        }}
-
-        {{ $opts := dict "vars" (default $defaultColors site.Params.styles) }}
-
-    	{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS $opts -}}
     	<link rel="stylesheet" href="{{ $style.Permalink }}">
 
     	<title>