diff --git a/package-lock.json b/package-lock.json
index fdfd9daf68..83d2b693a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "core-js": "^3.30.2",
         "electron-builder": "^23.6.0",
         "github-markdown-css": "^5.2.0",
+        "highlight.js": "^11.8.0",
         "markdown-it-highlightjs": "^4.0.1",
         "material-design-icons": "^3.0.1",
         "update-electron-app": "^2.0.1",
@@ -6907,6 +6908,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/cli-highlight/node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/cli-highlight/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -11192,12 +11202,11 @@
       }
     },
     "node_modules/highlight.js": {
-      "version": "10.7.3",
-      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "dev": true,
+      "version": "11.8.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
+      "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
       "engines": {
-        "node": "*"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/hmac-drbg": {
@@ -13152,14 +13161,6 @@
         "highlight.js": "^11.5.1"
       }
     },
-    "node_modules/markdown-it-highlightjs/node_modules/highlight.js": {
-      "version": "11.8.0",
-      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.8.0.tgz",
-      "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/markdown-it-ins": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/markdown-it-ins/-/markdown-it-ins-3.0.1.tgz",
@@ -20163,14 +20164,6 @@
         "markdown-it-toc-done-right": "^4.2.0"
       }
     },
-    "node_modules/vue3-markdown-it/node_modules/highlight.js": {
-      "version": "11.8.0",
-      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.8.0.tgz",
-      "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/vue3-markdown-it/node_modules/markdown-it-highlightjs": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/markdown-it-highlightjs/-/markdown-it-highlightjs-3.6.0.tgz",
diff --git a/package.json b/package.json
index 7c1395d67f..057960298c 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "core-js": "^3.30.2",
     "electron-builder": "^23.6.0",
     "github-markdown-css": "^5.2.0",
+    "highlight.js": "^11.8.0",
     "markdown-it-highlightjs": "^4.0.1",
     "material-design-icons": "^3.0.1",
     "update-electron-app": "^2.0.1",
diff --git a/src/App.vue b/src/App.vue
index b6e58b5e54..1d27b98766 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,22 +2,36 @@
   <div id="app">
     <header>
       <div class="header-content">
-        <img class="logo" src="@/assets/logo-banner.png" alt="ChatALL" />
+        <img
+          :class="{ 'dark-png': store.state.theme === Theme.DARK }"
+          class="logo"
+          src="@/assets/logo-banner.png"
+          alt="ChatALL"
+        />
         <div class="column-icons">
           <img
             src="@/assets/column-1.svg"
             @click="changeColumns(1)"
-            :class="{ selected: columns === 1 }"
+            :class="{
+              selected: columns === 1,
+              'dark-png': store.state.theme === Theme.DARK,
+            }"
           />
           <img
             src="@/assets/column-2.svg"
             @click="changeColumns(2)"
-            :class="{ selected: columns === 2 }"
+            :class="{
+              selected: columns === 2,
+              'dark-png': store.state.theme === Theme.DARK,
+            }"
           />
           <img
             src="@/assets/column-3.svg"
             @click="changeColumns(3)"
-            :class="{ selected: columns === 3 }"
+            :class="{
+              selected: columns === 3,
+              'dark-png': store.state.theme === Theme.DARK,
+            }"
           />
         </div>
         <div>
@@ -54,8 +68,10 @@
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
+import { useTheme } from "vuetify";
 import { useStore } from "vuex";
 import { v4 as uuidv4 } from "uuid";
+import { applyTheme, resolveTheme, Theme } from "./theme";
 
 import i18n from "./i18n";
 
@@ -69,7 +85,17 @@ import UpdateNotification from "@/components/Notification/UpdateNotificationModa
 // Styles
 import "@mdi/font/css/materialdesignicons.css";
 
+const { ipcRenderer } = window.require("electron");
+
 const store = useStore();
+const vuetifyTheme = useTheme();
+const onUpdatedSystemTheme = async () => {
+  const resolvedTheme = await resolveTheme(store.state.mode, ipcRenderer);
+  store.commit("setTheme", resolvedTheme);
+  applyTheme(resolvedTheme, vuetifyTheme);
+};
+
+ipcRenderer.on("on-updated-system-theme", onUpdatedSystemTheme);
 
 const confirmModal = ref(null);
 const isSettingsOpen = ref(false);
@@ -124,7 +150,7 @@ header {
     top: 0;
     left: 0;
     width: 100%;
-    background-color: white;
+    background-color: rgb(var(--v-theme-header));
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     padding: 16px;
     z-index: 999;
@@ -154,11 +180,15 @@ img.selected {
 
 .content {
     flex: 1;
-    background-color: #f3f3f3;
+    background-color: rgb(var(--v-theme-background));
     padding: 16px;
 }
 
 .cursor-pointer {
     cursor: pointer;
 }
+
+.dark-png {
+  filter: grayscale(1) brightness(5);
+}
 </style>
diff --git a/src/background.js b/src/background.js
index ba915a41b2..af4e9b237c 100644
--- a/src/background.js
+++ b/src/background.js
@@ -1,9 +1,9 @@
 "use strict";
 
-import { app, protocol, BrowserWindow, ipcMain } from "electron";
+import { app, protocol, BrowserWindow, ipcMain, nativeTheme } from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS3_DEVTOOLS } from "electron-devtools-installer";
-import updateApp from './update';
+import updateApp from "./update";
 const isDevelopment = process.env.NODE_ENV !== "production";
 
 const DEFAULT_USER_AGENT = ""; // Empty string to use the Electron default
@@ -14,12 +14,13 @@ protocol.registerSchemesAsPrivileged([
   { scheme: "app", privileges: { secure: true, standard: true } },
 ]);
 
-
 async function createWindow() {
   // Create the browser window.
   const win = new BrowserWindow({
     width: 800,
     height: 600,
+    backgroundColor: nativeTheme.shouldUseDarkColors ? "#1a1a20" : "#fff",
+    show: false,
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
@@ -107,11 +108,13 @@ async function createWindow() {
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
     await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
+    win.show();
     if (!process.env.IS_TEST) win.webContents.openDevTools();
   } else {
     createProtocol("app");
     // Load the index.html when not in development
-    win.loadURL("app://./index.html");
+    await win.loadURL("app://./index.html");
+    win.show();
   }
 }
 
@@ -167,6 +170,16 @@ ipcMain.handle("create-new-window", (event, url, userAgent) => {
   createNewWindow(url, userAgent);
 });
 
+ipcMain.handle("get-native-theme", () => {
+  return Promise.resolve({
+    shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+  });
+});
+
+nativeTheme.on("updated", () => {
+  mainWindow.webContents.send("on-updated-system-theme");
+});
+
 // Quit when all windows are closed.
 app.on("window-all-closed", () => {
   // On macOS it is common for applications and their menu bar
diff --git a/src/components/Footer/FooterBar.vue b/src/components/Footer/FooterBar.vue
index 189e5e4f25..01a37a81ef 100644
--- a/src/components/Footer/FooterBar.vue
+++ b/src/components/Footer/FooterBar.vue
@@ -198,7 +198,6 @@ onBeforeMount(async () => {
   bottom: 0;
   left: 0;
   width: 100%;
-  background-color: rgba(243, 243, 243, 0.7);
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
diff --git a/src/components/Messages/ChatMessage.vue b/src/components/Messages/ChatMessage.vue
index d0ad416b21..31a6944fd6 100644
--- a/src/components/Messages/ChatMessage.vue
+++ b/src/components/Messages/ChatMessage.vue
@@ -49,9 +49,6 @@ import { useMatomo } from "@/composables/matomo";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 import bots from "@/bots";
 
-import "highlight.js/styles/github.css";
-import "github-markdown-css/github-markdown-light.css";
-
 const props = defineProps({
   message: {
     type: Object,
@@ -140,6 +137,10 @@ function handleClick(event) {
 </script>
 
 <style scoped>
+.markdown-body{
+  background-color: rgb(var(--v-theme-response));
+}
+
 .message {
     border-radius: 8px;
     padding: 16px;
@@ -152,7 +153,7 @@ function handleClick(event) {
 }
 
 .prompt {
-    background-color: #95EC69;
+    background-color: rgb(var(--v-theme-prompt));
     width: fit-content;
     grid-column: 1 / span var(--columns);
 }
@@ -163,7 +164,7 @@ function handleClick(event) {
 }
 
 .response {
-    background-color: #FFF;
+    background-color: rgb(var(--v-theme-response));
     width: 100%;
     grid-column: auto / span 1;
 }
@@ -181,9 +182,4 @@ function handleClick(event) {
     height: 20px;
     margin-right: 4px;
 }
-
-.markdown-body {
-    background-color: inherit;
-    font-family: inherit;
-}
 </style>
diff --git a/src/components/Notification/UpdateNotificationModal.vue b/src/components/Notification/UpdateNotificationModal.vue
index 2fb709be34..8f4819ac41 100644
--- a/src/components/Notification/UpdateNotificationModal.vue
+++ b/src/components/Notification/UpdateNotificationModal.vue
@@ -1,24 +1,29 @@
 <template>
   <div id="snackbar" class="text-center">
-    <v-snackbar color="#fff" :vertical="true" :timeout="-1" multi-line v-model="snackbar">
-      <span class="text-black text-center font-weight-bold">
-        {{ $t('updates.updateAvailable') }}
+    <v-snackbar :vertical="true" :timeout="-1" multi-line v-model="snackbar">
+      <span class="text-center font-weight-bold">
+        {{ $t("updates.updateAvailable") }}
       </span>
-      <span class="text-black text-center">
-        {{ $t('updates.currentVersion') }}: {{ versions.current }}
+      <span class="text-center">
+        {{ $t("updates.currentVersion") }}: {{ versions.current }}
       </span>
-      <span class="text-black text-center">
-        {{ $t('updates.latestVersion') }}: {{ versions.latest }}
+      <span class="text-center">
+        {{ $t("updates.latestVersion") }}: {{ versions.latest }}
       </span>
-      <v-btn prepend-icon="mdi-github" color="primary" variant="tonal" @click="openReleasePage">
-        {{ $t('updates.downloadFromGitHub') }}
+      <v-btn
+        prepend-icon="mdi-github"
+        color="primary"
+        variant="tonal"
+        @click="openReleasePage"
+      >
+        {{ $t("updates.downloadFromGitHub") }}
       </v-btn>
       <template v-slot:actions>
         <v-btn color="primary" @click="skip">
-          {{ $t('updates.skipThisVersion') }}
+          {{ $t("updates.skipThisVersion") }}
         </v-btn>
         <v-btn color="primary" @click="snackbar = false">
-          {{ $t('updates.close') }}
+          {{ $t("updates.close") }}
         </v-btn>
       </template>
     </v-snackbar>
@@ -26,21 +31,25 @@
 </template>
 <script setup>
 import { ref } from "vue";
-import { compare } from 'compare-versions';
+import { compare } from "compare-versions";
 const { shell, ipcRenderer } = window.require("electron");
 
 let versions = undefined;
 const snackbar = ref(false);
-ipcRenderer.on('version-saved', checkVersion);
+ipcRenderer.on("version-saved", checkVersion);
 
 function checkVersion() {
   versions = JSON.parse(localStorage.getItem("chatall-versions"));
-  if (versions?.latest && versions?.current && compare(versions.latest, versions.current, '>')) {
-    if (!versions?.skip || compare(versions.latest, versions.skip, '>')) {
+  if (
+    versions?.latest &&
+    versions?.current &&
+    compare(versions.latest, versions.current, ">")
+  ) {
+    if (!versions?.skip || compare(versions.latest, versions.skip, ">")) {
       snackbar.value = true;
     }
   }
-  ipcRenderer.removeListener('version-saved', checkVersion);
+  ipcRenderer.removeListener("version-saved", checkVersion);
 }
 
 function skip() {
@@ -75,4 +84,8 @@ function openReleasePage() {
   width: 100%;
   justify-content: center;
 }
+
+span {
+  color: rgb(var(--v-theme-font));
+}
 </style>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 9e645e75cf..bd797c4bba 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -28,7 +28,19 @@
             ></v-select>
           </v-list-item>
         </div>
-
+        <div class="section">
+          <v-list-item>
+            <v-list-item-title>{{ $t("settings.theme") }}</v-list-item-title>
+            <v-select
+              :items="modes"
+              item-title="name"
+              item-value="code"
+              hide-details
+              :model-value="currentMode"
+              @update:model-value="setCurrentMode($event)"
+            ></v-select>
+          </v-list-item>
+        </div>
         <template v-for="(setting, index) in settings" :key="index">
           <v-divider></v-divider>
           <div class="section">
@@ -44,6 +56,7 @@
 import { computed } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
+import { useTheme } from "vuetify";
 
 import ChatGPTBotSettings from "@/components/BotSettings/ChatGPTBotSettings.vue";
 import OpenAIAPIBotSettings from "@/components/BotSettings/OpenAIAPIBotSettings.vue";
@@ -59,8 +72,12 @@ import QianWenBotSettings from "@/components/BotSettings/QianWenBotSettings.vue"
 import PoeBotSettings from "@/components/BotSettings/PoeBotSettings.vue";
 import SkyWorkBotSettings from "@/components/BotSettings/SkyWorkBotSettings.vue";
 
+import { resolveTheme, applyTheme, Mode } from "../theme";
+
+const { ipcRenderer } = window.require("electron");
 const { t: $t, locale } = useI18n();
 const store = useStore();
+const vuetifyTheme = useTheme();
 
 const props = defineProps(["open"]);
 const emit = defineEmits(["update:open", "done"]);
@@ -95,12 +112,25 @@ const languages = computed(() => [
   { name: "简体中文", code: "zh" },
 ]);
 
+const modes = computed(() => [
+  { name: $t("settings.system"), code: Mode.SYSTEM },
+  { name: $t("settings.light"), code: Mode.LIGHT },
+  { name: $t("settings.dark"), code: Mode.DARK },
+]);
+
 const lang = computed(() => store.state.lang);
+const currentMode = computed(() => store.state.mode);
 
 const setCurrentLanguage = (lang) => {
   locale.value = lang;
   store.commit("setCurrentLanguage", lang);
 };
+const setCurrentMode = async (mode) => {
+  const resolvedTheme = await resolveTheme(mode, ipcRenderer);
+  store.commit("setMode", mode);
+  store.commit("setTheme", resolvedTheme);
+  applyTheme(resolvedTheme, vuetifyTheme);
+};
 const closeDialog = () => {
   emit("update:open", false);
   emit("done");
@@ -113,4 +143,8 @@ const closeDialog = () => {
   margin-bottom: 16px;
   padding: 0 16px;
 }
+
+:deep() .v-slider-thumb__label {
+  color: rgb(var(--v-theme-font));
+}
 </style>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index c0882c8720..135456e263 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -10,7 +10,11 @@
     "loginOrOut": "Login/Logout",
     "loginOrOutPrompt": "Click the link below to log in or log out in the new window, and then close it",
     "notice": "Notice",
-    "secretPrompt": "Your secret token will remain on your device and will not be shared with anyone else"
+    "secretPrompt": "Your secret token will remain on your device and will not be shared with anyone else",
+    "theme": "Theme",
+    "system": "System",
+    "light": "Light",
+    "dark": "Dark"
   },
   "header": {
     "clearMessages": "Clear all messages?",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index 969687c488..4d38cf729a 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -10,7 +10,11 @@
     "loginOrOut": "登入/登出",
     "loginOrOutPrompt": "点击下面链接，在新窗口内登录或登出。然后关闭此窗口",
     "notice": "注意",
-    "secretPrompt": "你的私密 token 只会保存在本地，任何其他人都无法访问"
+    "secretPrompt": "你的私密 token 只会保存在本地，任何其他人都无法访问",
+    "theme": "主题",
+    "system": "系统",
+    "light": "浅色",
+    "dark": "深色"
   },
   "header": {
     "clearMessages": "清空所有消息？",
diff --git a/src/main.js b/src/main.js
index 60e15e364e..4135a00f41 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import { createVueI18nAdapter } from "vuetify/locale/adapters/vue-i18n";
 import { useI18n } from "vue-i18n";
 import "material-design-icons/iconfont/material-icons.css";
 import VueMatomo from "vue-matomo";
+import { resolveTheme, applyTheme } from "./theme";
 
 // Vuetify
 import "vuetify/styles";
@@ -13,9 +14,15 @@ import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 
+const { ipcRenderer } = window.require("electron");
+
 // Init storage
 store.commit("init");
 
+const defaultTheme = await resolveTheme(store.state.mode, ipcRenderer);
+store.commit("setTheme", defaultTheme);
+applyTheme(defaultTheme);
+
 const vuetify = createVuetify({
   components,
   directives,
@@ -23,17 +30,31 @@ const vuetify = createVuetify({
     adapter: createVueI18nAdapter({ i18n, useI18n }),
   },
   theme: {
-    defaultTheme: "light",
+    defaultTheme: defaultTheme,
     themes: {
       light: {
         colors: {
           primary: "#062AAA",
+          surface: "#FFFFFF",
+          background: "#f3f3f3",
+          "surface-variant": "#fff",
+          header: "#fff",
+          prompt: "#95ec69",
+          response: "#fff",
+          "font": "#212121",
         },
       },
       dark: {
         dark: true,
         colors: {
-          primary: "#062AAA",
+          primary: "#ececf1",
+          surface: "#292a2d",
+          background: "#1a1a20",
+          "surface-variant": "#131419",
+          header: "#292a2d",
+          prompt: "#222329",
+          response: "#131419",
+          "font": "#fff",
         },
       },
     },
diff --git a/src/store/index.js b/src/store/index.js
index 1179c51741..e45413c0be 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -74,6 +74,8 @@ export default createStore({
     ],
     currentChatIndex: 0,
     updateCounter: 0,
+    theme: undefined,
+    mode: "system",
     // TODO: delete following fields
     selectedBots: {},
     messages: [],
@@ -182,6 +184,12 @@ export default createStore({
         state.selectedBots = null;
       }
     },
+    setTheme(state, theme) {
+      state.theme = theme;
+    },
+    setMode(state, mode) {
+      state.mode = mode;
+    },
   },
   actions: {
     sendPrompt({ commit, state, dispatch }, { prompt, bots }) {
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000000..71e62142f9
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,58 @@
+import highlightDark from "!css-loader!../node_modules/highlight.js/styles/github-dark.css";
+import highlightLight from "!css-loader!../node_modules/highlight.js/styles/github.css";
+import markdownDark from "!css-loader!../node_modules/github-markdown-css/github-markdown-dark.css";
+import markdownLight from "!css-loader!../node_modules/github-markdown-css/github-markdown-light.css";
+
+const HIGHLIGHT_STYLE_ID = "chatall-higlightjs";
+const MARKDOWN_STYLE_ID = "chatall-markdown";
+
+const SYSTEM = "system";
+const DARK = "dark";
+const LIGHT = "light";
+export const Theme = { DARK, LIGHT };
+export const Mode = { SYSTEM, ...Theme };
+
+/**
+ * Determine the actual theme for system mode
+ * @param {string} mode
+ * @param {object} ipcRenderer
+ * @returns {string} resolved theme
+ */
+export const resolveTheme = async (mode, ipcRenderer) => {
+  let resolvedTheme = mode;
+  if (mode === Mode.SYSTEM) {
+    const nativeTheme = await ipcRenderer.invoke("get-native-theme");
+    resolvedTheme = nativeTheme.shouldUseDarkColors ? Theme.DARK : Theme.LIGHT;
+  }
+  return resolvedTheme;
+};
+
+/**
+ * Apply theme to UI
+ * @param {string} theme dark / light
+ * @param {object} vuetifyTheme from veutify useTheme
+ */
+export const applyTheme = (theme, vuetifyTheme) => {
+  if (vuetifyTheme) {
+    vuetifyTheme.global.name.value = theme; // vuetify theme
+  }
+
+  document
+    .querySelectorAll(`style#${MARKDOWN_STYLE_ID}, style#${HIGHLIGHT_STYLE_ID}`)
+    .forEach((e) => e.remove()); // remove previous style
+  addStyle(
+    MARKDOWN_STYLE_ID,
+    theme === Theme.DARK ? markdownDark : markdownLight,
+  );
+  addStyle(
+    HIGHLIGHT_STYLE_ID,
+    theme === Theme.DARK ? highlightDark : highlightLight,
+  );
+};
+
+const addStyle = (id, css) => {
+  const style = document.createElement("style");
+  style.id = id;
+  style.appendChild(document.createTextNode(css));
+  document.head.appendChild(style);
+};