Dockerfile

FROM node:18

# 克隆项目
RUN git clone https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
WORKDIR "ChatGPT-Next-Web"

# 创建新的样式内容
RUN echo '@import "./animation.scss";
@import "./window.scss";

@mixin light {
  --theme: light;
  --white: #fff;
  --black: #303030;
  --gray: #fafafa;
  --primary: #315ef8;
  --second: #f3f3f6;
  --hover-color: #f3f3f3;
  --bar-color: rgba(0,0,0,.1);
  --theme-color: var(--gray);
  --shadow: 50px 50px 100px 10px rgba(0,0,0,.1);
  --card-shadow: 0px 2px 4px 0px rgba(0,0,0,.05);
  --border-in-light: 1px solid #dedede;
  --sidebar-sub-title: rgba(38,47,156,.5);
}

@mixin dark {
  --theme: dark;
  --white: #1e1e1e;
  --black: #bbb;
  --gray: #151515;
  --primary: #315ef8;
  --second: #26262c;
  --hover-color: #323232;
  --bar-color: rgba(255, 255, 255, 0.1);
  --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
  --theme-color: var(--gray);

  div:not(.no-dark) > svg {
    filter: invert(0.5);
  }
}

.light {
  @include light;
}

.dark {
  @include dark;
}

.mask {
  filter: invert(0.8);
}

:root {
  @include light;

  --window-width: 90vw;
  --window-height: 90vh;
  --sidebar-width: 300px;
  --window-content-width: calc(100% - var(--sidebar-width));
  --message-max-width: 80%;
  --full-height: 100%;
}

@media only screen and (max-width: 600px) {
  :root {
    --window-width: 100vw;
    --window-height: var(--full-height);
    --sidebar-width: 100vw;
    --window-content-width: var(--window-width);
    --message-max-width: 100%;
  }

  .no-mobile {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    @include dark;
  }
}' > /tmp/new_globals.scss

# 将剩余的原始样式内容附加到新文件中
RUN sed -n '/html {/,$p' app/styles/globals.scss >> /tmp/new_globals.scss

# 备份原始文件并替换为新文件
RUN cp app/styles/globals.scss app/styles/globals.scss.backup && \
    cp /tmp/new_globals.scss app/styles/globals.scss

# 安装依赖并构建
RUN npm i 
RUN npm run build

EXPOSE 3000
CMD ["npm", "run", "start"]