OXYGEN
Oxygen
Wishlist Cart

Oxygen Theme © 2025

Your Cart
Total$0.00
View Cart Checkout
Documentation Oxygen Bootstrap 5 Template

Everything you need to customize Oxygen.

This guide covers folder structure, SCSS architecture, component usage, JavaScript behaviors, and credits.

Start customizing Preview Home 1
Included pages
18+ pages across landing, shop, blog, and utility pages.
index.html
Main homepage
about.html
About / team page
blog.html
Blog listing with filters
blog-single.html
Blog article page
contact.html
Contact form page
shop.html
Product catalog grid
product.html
Product detail page
category.html
Category listing
cart.html
Shopping cart
checkout.html
Checkout flow
wishlist.html
Saved items
compare.html
Product comparison
orders.html
Order history
order-details.html
Order detail view
order-success.html
Order confirmation
documentation.html
Setup and customization
Overview

What Oxygen is designed for

A premium landing page theme suitable for SaaS, apps, agencies, AI tools, and digital products.

Premium system

Strict palette, modern typography, consistent radius/shadows, and refined hover states.

Clean SCSS

Organized partials that make it easy to adjust the theme globally.

Lightweight JS

Vanilla enhancements: scroll state, active nav, reveal, counters, pricing toggle.

Structure

Project folders

Keep assets organized so buyers can quickly find what they need.

Template root
/oxygen-template
  /assets
    /css
      oxygen.css
      oxygen.min.css
    /js
      oxygen.js
      oxygen.min.js
    /images
      /logos
      /avatars
      app.png, app2.png
      favicon.svg
  /src
    /scss
      main.scss
      _variables.scss
      _mixins.scss
      _base.scss
      _buttons.scss
      _navbar.scss
      _hero.scss
      _sections.scss
      _news-carousel.scss
      _top-10-hot-news.scss
      _blog.scss
      _footer.scss
      _pages.scss
      _ecommerce.scss
      _adapt-showcase.scss
      _preloader.scss
      _dark-mode.scss
      _responsive.scss
    /js
      main.js
      oxygen.js
      blog.js
      ecommerce.js
  index.html  about.html
  blog.html
  blog-single.html
  contact.html
  shop.html
  product.html
  category.html
  cart.html
  checkout.html
  wishlist.html
  compare.html
  orders.html
  order-details.html
  order-success.html
  documentation.html
Where to edit
Text & sections
Edit the HTML pages directly.
Theme styling
Edit SCSS partials then compile to `assets/css/oxygen.css`.
Images
Replace SVGs or use your own screenshots in `assets/images`.
Interactions
Edit `assets/js/oxygen.js`.
Customize

Colors, typography, and SCSS

Oxygen is built to be customized from variables first — not by hunting random styles.

Color palette
Edit `src/scss/_variables.scss`.
$ox-primary-dark: #012E40;
$ox-secondary-dark: #024959;
$ox-accent: #026773;
$ox-accent-soft: #3CA6A6;
$ox-soft-bg: #F2E3D5;
Typography
Inter is loaded from Google Fonts in each page’s <head>.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
Compile SCSS (recommended)
Oxygen ships with a simple Gulp build to compile `src/scss/main.scss` into `assets/css/oxygen.css`.
# Install dependencies (one-time)
npm install

# Dev (watch SCSS and rebuild oxygen.css)
npm run dev

# Build (oxygen.css + oxygen.min.css)
npm run build
Optional: compile directly with Sass CLI.
# Install Sass (one-time)
npm i -g sass

# Compile once
sass src/scss/main.scss assets/css/oxygen.css

# Watch while editing
sass --watch src/scss/main.scss:assets/css/oxygen.css
Key partials
_variables.scss
Palette, radius, shadows, spacing.
_base.scss
CSS custom properties + dark mode overrides.
_buttons.scss
Oxygen button styles (`btn-ox-*`).
_navbar.scss
Sticky navbar, mega menus, mobile menu.
_hero.scss
Hero styles + dark hero variant.
_sections.scss
Cards, pricing, FAQ, CTA, testimonials.
_ecommerce.scss
Shop, cart, checkout, product styles.
Sections

How to edit page content

Most buyers will customize by editing text, swapping images, and reordering sections.

Editing text

Edit headings and paragraphs directly in the HTML pages. Most sections use consistent spacing via Bootstrap utilities and Oxygen classes.

Replacing images

Replace `assets/images/app.png` and `app.png` with your own screenshots. Keep the `.preview-frame` wrapper for the premium browser chrome.

JavaScript interactions
All interactions are in `assets/js/oxygen.js` (vanilla JS).
Navbar scroll state
Adds `.is-scrolled` to the navbar after scrolling.
Active section indicator
Updates `.nav-link.active` while scrolling.
Reveal + counters
IntersectionObserver-based animations.
Counters markup
<div class="stat-number" data-counter="42" data-suffix="%"></div>
Dark Mode

Theme toggle

Oxygen includes a built-in dark/light theme toggle out of the box.

Dark mode

Click the moon / sun icon in the navbar to toggle dark mode. The preference is saved to localStorage.

Dark mode colors are defined in src/scss/_base.scss inside the [data-theme="dark"] block. Edit those CSS custom properties to change the dark palette.

Credits

Libraries and assets

Make sure your marketplace listing includes accurate credits and licenses.

Bootstrap 5

Bootstrap 5.3.3 via CDN (CSS + bundle JS).

Bootstrap Icons

Bootstrap Icons 1.11.3 via CDN.

Font
Inter via Google Fonts.
Images
The included SVG mockups/logos/avatars are lightweight placeholders. Replace them with your own product screenshots for a real brand.
Demo product images
Shop demo pages use product stock images from unsplash.com. Replace these with your own product photography before launch.
Next step

Customize a page and ship.

Pick a homepage variation, replace the mockups, then update variables to match your brand.

Open Home 1
Need an edit? The SCSS is modular and buyer-friendly.