docs/assets/_variables.scss

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.


$container-max-width: 100rem;

@mixin theme-light {
  --color-link: #0073BB;
  --color-hover-link: #0A4A74;
  --color-visited-link: var(--color-link);
  --color-hover-visited-link: var(--color-hover-link);

  --footer-background-color: #F2F3F380;
  --footer-link-color: var(--body-font-color);
  --footer-link-hover-color: #0A4A74;
  --footer-link-visited-color: var(--body-font-color);
  --footer-link-visited-hover-color: #6B40B2;

  --body-background: white;
  --body-background-alt: #F2F3F3;
  --body-font-color: #232F3E;

  --button-text-color: #232f3e;
  --button-background-color: #C679D4;
  --button-hover-text-color: #232f3e;
  --button-hover-background-color: #B26DBF;
  --button-pressed-text-color: #232f3e;
  --button-pressed-background-color: #9E61AA;

  --hero-font-color: white;

  --border-color: #D5DBDB;

  --toc-border-color: var(--border-color);
  --toc-expand-font-color: white;
  --toc-collapse-font-color: var(--body-background);
  --toc-collapse-background-color: white;
  --toc-collapse-hover-font-color: rgba(--body-background);
  --toc-collapse-hover-background-color: rgba(255, 255, 255, 0.6);

  --table-header-background-color: rgba(0, 0, 0, 0.8);
  --table-header-text-color: white;

  --button-accent: #17202C;

  --icon-filter: none;

  --card-background-color: white;

  --hint-color-info: #6bf;
  --hint-color-warning: #fd6;
  --hint-color-danger: #f66;

  --accent-color: #7A3587;

  --navbar-background-colour: black;
  --navbar-text-color: white;
  --navbar-accent-color: var(--accent-color);
  --navbar-dropdown-background-color: #2a2e33;
  --navbar-dropdown-hover-background-color: var(--navbar-accent-color);
  --navbar-dropdown-hover-text-color: var(--navbar-text-color);

  --code-inline-block-background-color: #EAEDED;
  --code-inline-block-text-color: #232F3E;

  --powered-by-flink-background-colour: white;
}

@mixin theme-dark {
  --color-link: #44B9D6;
  --color-hover-link: #99CBE4;
  --color-visited-link: var(--color-link);
  --color-hover-visited-link: var(--color-hover-link);

  --footer-background-color: var(--body-background);
  --footer-link-color: var(--body-font-color);
  --footer-link-hover-color: #99CBE4;
  --footer-link-visited-color: var(--body-font-color);
  --footer-link-visited-hover-color: #99CBE4;

  --body-background: #232F3E;
  --body-background-alt: #17202C;
  --body-font-color: white;

  --button-text-color: #232f3e;
  --button-background-color: #C679D4;
  --button-hover-text-color: #232f3e;
  --button-hover-background-color: #B26DBF;
  --button-pressed-text-color: #232f3e;
  --button-pressed-background-color: #9E61AA;

  --hero-font-color: white;

  --border-color: #576F8C;

  --toc-border-color: var(--border-color);
  --toc-expand-font-color: white;
  --toc-collapse-font-color: var(--body-background);
  --toc-collapse-background-color: white;
  --toc-collapse-hover-font-color: rgba(--body-background);
  --toc-collapse-hover-background-color: rgba(255, 255, 255, 0.6);

  --table-header-background-color: #17202C;
  --table-header-text-color: white;

  --button-accent: #17202C;

  --icon-filter: none;

  --card-background-color: #17202C;

  --hint-color-info: #6bf;
  --hint-color-warning: #fd6;
  --hint-color-danger: #f66;

  --accent-color: #7A3587;

  --navbar-background-colour: black;
  --navbar-text-color: white;
  --navbar-accent-color: var(--accent-color);
  --navbar-dropdown-background-color: #2a2e33;
  --navbar-dropdown-hover-background-color: var(--navbar-accent-color);
  --navbar-dropdown-hover-text-color: var(--navbar-text-color);

  --code-inline-block-background-color: black;
  --code-inline-block-text-color: #F1FA8C;

  --powered-by-flink-background-colour: white;
}

.navbar {
  --bs-navbar-color: var(--navbar-text-color);
  --bs-navbar-hover-color: var(--navbar-text-color);
  --bs-navbar-padding-y: 0;
  --bs-navbar-active-color: var(--navbar-text-color);
}

  ul.navbar-nav {
  --bs-nav-link-font-size: 14px;
  --bs-nav-link-font-weight: 400;
  --bs-nav-link-padding-x: 25px;
  --bs-nav-link-padding-y: 0;

  .nav-link {
    --bs-navbar-nav-link-padding-x: 0;
    --bs-navbar-nav-link-padding-y: 0;
  }
}

  .dropdown-menu {
  --bs-dropdown-spacer: 10px;
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-bg: var(--navbar-dropdown-background-color);
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-item-padding-y: 20px;
  --bs-dropdown-link-color: var(--navbar-text-color);
  --bs-dropdown-font-size: 14px;
}