diff --git a/admin/src/theme/additional.ts b/admin/src/theme/additional.ts
index 98a98a5..b25d5ee 100644
--- a/admin/src/theme/additional.ts
+++ b/admin/src/theme/additional.ts
@@ -3,6 +3,9 @@ import { css } from 'styled-components';
 const editorSizes = css`
   :root {
     --ck-editor-full-screen-box-max-width: 1700px;
+  }
+
+  .ck {
     --ck-editor-max-width: 1366px;
     --ck-editor-min-height: 200px;
     --ck-editor-max-height: 500px;
diff --git a/admin/src/theme/colors.ts b/admin/src/theme/colors.ts
new file mode 100644
index 0000000..eb2319b
--- /dev/null
+++ b/admin/src/theme/colors.ts
@@ -0,0 +1,132 @@
+import { css } from 'styled-components';
+
+export const colors = css`
+  ${({ theme }) => css`
+    :root {
+      /* -- Generic colors ---------------------------------------------------------------------- */
+
+      --ck-color-focus-outer-shadow: ${theme.colors.primary600}1F !important;
+      --ck-color-focus-disabled-shadow: ${theme.colors.primary200} !important;
+      --ck-focus-ring: 1px solid ${theme.colors.primary600}9F !important;
+      --ck-color-button-default-hover-background: ${theme.colors.primary100} !important;
+    }
+
+    .ck {
+      /* -- Generic colors ---------------------------------------------------------------------- */
+
+      --ck-color-base-focus: ${theme.colors.primary200};
+      --ck-color-base-active: ${theme.colors.primary500}8F;
+      --ck-color-base-active-focus: ${theme.colors.primary600};
+      --ck-color-editor-base-text: ${theme.colors.neutral800};
+      --ck-color-base-border: ${theme.colors.neutral200};
+      --ck-color-base-background: ${theme.colors.neutral0};
+      --ck-custom-foreground: ${theme.colors.neutral200};
+      --ck-color-base-foreground: var(--ck-color-base-background);
+      --ck-color-focus-border: ${theme.colors.primary500};
+      --ck-color-text: ${theme.colors.neutral800};
+      --ck-custom-white: hsl(0, 0%, 100%);
+
+      /* -- Buttons ----------------------------------------------------------------------------- */
+
+      --ck-color-button-default-background: var(--ck-color-base-background);
+      --ck-color-button-default-hover-background: ${theme.colors.primary100};
+      --ck-color-button-default-active-background: ${theme.colors.primary100};
+      --ck-color-button-default-active-shadow: ${theme.colors.primary100};
+      --ck-color-button-default-disabled-background: var(--ck-color-base-background);
+
+      --ck-color-button-on-color: ${theme.colors.primary600};
+      --ck-color-button-on-background: ${theme.colors.primary100};
+      --ck-color-button-on-hover-background: ${theme.colors.primary200};
+      --ck-color-button-on-active-background: ${theme.colors.primary100};
+      --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+      --ck-color-button-on-active-shadow: ${theme.colors.primary200};
+
+      --ck-color-button-action-background: ${theme.colors.success500}E5;
+      --ck-color-button-action-hover-background: ${theme.colors.success500}F5;
+      --ck-color-button-action-active-background: ${theme.colors.success500};
+      --ck-color-button-action-disabled-background: ${theme.colors.success500}99;
+      --ck-color-button-action-text: var(--ck-custom-white);
+
+      --ck-color-switch-button-off-background: ${theme.colors.neutral400};
+      --ck-color-switch-button-off-hover-background: ${theme.colors.neutral500};
+      --ck-color-switch-button-on-background: var(--ck-color-button-action-background);
+      --ck-color-switch-button-on-hover-background: var(--ck-color-button-action-hover-background);
+
+      --ck-color-button-save: ${theme.colors.success500};
+      --ck-color-button-cancel: ${theme.colors.danger500};
+
+      --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+      --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+      /* -- Dropdown ---------------------------------------------------------------------------- */
+
+      --ck-color-dropdown-panel-background: var(--ck-color-base-background);
+      --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+      /* -- Input ------------------------------------------------------------------------------- */
+
+      --ck-color-input-background: var(--ck-color-base-background);
+      --ck-color-input-border: var(--ck-color-base-border);
+      --ck-color-input-text: var(--ck-color-editor-base-text);
+
+      --ck-color-input-disabled-background: ${theme.colors.neutral100};
+      --ck-color-input-disabled-border: ${theme.colors.neutral150};
+      --ck-color-input-disabled-text: ${theme.colors.neutral400};
+
+      --ck-color-labeled-field-label-background: var(--ck-color-base-background);
+
+      /* -- List -------------------------------------------------------------------------------- */
+
+      --ck-color-list-background: var(--ck-color-base-background);
+      --ck-color-list-button-hover-background: ${theme.colors.primary100};
+      --ck-color-list-button-on-background: var(--ck-color-base-active);
+      --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
+
+      /* -- Panel ------------------------------------------------------------------------------- */
+
+      --ck-color-panel-background: var(--ck-color-base-background);
+      --ck-color-panel-border: var(--ck-color-base-border);
+
+      --ck-style-panel-button-label-background: ${theme.colors.neutral100};
+      --ck-style-panel-button-hover-label-background: ${theme.colors.neutral150};
+      --ck-style-panel-button-hover-border-color: var(--ck-color-base-border);
+
+      /* -- Toolbar ----------------------------------------------------------------------------- */
+
+      --ck-color-toolbar-background: var(--ck-color-base-background);
+      --ck-color-toolbar-border: var(--ck-color-base-border);
+
+      /* -- Tooltip ----------------------------------------------------------------------------- */
+
+      --ck-color-tooltip-background: ${theme.colors.neutral800};
+      --ck-color-tooltip-text: ${theme.colors.neutral100};
+
+      /* -- Image ------------------------------------------------------------------------------- */
+
+      --ck-color-image-caption-background: ${theme.colors.neutral100};
+      --ck-color-image-caption-text: ${theme.colors.neutral800};
+
+      /* -- Widget ------------------------------------------------------------------------------ */
+
+      --ck-color-widget-blurred-border: ${theme.colors.neutral400};
+      --ck-color-widget-hover-border: ${theme.colors.neutral300};
+      --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+      --ck-color-widget-type-around-button-active: var(--ck-color-focus-border);
+      --ck-color-widget-type-around-button-hover: ${theme.colors.neutral300};
+
+      /* -- Link -------------------------------------------------------------------------------- */
+
+      --ck-color-link-fake-selection: ${theme.colors.primary200};
+      --ck-color-link-selected-background: ${theme.colors.primary200};
+
+      /* -- Dialog ------------------------------------------------------------------------------ */
+
+      --ck-color-dialog-background: var(--ck-color-base-background);
+      --ck-color-dialog-form-header-border: var(--ck-color-base-border);
+
+      /* -- PoweredBy --------------------------------------------------------------------------- */
+
+      --ck-powered-by-background: transparrent;
+    }
+  `}
+`;
diff --git a/admin/src/theme/common.ts b/admin/src/theme/common.ts
index 870299a..1f3f185 100644
--- a/admin/src/theme/common.ts
+++ b/admin/src/theme/common.ts
@@ -1,250 +1,244 @@
 import { css } from 'styled-components';
 
 const reset = css`
-  .ck {
-    --ck-color-image-caption-background: hsl(0, 0%, 97%);
-    --ck-color-image-caption-text: hsl(0, 0%, 20%);
-    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
-    --ck-color-mention-text: hsl(341, 100%, 30%);
-    --ck-color-table-caption-background: hsl(0, 0%, 97%);
-    --ck-color-table-caption-text: hsl(0, 0%, 20%);
-    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
-    --ck-highlight-marker-green: hsl(120, 93%, 68%);
-    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
-    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
-    --ck-highlight-pen-green: hsl(112, 100%, 27%);
-    --ck-highlight-pen-red: hsl(0, 85%, 49%);
-    --ck-image-style-spacing: 1.5em;
-    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
-    --ck-todo-list-checkmark-size: 16px;
-    font-size: 1.4rem;
-  }
+  ${({ theme }) => css`
+    .ck {
+      --ck-color-image-caption-background: hsl(0, 0%, 97%);
+      --ck-color-image-caption-text: hsl(0, 0%, 20%);
+      --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
+      --ck-color-mention-text: hsl(341, 100%, 30%);
+      --ck-color-table-caption-background: hsl(0, 0%, 97%);
+      --ck-color-table-caption-text: hsl(0, 0%, 20%);
+      --ck-highlight-marker-blue: hsl(201, 97%, 72%);
+      --ck-highlight-marker-green: hsl(120, 93%, 68%);
+      --ck-highlight-marker-pink: hsl(345, 96%, 73%);
+      --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
+      --ck-highlight-pen-green: hsl(112, 100%, 27%);
+      --ck-highlight-pen-red: hsl(0, 85%, 49%);
+      --ck-image-style-spacing: 1.5em;
+      --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
+      --ck-todo-list-checkmark-size: 16px;
+      --ck-border-radius: ${theme.borderRadius};
+
+      font-size: ${theme.fontSizes[2]};
+    }
 
-  .ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_sw.ck-dropdown__panel-visible {
-    border-radius: var(--ck-border-radius);
-  }
+    .ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_sw.ck-dropdown__panel-visible {
+      border-radius: var(--ck-border-radius);
+    }
 
-  .ck-editor__main {
-    --ck-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue', 'Helvetica', Arial,
-      sans-serif;
+    .ck-editor__main {
+      --ck-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue', 'Helvetica', Arial,
+        sans-serif;
 
-    color: var(--ck-color-editor-base-text);
-    font-family: var(--ck-font-face);
+      color: var(--ck-color-editor-base-text);
+      font-family: var(--ck-font-face);
 
-    * {
-      font: revert;
-      margin: revert;
-    }
+      * {
+        font: revert;
+        margin: revert;
+      }
 
-    h1 {
-      font-size: 2.3em;
-    }
+      h1 {
+        font-size: 2.3em;
+      }
 
-    h2 {
-      font-size: 1.84em;
-    }
+      h2 {
+        font-size: 1.84em;
+      }
 
-    h3 {
-      font-size: 1.48em;
-    }
+      h3 {
+        font-size: 1.48em;
+      }
 
-    h4 {
-      font-size: 1.22em;
-    }
+      h4 {
+        font-size: 1.22em;
+      }
 
-    h5 {
-      font-size: 1.06em;
-    }
+      h5 {
+        font-size: 1.06em;
+      }
 
-    h6 {
-      font-size: 1em;
-    }
+      h6 {
+        font-size: 1em;
+      }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      line-height: 1.2em;
-      padding-top: 0.8em;
-      margin-bottom: 0.4em;
-    }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        line-height: 1.2em;
+        padding-top: 0.8em;
+        margin-bottom: 0.4em;
+      }
 
-    blockquote,
-    ol,
-    p,
-    ul {
-      font-size: 1em;
-      line-height: 1.6em;
-      padding-top: 0.2em;
-      margin-bottom: var(--ck-spacing-large);
-    }
+      blockquote,
+      ol,
+      p,
+      ul {
+        font-size: 1em;
+        line-height: 1.6em;
+        padding-top: 0.2em;
+        margin-bottom: var(--ck-spacing-large);
+      }
 
-    figcaption {
-      background-color: var(--ck-color-image-caption-background);
-      caption-side: bottom;
-      color: var(--ck-color-image-caption-text);
-      display: table-caption;
-      font-size: 0.75em;
-      outline-offset: -1px;
-      padding: 0.6em;
-      word-break: break-word;
-    }
+      figcaption {
+        background-color: var(--ck-color-image-caption-background);
+        caption-side: bottom;
+        color: var(--ck-color-image-caption-text);
+        display: table-caption;
+        font-size: 0.75em;
+        outline-offset: -1px;
+        padding: 0.6em;
+        word-break: break-word;
+      }
 
-    a {
-      text-decoration: none;
-      color: #1b3af2;
-    }
+      a {
+        text-decoration: none;
+        color: #1b3af2;
+      }
 
-    a:hover {
-      text-decoration: underline;
-    }
+      a:hover {
+        text-decoration: underline;
+      }
 
-    .table {
-      margin: 0;
-    }
+      .table {
+        margin: 0;
+      }
 
-    ul.todo-list {
-      list-style: none;
-      margin: revert;
-      color: revert;
-      font-family: revert;
-      margin-left: 2rem;
-    }
+      ul.todo-list {
+        list-style: none;
+        margin: revert;
+        color: revert;
+        font-family: revert;
+        margin-left: 2rem;
+      }
 
-    ul,
-    ol {
-      list-style: initial;
-      margin-left: 2rem;
-    }
+      ul,
+      ol {
+        list-style: initial;
+        margin-left: 2rem;
+      }
 
-    ol {
-      list-style: decimal;
-    }
+      ol {
+        list-style: decimal;
+      }
 
-    sub {
-      vertical-align: sub;
-    }
+      sub {
+        vertical-align: sub;
+      }
 
-    sup {
-      vertical-align: super;
+      sup {
+        vertical-align: super;
+      }
     }
-  }
+  `}
 `;
 
 const plugin = css`
-  .ck.ck-content.ck-editor__editable {
-    line-height: initial;
-    height: auto;
-    min-height: var(--ck-editor-min-height);
-    border: none !important;
-    max-width: var(--ck-editor-max-width) !important;
-    margin: 0 auto;
-    &.ck-focused:not(.ck-editor__nested-editable) {
-      box-shadow: none;
-    }
-  }
-
-  .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
-    border: none !important;
-  }
-
-  .ck.ck-editor__main {
-    min-height: var(--ck-editor-min-height) !important;
-    max-height: var(--ck-editor-max-height) !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-    border-top: 1px solid var(--ck-color-base-border);
-    border-bottom-left-radius: var(--ck-border-radius);
-    border-bottom-right-radius: var(--ck-border-radius);
-  }
+  ${({ theme }) => css`
+    .ck {
+      scrollbar-width: thin;
+      scrollbar-color: ${`${theme.colors.neutral300} ${theme.colors.neutral150}`};
 
-  .ck.ck-editor__main {
-    .ck-focused,
-    .ck-blurred {
-      ::-webkit-scrollbar {
-        width: 7px;
-      }
-      ::-webkit-scrollbar-track {
-        background: var(--ck-scroll-track-background);
-        border: none;
-      }
-      ::-webkit-scrollbar-thumb {
-        transition: background 2s;
-        background: var(--ck-scroll-thumb-background);
-        border: 1px solid var(--ck-scroll-thumb-border-color);
+      @-moz-document url-prefix() {
+        scrollbar-width: auto;
       }
-      ::-webkit-scrollbar-thumb:hover {
-        transition: background 2s;
-        background: var(--ck-scroll-thumb-hover-background);
-      }
-      ::-webkit-scrollbar-thumb:active {
-        background: var(--ck-scroll-thumb-active-background);
+    }
+
+    .ck.ck-content.ck-editor__editable {
+      line-height: initial;
+      height: auto;
+      min-height: var(--ck-editor-min-height);
+      border: none !important;
+      max-width: var(--ck-editor-max-width) !important;
+      margin: 0 auto;
+      &.ck-focused:not(.ck-editor__nested-editable) {
+        box-shadow: none;
       }
     }
-  }
 
-  .ck .ck-source-editing-area,
-  .ck .ck-source-editing-area textarea {
-    color: var(--ck-color-text);
-    background-color: var(--ck-color-base-background);
-    border: none !important;
-    box-shadow: none !important;
-    min-height: var(--ck-editor-min-height);
-    max-width: var(--ck-editor-max-width);
-    margin: 0 auto;
-  }
+    .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
+      border: none !important;
+    }
 
-  .ck .ck-block-toolbar-button {
-    min-width: 0 !important;
-    min-height: 0 !important;
-    width: 20px !important;
-    height: 25px !important;
-    margin-left: -2px !important ;
+    .ck.ck-editor__main {
+      min-height: var(--ck-editor-min-height) !important;
+      max-height: var(--ck-editor-max-height) !important;
+      overflow-y: auto;
+      overflow-x: hidden;
+      border-top: 1px solid var(--ck-color-base-border);
+      border-bottom-left-radius: var(--ck-border-radius);
+      border-bottom-right-radius: var(--ck-border-radius);
+    }
 
-    & svg {
-      color: var(--ck-color-text) !important;
-      position: absolute;
-      width: 20px;
-      height: 20px;
+    .ck .ck-source-editing-area,
+    .ck .ck-source-editing-area textarea {
+      color: var(--ck-color-text);
+      background-color: var(--ck-color-base-background);
+      border: none !important;
+      box-shadow: none !important;
+      min-height: var(--ck-editor-min-height);
+      max-width: var(--ck-editor-max-width);
+      margin: 0 auto;
     }
-  }
 
-  .ck-word-count {
-    display: flex;
-    position: absolute;
-    justify-content: end;
-    gap: 0.3rem;
-    font-size: 1rem;
-    font-weight: 500;
-    text-transform: lowercase;
-    z-index: 2;
-    bottom: -2rem;
-    right: 0;
-  }
+    .ck .ck-block-toolbar-button {
+      min-width: 0 !important;
+      min-height: 0 !important;
+      width: 20px !important;
+      height: 25px !important;
+      margin-left: -2px !important ;
+
+      & svg {
+        color: var(--ck-color-text) !important;
+        position: absolute;
+        width: 20px;
+        height: 20px;
+      }
+    }
 
-  .ck[dir='rtl'] {
-    .ck-block-toolbar-button {
-      margin-left: 2px !important ;
+    .ck-word-count {
+      display: flex;
+      position: absolute;
+      justify-content: end;
+      gap: 0.3rem;
+      font-size: 1rem;
+      font-weight: 500;
+      text-transform: lowercase;
+      z-index: 2;
+      bottom: -2rem;
+      right: 0;
     }
-    & + div {
-      justify-content: flex-start;
-      & > .ck-word-count {
-        & > div:first-child {
-          order: 2;
-        }
-        & > div:last-child {
-          order: 1;
+
+    .ck[dir='rtl'] {
+      .ck-block-toolbar-button {
+        margin-left: 2px !important ;
+      }
+      & + div {
+        justify-content: flex-start;
+        & > .ck-word-count {
+          & > div:first-child {
+            order: 2;
+          }
+          & > div:last-child {
+            order: 1;
+          }
         }
       }
     }
-  }
 
-  .ck.ck-editor__editable > .ck-placeholder::before {
-    color: var(--ck-color-editor-base-text);
-    opacity: 0.65;
-  }
+    .ck.ck-editor__editable > .ck-placeholder::before {
+      color: var(--ck-color-editor-base-text);
+      opacity: 0.65;
+    }
+
+    .ck.ck-powered-by > a > svg > path:first-child {
+      fill: ${theme.colors.neutral800};
+    }
+  `}
 `;
 
 const expanded = css`
diff --git a/admin/src/theme/dark.ts b/admin/src/theme/dark.ts
index f18dc8f..832416b 100644
--- a/admin/src/theme/dark.ts
+++ b/admin/src/theme/dark.ts
@@ -1,145 +1,10 @@
 import { css } from 'styled-components';
+import { colors } from './colors';
 
 export const dark = css`
-  :root {
-    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
-    --ck-color-focus-disabled-shadow: rgba(106, 114, 143, 0.4) !important;
-    --ck-focus-ring: 1px solid #4945ff !important;
-    --ck-color-button-default-hover-background: #262630 !important;
-  }
-
-  .ck.ck-powered-by > a > svg > path:first-child {
-    fill: rgb(236, 236, 236);
-  }
+  ${colors}
 
   .ck.ck-powered-by > a > svg > path:nth-child(3) {
     fill: rgb(172, 156, 251);
   }
-
-  .ck {
-    --ck-scroll-track-background: #3d3d57;
-    --ck-scroll-thumb-background: #181826;
-    --ck-scroll-thumb-border-color: rgb(70, 70, 70);
-    --ck-scroll-thumb-hover-background: #202033;
-    --ck-scroll-thumb-active-background: #2b2b45;
-
-    --ck-color-editor-base-text: rgb(236, 236, 236);
-    /* Overrides the border radius setting in the theme. */
-    --ck-border-radius: 4px;
-
-    /* Helper variables to avoid duplication in the colors. */
-    --ck-color-base-border: #4a4a6a;
-    --ck-color-base-background: #212134;
-    --ck-custom-background: #181826;
-    --ck-custom-foreground: #26263b;
-    --ck-custom-border: #4a4a6a;
-    --ck-custom-white: hsl(0, 0%, 100%);
-
-    --ck-color-focus-outer-shadow: #212134;
-
-    --ck-color-base-focus: #bbbaf1;
-    --ck-color-base-active: #2e2e5c;
-    --ck-color-base-active-focus: #28284d;
-
-    /* -- Overrides generic colors. ----------------------------------------- */
-
-    --ck-color-base-foreground: var(--ck-custom-background);
-    --ck-color-focus-border: #6765bd;
-    --ck-color-text: hsl(0, 0%, 93%);
-    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
-    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
-
-    /* -- Overrides the default .ck-button class colors. -------------------- */
-
-    --ck-color-button-default-background: rgb(33, 33, 52);
-
-    --ck-color-button-default-hover-background: #262630;
-    --ck-color-button-default-active-background: #3c3c47;
-    --ck-color-button-default-active-shadow: #3c3c47;
-    --ck-color-button-default-disabled-background: var(--ck-custom-background);
-
-    --ck-color-button-on-color: #7b79ff;
-    --ck-color-button-on-background: #2b2b36;
-    --ck-color-button-on-hover-background: #30303b;
-    --ck-color-button-on-active-background: #3c3c47;
-    --ck-color-button-on-active-shadow: #3c3c47;
-    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
-
-    --ck-color-button-action-background: hsl(168, 76%, 42%);
-    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
-    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
-    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
-    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
-    --ck-color-button-action-text: var(--ck-custom-white);
-
-    --ck-color-button-save: hsl(120, 100%, 46%);
-    --ck-color-button-cancel: hsl(15, 100%, 56%);
-
-    /* -- Overrides the default .ck-dropdown class colors. ------------------ */
-
-    --ck-color-dropdown-panel-background: var(--ck-custom-background);
-    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
-
-    /* -- Overrides the default .ck-splitbutton class colors. --------------- */
-
-    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
-    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
-
-    /* -- Overrides the default .ck-input class colors. --------------------- */
-
-    --ck-color-input-background: var(--ck-custom-background);
-    --ck-color-input-border: hsl(257, 3%, 43%);
-    --ck-color-input-text: hsl(0, 0%, 98%);
-    --ck-color-input-disabled-background: hsl(255, 4%, 21%);
-    --ck-color-input-disabled-border: hsl(250, 3%, 38%);
-    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
-
-    /* -- Overrides the default .ck-labeled-field-view class colors. ---------*/
-
-    --ck-color-labeled-field-label-background: var(--ck-custom-background);
-
-    /* -- Overrides the default .ck-list class colors. ---------------------- */
-
-    --ck-color-list-background: var(--ck-custom-background);
-    --ck-color-list-button-hover-background: #121221;
-    --ck-color-list-button-on-background: var(--ck-color-base-active);
-    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
-    --ck-color-list-button-on-text: #ffffff;
-
-    /* -- Overrides the default .ck-balloon-panel class colors. ------------- */
-
-    --ck-color-panel-background: var(--ck-custom-background);
-    --ck-color-panel-border: var(--ck-custom-border);
-
-    /* -- Overrides the default .ck-toolbar class colors. ------------------- */
-
-    --ck-color-toolbar-background: var(--ck-custom-background);
-    --ck-color-toolbar-border: var(--ck-custom-border);
-
-    /* -- Overrides the default .ck-tooltip class colors. ------------------- */
-
-    --ck-color-tooltip-background: #3a3955;
-    --ck-color-tooltip-text: hsl(0, 0%, 93%);
-
-    /* -- Overrides the default colors used by the ckeditor5-image package. - */
-
-    --ck-color-image-caption-background: hsl(0, 0%, 97%);
-    --ck-color-image-caption-text: hsl(0, 0%, 20%);
-
-    /* -- Overrides the default colors used by the ckeditor5-widget package.  */
-
-    --ck-color-widget-blurred-border: #7c7c96;
-    --ck-color-widget-hover-border: #666687;
-    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
-
-    /* -- Overrides the default colors used by the ckeditor5-link package. -- */
-
-    --ck-color-link-default: hsl(216, 100%, 75%);
-
-    --ck-powered-by-background: transparrent;
-    --ck-powered-by-border-color: var(--ck-color-base-background);
-
-    --ck-color-dialog-background: var(--ck-custom-background);
-    --ck-color-dialog-form-header-border: var(--ck-color-base-border);
-  }
 `;
diff --git a/admin/src/theme/light.ts b/admin/src/theme/light.ts
index b1628ad..cbf0599 100644
--- a/admin/src/theme/light.ts
+++ b/admin/src/theme/light.ts
@@ -1,140 +1,6 @@
 import { css } from 'styled-components';
+import { colors } from './colors';
 
 export const light = css`
-  :root {
-    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
-    --ck-color-focus-disabled-shadow: #e4e3ff !important;
-    --ck-focus-ring: 1px solid rgb(73, 69, 255) !important;
-    --ck-color-button-default-hover-background: #f0f0ff !important;
-  }
-
-  .ck.ck-powered-by > a > svg > path:first-child {
-    fill: #001234;
-  }
-
-  .ck {
-    --ck-scroll-track-background: rgb(242, 242, 242);
-    --ck-scroll-thumb-background: rgb(236, 236, 236);
-    --ck-scroll-thumb-border-color: #cdcdf8;
-    --ck-scroll-thumb-hover-background: #f0f0ff;
-    --ck-scroll-thumb-active-background: #d9d8ff;
-
-    --ck-color-editor-base-text: #001234;
-    /* Overrides the border radius setting in the theme. */
-    --ck-border-radius: 4px;
-
-    /* Helper variables to avoid duplication in the colors. */
-    --ck-color-base-border: #dcdce4;
-    --ck-color-base-background: #ffffff;
-    --ck-custom-background: #ffffff;
-    --ck-custom-foreground: #dedede;
-    --ck-custom-border: #dcdce4;
-    --ck-custom-white: hsl(0, 0%, 100%);
-
-    --ck-color-base-focus: #bbbaf1;
-    --ck-color-base-active: #f0f0ff;
-    --ck-color-base-active-focus: #e2e2fd;
-
-    /* -- Overrides generic colors. ----------------------------------------- */
-
-    --ck-color-base-foreground: var(--ck-custom-background);
-
-    --ck-color-focus-border: rgb(73, 69, 255);
-
-    --ck-color-text: #32324d;
-    --ck-color-shadow-drop: hsla(250, 31%, 80%, 0.1);
-    --ck-color-shadow-inner: hsla(250, 31%, 80%, 0.1);
-
-    /* -- Overrides the default .ck-button class colors. -------------------- */
-
-    --ck-color-button-default-background: var(--ck-custom-background);
-    --ck-color-button-default-hover-background: #f0f0ff;
-    --ck-color-button-default-active-background: #f6f6f9;
-    --ck-color-button-default-active-shadow: #dedefb;
-    --ck-color-button-default-disabled-background: var(--ck-custom-background);
-
-    --ck-color-button-on-color: rgb(73, 69, 255);
-    --ck-color-button-on-background: #f0f0ff;
-    --ck-color-button-on-hover-background: #e6e9fc;
-    --ck-color-button-on-active-background: #f6f6f9;
-    --ck-color-button-on-active-shadow: #cdcdf8;
-    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
-
-    --ck-color-button-action-background: hsl(168, 76%, 42%);
-    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
-    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
-    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
-    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
-    --ck-color-button-action-text: var(--ck-custom-white);
-
-    --ck-color-button-save: hsl(120, 100%, 46%);
-    --ck-color-button-cancel: hsl(15, 100%, 56%);
-
-    /* -- Overrides the default .ck-dropdown class colors. ------------------ */
-
-    --ck-color-dropdown-panel-background: var(--ck-custom-background);
-    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
-
-    /* -- Overrides the default .ck-splitbutton class colors. --------------- */
-
-    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
-    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
-
-    /* -- Overrides the default .ck-input class colors. --------------------- */
-
-    --ck-color-input-background: var(--ck-custom-background);
-    --ck-color-input-border: hsl(257, 3%, 43%);
-    --ck-color-input-text: hsl(0, 0%, 98%);
-    --ck-color-input-disabled-background: hsl(0, 0%, 97%);
-    --ck-color-input-disabled-border: rgb(214, 214, 214);
-    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
-
-    /* -- Overrides the default .ck-labeled-field-view class colors. -------- */
-
-    --ck-color-labeled-field-label-background: var(--ck-custom-background);
-
-    /* -- Overrides the default .ck-list class colors. ---------------------- */
-
-    --ck-color-list-background: var(--ck-custom-background);
-    --ck-color-list-button-hover-background: #f4f4fb;
-    --ck-color-list-button-on-background: var(--ck-color-base-active);
-    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
-    --ck-color-list-button-on-text: #271fe2;
-
-    /* -- Overrides the default .ck-balloon-panel class colors. ------------- */
-
-    --ck-color-panel-background: var(--ck-custom-background);
-    --ck-color-panel-border: var(--ck-custom-border);
-
-    /* -- Overrides the default .ck-toolbar class colors. ------------------- */
-
-    --ck-color-toolbar-background: var(--ck-custom-background);
-    --ck-color-toolbar-border: var(--ck-custom-border);
-
-    /* -- Overrides the default .ck-tooltip class colors. ------------------- */
-
-    --ck-color-tooltip-background: #3a3955;
-    --ck-color-tooltip-text: hsl(0, 0%, 93%);
-
-    /* -- Overrides the default colors used by the ckeditor5-image package. - */
-
-    --ck-color-image-caption-background: hsl(0, 0%, 97%);
-    --ck-color-image-caption-text: hsl(0, 0%, 20%);
-
-    /* -- Overrides the default colors used by the ckeditor5-widget package.  */
-
-    --ck-color-widget-blurred-border: #cfcffa;
-    --ck-color-widget-hover-border: #c9c9e4;
-    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
-
-    /* -- Overrides the default colors used by the ckeditor5-link package. -- */
-
-    --ck-color-link-default: hsl(209, 89%, 33%);
-
-    --ck-powered-by-background: transparrent;
-    --ck-powered-by-border-color: var(--ck-color-base-background);
-
-    --ck-color-dialog-background: var(--ck-custom-background);
-    --ck-color-dialog-form-header-border: var(--ck-color-base-border);
-  }
+  ${colors}
 `;