RremiclassicDec 10, 2021
I saw the dark css how do I change the theme from white to dark?
How to change to dark theme?
6 replies · opened Dec 10, 2021
SSemicolon WebSTAFFDec 10, 2021
Hello,
You can simply add the .dark Class to the `` tag. However, not all Niche Demos comes with Dark Scheme out of the Box since they are Niche Demos. Dark Scheme is provided only for the Main Classic Styling. You will need to manually change the styling of some of the Components in Niche Demos to Dark Scheme. You can check the Documentation here: http://docs.semicolonweb.com/docs/getting-started/color-schemes/ .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
RremiclassicDec 10, 2021
Sorry, it doesnt seem to be working I did this <body class="stretched" class="section dark"> I tried a few things and looked at the documents, I am a noobie so I am sorry. Can you help me with the code? I just want it to be dark.
RremiclassicDec 10, 2021
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,600,700|Montserrat:400,700|Merriweather&display=swap" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<!-- Media Agency Demo Specific Stylesheet -->
<link rel="stylesheet" href="app-landing/app-landing.css" type="text/css" />
<!-- / -->
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="one-page/css/et-line.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="app-landing/css/fonts.css" type="text/css" />
<!-- Bootstrap Switch CSS -->
<link rel="stylesheet" href="css/components/bs-switches.css" type="text/css" />
<link rel="stylesheet" href="css/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/colors.php?color=267DF4" type="text/css" />
<!-- Document Title
============================================= -->
<title>HyperHub</title></head>
<body class="stretched" .dark>
SSemicolon WebSTAFFDec 11, 2021
Hello,
Consider using the following code:
[ch_pre][/ch_pre]
This should work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
RremiclassicDec 11, 2021
Awesome, that worked. And which stylesheet file do I edit for changing the dark colours?
SSemicolon WebSTAFFDec 13, 2021
Hello,
For the Niche Demos, you can find the CSS Classes used in the Niche Demo specific Stylesheet. Since you are using the App Landing Niche Demo, you will need to check the demos/app-landing/app-landing.css File.
Also, we do not recommend editing this File, but to add your Custom Dark Styles to the css/custom.css File instead, so that Future Updates can be easily handled. More Documentation can be found here: http://docs.semicolonweb.com/docs/getting-started/theme-customization/ .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard