khoj/src/interface/web/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 224 71.4% 4.1%;
        --card: 0 0% 100%;
        --card-foreground: 224 71.4% 4.1%;
        --popover: 0 0% 100%;
        --popover-foreground: 224 71.4% 4.1%;
        --primary: 24.6 95% 53.1%;
        --primary-foreground: 60 9.1% 97.8%;
        --secondary: 220 14.3% 95.9%;
        --secondary-foreground: 220.9 39.3% 11%;
        --muted: 220 14.3% 95.9%;
        --muted-foreground: 220 8.9% 46.1%;
        --accent: 220 14.3% 95.9%;
        --accent-foreground: 220.9 39.3% 11%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 20% 98%;
        --border: 220 13% 91%;
        --input: 220 13% 91%;
        --ring: 24.6 95% 53.1%;
        --radius: 0.5rem;
        --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;

        /* Khoj Custom Colors */
        --frosted-background-color: 20 13% 95%;
        --border-color: #e2e2e2;

        /* Imported from Highlight.js */
        pre code.hljs {
            display: block;
            overflow-x: auto;
            padding: 1em
        }

        code.hljs {
            padding: 3px 5px
        }

        /*!
            Theme: GitHub
            Description: Light theme as seen on github.com
            Author: github.com
            Maintainer: @Hirse
            Updated: 2021-05-15

            Outdated base version: https://github.com/primer/github-syntax-light
            Current colors taken from GitHub's CSS
          */
        .hljs {
            color: #24292e;
            background: #ffffff
        }

        .hljs-doctag,
        .hljs-keyword,
        .hljs-meta .hljs-keyword,
        .hljs-template-tag,
        .hljs-template-variable,
        .hljs-type,
        .hljs-variable.language_ {
            /* prettylights-syntax-keyword */
            color: #d73a49
        }

        .hljs-title,
        .hljs-title.class_,
        .hljs-title.class_.inherited__,
        .hljs-title.function_ {
            /* prettylights-syntax-entity */
            color: #6f42c1
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-literal,
        .hljs-meta,
        .hljs-number,
        .hljs-operator,
        .hljs-variable,
        .hljs-selector-attr,
        .hljs-selector-class,
        .hljs-selector-id {
            /* prettylights-syntax-constant */
            color: #005cc5
        }

        .hljs-regexp,
        .hljs-string,
        .hljs-meta .hljs-string {
            /* prettylights-syntax-string */
            color: #032f62
        }

        .hljs-built_in,
        .hljs-symbol {
            /* prettylights-syntax-variable */
            color: #e36209
        }

        .hljs-comment,
        .hljs-code,
        .hljs-formula {
            /* prettylights-syntax-comment */
            color: #6a737d
        }

        .hljs-name,
        .hljs-quote,
        .hljs-selector-tag,
        .hljs-selector-pseudo {
            /* prettylights-syntax-entity-tag */
            color: #22863a
        }

        .hljs-subst {
            /* prettylights-syntax-storage-modifier-import */
            color: #24292e
        }

        .hljs-section {
            /* prettylights-syntax-markup-heading */
            color: #005cc5;
            font-weight: bold
        }

        .hljs-bullet {
            /* prettylights-syntax-markup-list */
            color: #735c0f
        }

        .hljs-emphasis {
            /* prettylights-syntax-markup-italic */
            color: #24292e;
            font-style: italic
        }

        .hljs-strong {
            /* prettylights-syntax-markup-bold */
            color: #24292e;
            font-weight: bold
        }

        .hljs-addition {
            /* prettylights-syntax-markup-inserted */
            color: #22863a;
            background-color: #f0fff4
        }

        .hljs-deletion {
            /* prettylights-syntax-markup-deleted */
            color: #b31d28;
            background-color: #ffeef0
        }

        .hljs-char.escape_,
        .hljs-link,
        .hljs-params,
        .hljs-property,
        .hljs-punctuation,
        .hljs-tag {
            /* purposely ignored */

        }
    }

    .dark {
        --background: 0 0% 14%;
        --foreground: 210 20% 98%;
        --card: 0 0% 14%;
        --card-foreground: 210 20% 98%;
        --popover: 0 0% 14%;
        --popover-foreground: 210 20% 98%;
        --popover: 20 14.3% 4.1%;
        --popover-foreground: 60 9.1% 97.8%;
        --secondary: 0 0% 9%;
        --secondary-foreground: 210 20% 98%;
        --muted: 0 0% 9%;
        --muted-foreground: 217.9 10.6% 64.9%;
        --accent: 0 0% 9%;
        --accent-foreground: 210 20% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 20% 98%;
        --border: 0 0% 9%;
        --input: 0 0% 9%;
        --ring: 20.5 90.2% 48.2%;
        --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;

        /* Imported from highlight.js */
        pre code.hljs {
            display: block;
            overflow-x: auto;
            padding: 1em
        }

        code.hljs {
            padding: 3px 5px
        }

        /*!
            Theme: GitHub Dark
            Description: Dark theme as seen on github.com
            Author: github.com
            Maintainer: @Hirse
            Updated: 2021-05-15

            Outdated base version: https://github.com/primer/github-syntax-dark
            Current colors taken from GitHub's CSS
          */
        .hljs {
            color: #c9d1d9;
            background: #0d1117
        }

        .hljs-doctag,
        .hljs-keyword,
        .hljs-meta .hljs-keyword,
        .hljs-template-tag,
        .hljs-template-variable,
        .hljs-type,
        .hljs-variable.language_ {
            /* prettylights-syntax-keyword */
            color: #ff7b72
        }

        .hljs-title,
        .hljs-title.class_,
        .hljs-title.class_.inherited__,
        .hljs-title.function_ {
            /* prettylights-syntax-entity */
            color: #d2a8ff
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-literal,
        .hljs-meta,
        .hljs-number,
        .hljs-operator,
        .hljs-variable,
        .hljs-selector-attr,
        .hljs-selector-class,
        .hljs-selector-id {
            /* prettylights-syntax-constant */
            color: #79c0ff
        }

        .hljs-regexp,
        .hljs-string,
        .hljs-meta .hljs-string {
            /* prettylights-syntax-string */
            color: #a5d6ff
        }

        .hljs-built_in,
        .hljs-symbol {
            /* prettylights-syntax-variable */
            color: #ffa657
        }

        .hljs-comment,
        .hljs-code,
        .hljs-formula {
            /* prettylights-syntax-comment */
            color: #8b949e
        }

        .hljs-name,
        .hljs-quote,
        .hljs-selector-tag,
        .hljs-selector-pseudo {
            /* prettylights-syntax-entity-tag */
            color: #7ee787
        }

        .hljs-subst {
            /* prettylights-syntax-storage-modifier-import */
            color: #c9d1d9
        }

        .hljs-section {
            /* prettylights-syntax-markup-heading */
            color: #1f6feb;
            font-weight: bold
        }

        .hljs-bullet {
            /* prettylights-syntax-markup-list */
            color: #f2cc60
        }

        .hljs-emphasis {
            /* prettylights-syntax-markup-italic */
            color: #c9d1d9;
            font-style: italic
        }

        .hljs-strong {
            /* prettylights-syntax-markup-bold */
            color: #c9d1d9;
            font-weight: bold
        }

        .hljs-addition {
            /* prettylights-syntax-markup-inserted */
            color: #aff5b4;
            background-color: #033a16
        }

        .hljs-deletion {
            /* prettylights-syntax-markup-deleted */
            color: #ffdcd7;
            background-color: #67060c
        }

        .hljs-char.escape_,
        .hljs-link,
        .hljs-params,
        .hljs-property,
        .hljs-punctuation,
        .hljs-tag {
            /* purposely ignored */

        }
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }

    h1 {
        @apply text-4xl font-bold;
    }

    body {
        font-family: var(--font-family);
    }

    pre code.hljs {
        white-space: preserve;
    }

    a {
        text-decoration: underline;
    }
}