@newskit-themes/the-sun

Package exporting Newskit compatible themes 🎨 for The Sun

📦 Install

Use your favourite package manager to install @newskit-themes/the-sun

npm install @newskit-themes/the-sun

yarn add @newskit-themes/the-sun

🔖 Current themes available:

TheSun-dark-fabulous.json
TheSun-dark-football.json
TheSun-dark-health.json
TheSun-dark-lifestyle.json
TheSun-dark-money.json
TheSun-dark-motors.json
TheSun-dark-news.json
TheSun-dark-showbiz.json
TheSun-dark-sport.json
TheSun-dark-tech.json
TheSun-dark-travel.json
TheSun-dark-tv.json
TheSun-dark.json
TheSun-fonts.json
TheSun-light-fabulous.json
TheSun-light-football.json
TheSun-light-health.json
TheSun-light-lifestyle.json
TheSun-light-main.json
TheSun-light-money.json
TheSun-light-motors.json
TheSun-light-news.json
TheSun-light-showbiz.json
TheSun-light-sport.json
TheSun-light-tech.json
TheSun-light-travel.json
TheSun-light-tv.json
TheSun-light.json
TheSun-sizing.json
thesun-dark-fabulous.css
thesun-dark-football.css
thesun-dark-health.css
thesun-dark-lifestyle.css
thesun-dark-money.css
thesun-dark-motors.css
thesun-dark-news.css
thesun-dark-showbiz.css
thesun-dark-sport.css
thesun-dark-tech.css
thesun-dark-travel.css
thesun-dark-tv.css
thesun-dark.css
thesun-fonts.css
thesun-light-fabulous.css
thesun-light-football.css
thesun-light-health.css
thesun-light-lifestyle.css
thesun-light-main.css
thesun-light-money.css
thesun-light-motors.css
thesun-light-news.css
thesun-light-showbiz.css
thesun-light-sport.css
thesun-light-tech.css
thesun-light-travel.css
thesun-light-tv.css
thesun-light.css
thesun-sizing.css

✍️ Usage

  // To import themes in json format
  
  import {newskitLightTheme} from 'newskit';
  import TheSunDarkFabulous from '@newskit-themes/the-sun/TheSun-dark-fabulous.json'

  // compiling and merging it with a base theme
  export const theSunTheme = createTheme({
    name: 'the-sun-theme',
    baseTheme: newskitLightTheme,
    overrides: TheSunDarkFabulous,
  });

  ...
  
  < ThemeProvider theme={theSunTheme}>
    < Container>{children}< /Container>
  < /ThemeProvider>

  // To import themes in CSS variables format to CSS files (Currently only the sun & talktv are supported)

  @import '@newskit-themes/the-sun/thesun-light.css'
  @import '@newskit-themes/talktv/talktv-light.css';