Created on 26 July 2022
icon_unfollowing
Login to follow
light-theme-toggle

Dark Theme 

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded on 26 July 2022 by 
light-theme-toggle

Dark Theme 

Details
Reactive Application, Dark Theme to Light Theme without loosing it on refresh, we have a theme module that can be used in multiple application by taking dependencies from the theme, Easy to customize according to your color pallets, Turn on Dark Mode for a great viewing experience especially in low-light environments. Dark Mode is a dramatic new look that’s easy on your eyes and helps you focus on the content. It uses a dark color scheme and is activated with a toggle icon on header. Sample Screens have created to have a purview. You can comment for any quarries related to it.
Read more

This is designed so that you can switch between both dark and light themes I tried to cover as many things as much as possible in this, still, if something is there any suggestion feel free to message and we will try to update it.

Please check the Documentation for step by step guide.

You can further modify the Colors according to you by changing the Colours in theme module
I am attaching a stylesheet that you can manipulate according to your requirnemnts.



/* ===================================================================== */

/* Root - CSS Variables */

/* ===================================================================== */ 

 :root{

  /*! Color - Brand */  

  --color-primary:#244d79;

  --color-secondary:#cf1d29;

  --color-primary-hover:#124166;

  --color-primary-selected:rgba(20, 110, 245, 0.117);

  --color-primary-lightest:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));

  /*! Color - Focus */

  --color-focus-outer:#ffd337;

  --color-focus-inner:var(--color-neutral-10);

  /*! App Settings */

  --header-color:#fff;

  --color-background-body:#f8fcff;

  --color-background-login:#8398a6;

  --login-background-light:#fff;

/* App Settings */

    --header-size: 80px;

    /*! Color - Neutral */

  --color-neutral-0:#ffffff;

  --color-neutral-1:#f8f9fa;

  --color-neutral-2:#f1f3f5;

  --color-neutral-3:#e9ecef;

  --color-neutral-4:#dee2e6;

  --color-neutral-5:#ced4da;

  --color-neutral-6:#adb5bd;

  --color-neutral-7:#6a7178;

  --color-neutral-8:#4f575e;

  --color-neutral-9:#272b30;

  --color-neutral-10:#101213;

  --color-neutral-login:#ffffff7d;  

 }

  /*! App Font */

  html{

  color:var(--color-neutral-9);

  font-family:font-family, sans-serif;

  }

/*!Logo*/

/* Login Form*/

/* ===================================================================== */

/* Box-Shadow                                                           */

/* ===================================================================== */

/* Login and Splash Image */


/* Dark Theme */

/* ===================================================================== */

/* Root - CSS Variables For Dark Theme                                              */

/* ===================================================================== */ 

[data-theme="dark"]{

      --color-primary: #cf1d29;

    --color-secondary: #244d79;

    --color-primary-hover: #a0000d;

    --color-primary-selected: #C33F45;

    --color-primary-lightest: #ecafb1;

    --color-primary-light: #db8c8c;

      /*! Color - Neutral */

  --color-neutral-0:#1a1c1e;

  --color-neutral-1:#f8f9fa;

  --color-neutral-2:#10121342;

  --color-neutral-3:#e9ecef;

  --color-neutral-4:#272b305e;

  --color-neutral-5:#2c2c2c;

  --color-neutral-6:#adb5bd;

  --color-neutral-7:#6a7178;

  --color-neutral-8:#f8f9fa;

  --color-neutral-9:#fff;

  --color-neutral-10:#101213;

    --color-neutral-login:#1a1c1ecc; 

  /*! Color - Semantic */

  --color-error-light:#fceaea;

  --color-error:#dc2020;

  --color-warning-light:#fdf6e5;

  --color-warning:#e9a100;

  --color-success-light:#eaf3eb;

  --color-success:#29823b;

  --color-info-light:#e5f5fc;

  --color-info:#017aad;

  /*! Overlays */

  --overlay-background:rgba(0, 0, 0, 0.25);

  /*! Elevation / Shadow */

  --shadow-none:none;

  --shadow-xs:0 1px 2px rgba(0, 0, 0, 0.1);

  --shadow-s:0 2px 4px rgba(0, 0, 0, 0.1);

  --shadow-m:0 4px 6px rgba(0, 0, 0, 0.1);

  --shadow-l:0 6px 8px rgba(0, 0, 0, 0.1);

  --shadow-xl:0 8px 10px rgba(0, 0, 0, 0.1);

  /*! App Settings */

  --header-color:#1a1c1e;

  --color-background-body:#101213;

  --color-background-login:#272b30;

  --login-background-light:#101213;

}


I hope this will help you and In case of any issue ping me I'll try to solve it for you
Thanks.

Release notes (1.0.0)
Reviews (2)
by 
2022-07-31
in version 1.0.0
It's really useful great work tousif khan ?? 
by 
2022-07-29
in version 1.0.0
Working as Expected
Category
Demos & samples, User interface
Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
See all 4 dependencies
Application Objects
Dark Theme has 5 AOs.
Team
Compatible with
Version 11
11.14.0 or higher
Database:
All
Asset consumers
No consumers yet.
Weekly downloads